4 Gulp Tasks That Will Save You Time and Money

If you are using Ionic you have for sure seen that it uses as build system. But Gulp is not Ionic specific, it’s used in many ways today, similar to Grunt. So if you want to know how you can get more out of these building tools, follow along this article.

I will show you some plugins you definitely don’t want to miss and which will save you some time (which is money) in your next project. To keep the scope small, I will show you how to apply them to a simply Ionic project, but obviously you can also just add them to your own gulpfile!

Setup a simple Demo Project with Ionic

Let’s create our starting point. If you already have some project with gulp, you can just skip this step. Otherwise go to your command line and run:

ionic start devdactic-gulpTasks blank
cd devdactic-gulpTasks

Additional we create a tiny controller with some valid JavaScript but some linter errors, so open the app.js and insert:

.controller("MyCtrl", function () {
  var whatever = "A String";
  var a = new Object();
  $scope.coolfunc = function () {
    // TODO: Make this work
    return 42 == true
  }
});

To make things more easy we can already install all the plugins we will be using, so run:

npm install --save-dev gulp-load-plugins gulp-jshint jshint-stylish gulp-fixmyjs gulp-todo

Now we are ready to integrate and test some cool Gulp plugins!

Gulp Plugin 1: gulp-load-plugins

The first plugin will help us to reduce the number of lines in our gulpfile, as this plugin will automatically load all the other registered plugins which have the gulp- prefix. To use this plugin, open the gulpfile.js and append at the top of the file this line:

var plugins = require('gulp-load-plugins')();

This doesn’t look like much, but think about this: Every time you add a new plugin and want to use it, you must add the require() line to your code. And when you delete the plugin and forget to remove the line? Save your time and just let this plugin take care of that! You can then use plugins.whatever to use your other plugins, as you can see in the next sections.

Gulp Plugin 2: gulp-jshint

Linting your JavaScript code can save you hours of debugging. Trust me, I know what I am saying. This little plugin will scan your files and print out all the possible improvements for your code. Before we add a Gulp task, we need to create a .jshintrc at the root of our project and insert this:

{
	"node": true,
	"browser": true,
	"esnext": true,
	"bitwise": true,
	"camelcase": true,
	"curly": true,
	"eqeqeq": true,
	"immed": true,
	"indent": 2,
	"latedef": true,
	"newcap": true,
	"noarg": true,
	"quotmark": "single",
	"undef": true,
	"unused": true,
	"trailing": true,
	"smarttabs": true,
	"globals": {
		"angular": false
	}
}

This is the config file for your JavaScript linter. This is just an example, you can insert whatever you like, just take a look at the JSHint Options.

Now we can add our linting task, therefore open the gulpfile.js and add this task:

ngulp.task('lint', function() {
  return gulp.src('./www/js/*.js')
    .pipe(plugins.jshint())
    .pipe(plugins.jshint.reporter('jshint-stylish'));
});

So here we give in our folder with JavaScript files, call our jshint task and also add a reporter for a better output (we installed this plugin in the first step). To call our new task, you can run gulp lint from your command line and you will see a short output of what can be improved in your files.

[21:44:06] Starting 'lint'...
line 17  col 21  Strings must use singlequote.
line 18  col 28  Strings must use singlequote.
line 19  col 21  The object literal notation {} is preferable.
line 22  col 17  Expected '===' and instead saw '=='.
line 22  col 22  Missing semicolon.
line 23  col 4   Missing semicolon.
line 24  col 3   Missing semicolon.
line 10  col 7   'cordova' is not defined.
line 13  col 7   'StatusBar' is not defined.
line 20  col 3   '$scope' is not defined.
line 18  col 7   'whatever' is defined but never used.
line 19  col 7   'a' is defined but never used.
⚠  12 warnings

[21:44:07] Finished 'lint' after 361 ms

Now this output is already very handy, but I thought this might be actual better if something could automatically fix those things. That’s where our next plugin comes into play.

Gulp Plugin 3: gulp-fixmyjs

This plugin does exactly what you might think it would do. Fixmyjs tries to fix some general ugly parts in your JavaScript files automatically, which is exactly what we want after seeing our result from the linting. We have already installed it, so add this task to your gulpfile.js:

ngulp.task('fixjs', function() {
  return gulp.src("./www/js/*.js")
      .pipe(plugins.fixmyjs())
      .pipe(gulp.dest("./www/js/"));
});

This task will look for all *.js files inside the www/js/ folder and put the corrected versions right back to that place. If your files are somewhere else, you need to change those paths obviously! Now you can run the task from your command line with gulp fixjs and the controller we initially added should look like this:

.controller('MyCtrl', function () {
  var whatever = 'A String';
  var a = {};
  $scope.coolfunc = function () {
    // TODO: Make this work
    return 42 === true;
  };
});

So the plugin fixed some semicolons, removed double quotes, changed the variable initialisation and added a third = for safer JavaScript. Our test is just a simple file with some lines, but try to fix all those stuff in really big files and you are going mad. So thank you, Fixmyjs!

Gulp Plugin 4: gulp-todo

The last plugin is great to track everything you need to fix before you release or build your project. This plugin will write out every line you added with // TODO to your files, so you never loose track of important things you left to be done. Simply add this task to your gulpfile.js:

ngulp.task('todo', function() {
    gulp.src('www/js/*.js')
        .pipe(plugins.todo())
        .pipe(plugins.todo.reporter('json', {fileName: 'todo.json'}))
        .pipe(gulp.dest('./'));
});

So again this task goes over all our JavaScript files and writes out the todos to a todo.json file at the root level of your projects directory. Now run gulp todo and inspect the created file:

[
  {
    "file": "app.js",
    "text": "Make this work",
    "kind": "TODO",
    "line": 19
  }
]

As you can see, the output will contain the text, the file and line of our todo. You can find more options for this plugin on the gulp-todo package page. It’s great to integrate this task to your continuous integration, you can also specify other filetypes and have a nice report of everything all the time!

Final Gulp Optimisation Chain

The final thing I added to my gulpfile was to chain all the previous tasks in one, so you only need to call one task when you build your project and have a linting report, standard problems automatically fixed and a report of todos, so go ahead and add this to your gulpfile.js:

ngulp.task('quality', ['lint', 'fixjs', 'todo']);

This will finally chain all our tasks, so now you can call gulp quality and all you dreams come true!

See a video version of this article below.

http://youtu.be/TMyXZcabwes

If this tutorial was helpful, follow me on twitter @schlimmson and leave a comment/ tweet it! Don’t forget to subscribe to my newsletter to receive new posts and info via mail!

So long, Saimon