Ionic 2添加自定义构建脚本

时间:2017-08-09 14:13:40

标签: ionic-framework npm ionic2

我通过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的自定义脚本;替换"它将使用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/'));
});

4 个答案:

答案 0 :(得分:3)

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

答案 1 :(得分:1)

要简单地运行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"
}

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

答案 2 :(得分:0)

因为你想从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);
}

答案 3 :(得分:0)

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

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

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