Ionic-framework: Ionic 2.0.0 RC.0: How can I configure my custom gulp tasks in the Ionic 2 task runner?

[ferminmoli]

I need to run my old gulpfile custom tasks using the new npm script tasks. How can I do this? In the next example code I'm referencing to watch and build tasks. I've found out this way but for watch task is not working, only for build.

var gulp = require('gulp'),
    argv = process.argv;

/**
 * Ionic hooks
 * Add ':before' or ':after' to any Ionic project command name to run the specified
 * tasks before or after the command.
 */
gulp.task('serve:before', ['watch']);
gulp.task('emulate:before', ['build']);
gulp.task('deploy:before', ['build']);
gulp.task('build:before', ['build']);

// we want to 'watch' when livereloading
var shouldWatch = argv.indexOf('-l') > -1 || argv.indexOf('--livereload') > -1;
gulp.task('run:before', [shouldWatch ? 'watch' : 'build']);

var appScripts = require('@ionic/app-scripts');

gulp.task('watch', function(done) {
    return appScripts.watch();
});

gulp.task('build', function(done) {
    return appScripts.build();
});

[ramonornela]

Related in ionic-cli 1399

[nachofregeiro]

I think the question is, how do we manage to do this same thing in our current gulpfile?

"scripts": {
    "build": "ionic-app-scripts build",
    "watch": "ionic-app-scripts watch",
    "serve:before": "watch",
    "emulate:before": "build",
    "deploy:before": "build",
    "build:before": "build",
    "run:before": "build"
  },

[danbucholtz]

Our recommendation is you move forward with our new build process and update accordingly. That way you'll be supported into the future. Would that be something that is doable? Please let me know.

Thanks,
Dan

[nachofregeiro]

Actually we are running custom tasks using gulp like copying third party scripts, polyfills, running karma tests, etc. That's why we want to keep using gulp. Build is working fine this way, but watch is not returning a promise. What do you suggest? Should we write our own custom task?

Thank you!

var appScripts = require('@ionic/app-scripts');

gulp.task('watch', function(done) {
    return appScripts.watch();
});

gulp.task('build', function(done) {
    return appScripts.build();
});

[danbucholtz]

We'll play around with it a bit in the coming days and see what the best way to do it is.

Thanks,
Dan

[okonon]

@danbucholtz is there any documentation on how to integrate things into your new build system?

[jgw96]

@okonon We are currently working on this. Ionic 2 is now based on NPM scripts like other popular cli's such as Create-React-App. At this time you can easily integrate into our build process by creating your own npm scripts.

[ferminmoli]

@jgw96 How could I create my own script and integrate it to the build chain? Is there any example? I'd need to do some stuff before ionic build process. Thanks in advance!

[pdrosos]

@jgw96
With Ionic beta 11 I have modified the gulpfile.json to add font-awesome to the project, like described here - https://forum.ionicframework.com/t/extend-ionic2-add-custom-fonts-icons-ionic-config-json/48589
How should this be done now with own npm script? Some examples and documentation will be very useful. Thanks!

[nachofregeiro]

@danbucholtz, is it possible to return the build promise on watch like this?

function watch(context, options, watchConfig) {
    context = util_1.generateContext(context);
    options = util_1.generateBuildOptions(options);
    watchConfig = util_1.fillConfigDefaults(context, watchConfig, WATCH_TASK_INFO);
    // force watch options
    options.isProd = false;
    options.isWatch = true;
    var logger = new util_1.Logger('watch');
    return build_1.build(context, options).then(function() {
        startWatchers(context, options, watchConfig);
        logger.ready();
    });
}

That enables us to call watch from our gulpfile this way:

var appScripts = require('@ionic/app-scripts');

gulp.task('watch', function(done) {
    return appScripts.watch();
});

gulp.task('build', function(done) {
    return appScripts.build();
});

[jayhuang75]

I am confuse that ionic2 RC moved the build script to NPM. I hope we can have a way to customize the build script too. Please advise.

[danbucholtz]

@jayhuang75,

We are in the process of posting documentation on how to customize the build process right now.

Thanks,
Dan

[jayhuang75]

@danbucholtz you guys rock! Thanks.
Is it this part? ---Custom Config Files---

[jayhuang75]

Hello guys. I finally I found the way to do that. In the document is clearly explain what to do.

Thanks.

[danbucholtz]

@jayhuang75, you're an eager beaver finding those docs :) We weren't going to share until later today until we published out a new version of @ionic/app-scripts. 😄

Thanks,
Dan

[flivni]

Hi @danbucholtz, can you post the link here once you guys publish?

[sfabriece]

@danbucholtz where will this posted, is it possible to a preview for people with pressing projects?

[danbucholtz]

http://ionicframework.com/docs/v2/resources/app-scripts/
http://ionicframework.com/docs/v2/resources/third-party-libs/

Some of the third party lib documentation is slightly out of sync right now. The corresponding version of @ionic/app-scripts will be coming out soon.

Thanks,
Dan

[jgw96]

Hello all! Since the corresponding version of app-scripts is out now I am going to close this issue for now. Thanks!