The first plugin we are going to look at is the minify plugin (https://www.npmjs.com/package/gulp-minify). This plugin lets you minify your JavaScript source. We can install it using npm:

npm install gulp-minify --save-dev

Now we can simply get some source, pipe it to the minify plugin, and output the results:

var gulp = require('gulp');
var minify = require('gulp-minify');

gulp.task('minify', function () {
   gulp.src('scripts/*.js')
      .pipe(minify({
         ext:{
            src:'.debug.js',
            min:'.js'
         }
      }))
      .pipe(gulp.dest('prod'));
});

gulp.task('default', ['minify']);

Now, when you run Gulp, you will see a prod folder containing all the scripts twice, a .debug.js and a .js variant. The ext object lets you specify the input and output suffixes. It is also possible to transform your filenames using regular expressions, but you can figure that out on your own. The minified index.js file should look something like the following:

angular.module("shopApp",[]).controller("homeController",function(o){o.topProducts=repository.getTopProducts(),o.searchTerm=""});

That is not very readable, but very compact. It is perfect for production systems where those precious bytes matter.

We can tweak the minify plugin even further. In our case, having the source files is not necessary at all, so we can exclude them:

.pipe(minify({
   ext:{
      min:'.js'
   },
   noSource: true
}))

Other than that, you can ignore files and folders, preserve comments (as they are removed by default), and keep the original variable names. Having all of those options in your gulpfile is fine, but sometimes it gets a little big for just one file. It is easy to move the options into a separate configuration file. Create a new file and name it minify.conf.js. Inside, it is just the options object you would like to pass to the minify plugin, but, like your Protractor script, exposed through the module.exports object:

module.exports = {
   ext:{
      min:'.js'
   },
   noSource: true
};

You can now simply require the configuration file in your gulpfile:

gulp.src('scripts/*.js')
   .pipe(minify(require('./minify.conf.js')))
   .pipe(gulp.dest('prod'));

That way, it becomes easy to share configurations between multiple gulpfiles or to change configurations, but not your gulpfile.