Introducing the gulp-iife Plugin

What do you in JavaScript to prevent your local variables and functions from bleeding into an outer or the global scope? Right, you wrap them within another function. Most of the time, that wrapper function is an anonymous function which is being invoked right away. That's what's known as immediately invoked function expression or IIFE:

(function () {
  // Your code goes here
})();

The other day, I was working on an Angular application where I have plenty of controllers, services, and directives, each of which is defined in its own file. Following John Papa's excellent Angular style guide, these files all follow the same structure:

(function () {
  "use strict";

  angular.module("app").factory("someService", someService);

  function someService() {
    // Implementation
  }
})();

I like this style because it looks nicely organized and is easily readable, but notice how the entire code is indented one level due to the wrapping anonymous function expression. Plus, I have to repeatedly type both the wrapper function and the "use strict"; directive. It's not a huge issue, but a thorn in my side.

Doesn't that sound like a perfect job for an automated build tool? I'm already using Gulp in this project, so I wrote a little plugin that does exactly that. Ladies and gentlemen, let me present to you gulp-iife.

#gulp-iife

In the spirit of Gulp plugins, gulp-iife does one thing and one thing only: It wraps a JavaScript file piped to it within an anonymous function and adds a "use strict"; directive. That way, I can now write my Angular services like this:

angular.module("app").factory("someService", someService);

function someService() {
  // Implementation
}

Plain and simple. Less code, less indentation. Here's what the generated output looks like:

(function () {
  "use strict";

  angular.module("app").factory("someService", someService);

  function someService() {
    // Implementation
  }
})();

Of course, the plugin is in no way tailored to Angular: gulp-iife can be used for any piece of JavaScript code that needs a safety wrapper around it. You can find the package on npm and the code on GitHub. Use it to your heart's content for whatever evil JavaScript plan you're pursuing.

#The Gulpfile

Here's what a simple Gulpfile making use of gulp-iife can look like:

var gulp = require("gulp");
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");
var iife = require("gulp-iife");

gulp.task("scripts", function () {
  return gulp
    .src(["src/client/**/*.js"])
    .pipe(iife())
    .pipe(concat("all.js"))
    .pipe(uglify())
    .pipe(gulp.dest("dist"));
});

The above Gulp task …

1. finds all relevant JavaScript files,
2. wraps them within an IIFE,
3. concatenates all of them together,
4. minifies the concatenated file, and finally
5. writes the minified file to a dist folder.

If you want gulp-iife not to add a "use strict"; directive to the function wrapper for whatever reason, you can pass a settings object to the iife() function:

// ...
.pipe(iife({ useStrict: false }))
// ...

Of course, you could also wrap the resulting concatenated and minified file (rather than every individual file) within an immediately invoked function expression. It all depends on what you need and how you set up the pipe order in your Gulp tasks.

Hope this helps, now go write some code!