Ionic 2 Generic Copy Gulp Task

UPDATE: I've submitted a PR to the Ionic team for this. I think it can be useful to others.

I'm finally getting up to speed on Ionic 2 by working my way through the excellent book "Building Mobile Apps with Ionic 2 from Josh Morony.

I've been pleased to see the Ionic Team created a build process so your code is completed in /app and the output is generated in /www. This will replace my previous custom build process when working on Ionic 1.X apps.

I like how the gulp process uses imported scripts to handle the copying of HTML, JS, etc. This keeps your Gulp file from becoming overloaded with JS and makes it much easier to read. They even have a handy Github repo for these simple build scripts.

In Josh's book, he suggests keeping image files in the www directory. For me, I'd rather have EVERYTHING in the /app directory and nothing in the /www directory for version control purposed. This way, the entire /www directory can be ignored. This allows one true source of all app info.

UPDATE: When generating a new Ionic project, the .gitignore file excludes the www/build directory. So, you can safely put images, data, or other content outside the www/build directory for fairly easy version control with Git. However, I still prefer all this be kept in a single location in app.

So, I've put together my own very simple gulp script to do more generic copying / moving of data. I've put it in my project's root directory under /gulp-scripts/gulp-generic-copy.js.

var gulp = require('gulp');

module.exports = function(options) {

  if(!options || !options.src  || !options.dest) {
    return;
  }
  return gulp.src(options.src)
    .pipe(gulp.dest(options.dest));
};

Now, I can do simple generic things like this:

gulp.task('data', function() {
  return copyGeneric({
    src: 'app/data/**/*.json',
    dest: 'www/data'
  });
});

gulp.task('images', function() {
  return copyGeneric({
    src: ['app/images/**/*.jpg', 'app/images/**/*.png'],
    dest: 'www/images'
  });
});

Instead of a unique gulp script for each type of data, I just pass in an options object with the right src and dest files.

Then, I can add these tasks to the build and watch sections of the gulp script.

gulp.task('watch', ['clean'], function(done){
  runSequence(
    ['sass', 'html', 'fonts', 'scripts', 'data', 'images'],
    function(){
      gulpWatch('app/data/**/*.json', function(){ gulp.start('data'); });
      gulpWatch('app/**/*.scss', function(){ gulp.start('sass'); });
      gulpWatch('app/**/*.html', function(){ gulp.start('html'); });
      buildBrowserify({ watch: true }).on('end', done);
    }
  );
});

gulp.task('build', ['clean'], function(done){
  runSequence(
    ['sass', 'html', 'fonts', 'scripts', 'data', 'images'],
    function(){
      buildBrowserify({
        minify: isRelease,
        browserifyOptions: {
          debug: !isRelease
        },
        uglifyOptions: {
          mangle: false
        }
      }).on('end', done);
    }
  );
});

P.S. You probably should NOT add your images directory to the list of watched files. Doing so really tends to eat up CPU space if you have lots of files. Gulp wasn't really made for analyzing images.