Ionic 2 添加自定义构建脚本答案

【问题标题】：Ionic 2 Add Custom build scriptIonic 2 添加自定义构建脚本
【发布时间】：2018-01-17 11:48:07
【问题描述】：

我通过 CLI 使用 Ionic 2。在这个版本中，他们使用 NPM SCRIPTS 而不是 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"
  },

我需要创建一个名为“replace”的自定义脚本，它将使用 NPM 替换。如何添加它以便在我运行 ionic serve 或 build 时运行它？

这是我要运行的 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/'));
});

【问题讨论】：

猜猜我总有一天会自己回答这个问题哈哈
您要使用 npm 替换还是您自己的自定义替换？
Npm replace 我只需要在构建之前替换文件中的版本现在我正在手动运行 gulp replace string
提供 gulp 代码，以便在 npm 中轻松容纳
我将 gulp 代码添加到原始问题中

标签： ionic-framework npm ionic2

【解决方案1】：

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

离子服务：

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']);

【讨论】：

【解决方案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 将启动一个开发服务器并保持运行，因此第二部分从不执行。

【讨论】：

【解决方案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 任务中：

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

【讨论】：

【解决方案4】：

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

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

【讨论】：