Grunt: Recipe Browserify (and ES6) - fevrcoding/wok GitHub Wiki

This recipe will guide you to setup browserify in Wok workflow.
Since browserify generates inline sourcemaps, we'll use exorcise to move them to external files.

Finally, you may include ES6 support by using babel and babelify

Note: right now watch mode might not work. See this issue for details

##Installation and Requirements

Install grunt-browserify and grunt-exorcise plugin:

npm install grunt-browserify grunt-exorcise --save-dev

##Task Configuration

1. Create a browserify.js file in build/grunt-tasks and paste the following boilerplate code:

/*jshint node:true */
module.exports = {
    dev: {
        options: {

            alias: [],

            browserifyOptions: {
                //build sourcemaps
                debug: true
            },
            //delegate to watchify
            watch: true
        },
        files: [
            {
                expand: true,
                cwd: '<%= paths.src.assets %>/',
                src: '<%= paths.js %>/*.js',
                dest: '<%= paths.dist.assets %>'
            }
        ]
    },
    dist: {
        options: {
            browserifyOptions: {
                debug: false
            }
        },
        files: '<%= browserify.dev.files %>'
    }
};

2. Create a exorcise.js file in build/grunt-tasks and paste the following boilerplate code:

/*jshint node:true */
module.exports = {
    dev: {
        options: {},
        files: [
            {
                expand: true,
                cwd: '<%= paths.dist.assets %>/',
                src: '<%= paths.js %>/*.js',
                dest: '<%= paths.dist.assets %>',
                ext: '.js.map'
            }
        ]
    }
};

3. Comment or delete js sub-task in build/grunt-tasks/copy.js and build/grunt-tasks/watch.js

4. Edit build/grunt-tasks/aliases.yml. Add the development tasks to the dev list just after the copy task

dev:
  ...
  - browserify:dev
  - exorcise

Then add the production sub-task to the dist list just after the copy task

dist:
  ...
  - browserify:dist

5. Enjoy

Optional: add ES6 Support (babel)

1. install babelify

npm install babelify --save-dev

2. add a global task's options with the following properties in build/grunt-tasks/browserify.js

/*jshint node:true */
module.exports = {

    options: {
        require: ['babelify/polyfill'],

        transform: [
            ['babelify', {
                optional: ['strict'],
                loose: [
                    'es6.arrowFunctions',
                    'es6.blockScoping',
                    'es6.classes',
                    'es6.constants',
                    'es6.forOf',
                    'es6.modules',
                    'es6.parameters',
                    'es6.properties.computed',
                    'es6.properties.shorthand',
                    'es6.tailCall',
                    'es6.templateLiterals',
                    'es6.regex.unicode',
                    'es6.regex.sticky'
                ]
            }]
        ],
    },

    dev: {
        //...
    }, 

    dist: {
        //...
    },
};