离子 2 添加自定义构建脚本

Question

我正在通过CLI使用Ionic 2。在这个版本中，他们使用NPM脚本而不是gulp。

"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},

我已经阅读了有关将自定义脚本添加到配置的信息，但不清楚如何执行此操作。 这是我当前的配置...

"config": {
"ionic_bundler": "webpack",
"ionic_source_map": "source-map",
"ionic_source_map_type": "eval"
},

我需要创建一个名为"替换"的自定义脚本它将使用 NPM 替换。如何添加它，以便在运行离子服务或构建时它会运行？

这是我想要运行的 gulp 代码。

var gulp = require('gulp');
var replace = require('gulp-string-replace');
var p = require('./package.json');
var version = p.version;
gulp.task('serve:after', ['version']);
console.log('Task init!!!');
gulp.task('version', function() {
gulp.src(["./www/index.html"])
.pipe(replace(/VERSION/g, p.version))
.pipe(gulp.dest('./www/'));
});

Answer 1

Ionic CLI (v3.X( 直接转到gulpfile.js并查找 CLI 钩子。

离子服务：

gulp.task('ionic:watch:before', function() {
console.log("this is run before 'ionic serve'");
});

离子构建：

gulp.task('ionic:build:before', function() {
console.log("this is run before 'ionic build'");
});

所以你应该在你的gulpfile.js中添加这样的东西：

gulp.task('ionic:watch:before', ['version']);
gulp.task('ionic:build:before', ['version']);

Answer 2

要简单地运行您的gulp任务，只需将其添加到package.json即可。

"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
--> "ionic:build": "ionic-app-scripts build && gulp serve:after",
"ionic:serve": "ionic-app-scripts serve",
"watch": "ionic-app-scripts watch"
}

注意：如果你把"&& gulp"放在ionic：serve之后，这将不起作用 - gulp任务将等待第一部分完成，但ionic serve将启动开发服务器并保持运行，因此第二部分永远不会执行。

Answer 3

因为您想从 NPM 运行您的 Gulp 任务

添加 gulp-npm-script-sync，如下所示npm install --save-dev gulp-npm-script-sync

现在我们需要将这个 gulp 任务同步到package.json，如下所示

var gulp = require('gulp');
var sync = require('gulp-npm-script-sync');
// your gulpfile contents
sync(gulp);

每次使用新任务更新gulpfile时，它都会更新package.json。

你甚至可以把它扔进一个吞噬任务中：

gulp.task('sync', function () {
sync(gulp);
}

Answer 4

首先，您必须复制要修改的现有任务并将其粘贴到源代码/项目/任务中。然后将您的任务添加到该文件中。并更改 package.json 以覆盖 ionic 2 默认配置。

"config": {
"ionic_cleancss": "./task/cleancss.config.js"
}, 

更多信息 ： https://github.com/ionic-team/ionic-app-scripts#custom-configuration