Friday, 28 April 2017

Ionic 2 Custom NPM Scripts or gulpfile.js - pre build with custom flags

In my old angular 1 project I had a gulp file with custom tasks. For each different project/client a had a specific gulp task. In that task a config object is defined with the assets path for that project, id, name and other specific properties. That object is used in all other gulp sequence tasks to copy assets from project folders, rename some files, change source code values, etc.

To build a project I simply would do:

gulp build-projectx to build project for client X;

gulp build-projecty to build the project for client Y.

Some source code from my gulpfile.js:

//ARRAY OF GULP TASKS TO COMPILE JS, LESS AND PARSE DATA
var gulp            = require('gulp'),
    seq             = require('run-sequence'),
    less            = require('gulp-less'),
    replace         = require('gulp-replace'),
    gulpSubstituter = require('gulp-substituter');

var tasks = ["cordovaconfigedit", 'html', 'images', 'less', 'js'];
var project = {};

//PROJECT Y task
gulp.task('projecty', function (done)
{
    project.bundle = "com.app.projecty";
    project.title = "Project Y";
    project.version = "1.7.9";
    project.displayName = "Project Y";
    project.senderID = "123456999";
    project.googlemapsapi = "yyyyyyyyyyyyyyyyyyyy";
    project.sharedassets = "shared/assets";
    project.assets = "projecty/assets";

    seq('clean', tasks, done);
});

//PROJECT X task
gulp.task('projectx', function (done)
{
    project.bundle = "com.app.projectx";
    project.title = "Project X";
    project.version = "1.8.0";
    project.name = "projectx";
    project.senderID = "123456789";
    project.googlemapsapi = "xxxxxxxxxxxxxxxxxxxx";
    project.sharedassets = "shared/assets";
    project.assets = "projectx/assets";

    seq('clean', tasks, done);
});

gulp.task('images', function ()
{
    var stream = gulp.src([project.sharedassets, project.assets]);
    return stream.pipe(gulp.dest(path.join(config.dest, 'assets')));
});

gulp.task('cordovaconfigedit', function ()
{
    //REPLACES THE SOURCE CONFIG.XML FILE TO THE FINAL CONFIG.XML FILE 
    //USED BY CORDOVA, WITH THE CORRECT REPLACED VALUES FROM THE PROJECT OBJECT
    return gulp.src('configsrc.xml')
    .pipe(gulpSubstituter(
    {
        bundle: project.bundle,
        version: project.version,
        versioncode: project.version,
        title: project.title,
        pathproject: project.name,
    }))
    .pipe(rename({ basename: 'config' }))
    .pipe(gulp.dest(''));
});

Now I want to create something similar in my new ionic 2/3 project.

For example, I want to do something like:

ionic serve projectX 
or
ionic cordova run project

And set a object filled with specific property values for the project X and then read some of that values along with the other npm scripts.

How can I extend or override the default ionic tasks and add the things I need to do?

Or can I get a env variable inside my gulpfile.js in a pre build state before any other npm script and run my tasks?

Thank you.



via hsantos

No comments:

Post a Comment