Question

我通过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"
  },

我需要创建一个名为＆＃34的自定义脚本;替换＆＃34;它将使用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 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']);

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"
}

注意：如果你把＆＃34;＆amp;＆amp;吞掉＆＃34; after ionic：serve - gulp任务将等待第一部分完成，但离子服务将启动一个开发服务器并保持运行，因此第二部分永远不会执行。

Answer 3

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

按以下npm install --save-dev gulp-npm-script-sync

添加Check it out

现在我们需要将此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);
}

Answer 4

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

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

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

Ionic 2添加自定义构建脚本

4 个答案: