Ionic 2 Add Custom build script

Question

I am using Ionic 2 via CLI. In this version they use NPM SCRIPTS as opposed to gulp.

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

I have read about adding custom scripts to the config but am not clear how to do this. this is my current config...

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

I need to create a custom script called "replace" It will be using NPM replace. How can I add this so that when I run ionic serve or build it will run?

Here is the gulp code I want to run.

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) goes directly to gulpfile.js and looks for CLI hooks.

ionic serve:

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

ionic build:

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

so you should add something like this to your gulpfile.js:

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

Answer 2

To simply run your gulp task just add it to your 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"
}

Note: this will not work if you put the "&& gulp" after ionic:serve - the gulp task will wait for the first part to finish, but ionic serve will start up a dev server and stay running so the second part never executes.