Grunt task for node-browserify
JavaScript HTML
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
example
tasks
test
.gitignore
.jshintrc
.npmignore
.travis.yml
AUTHORS
CHANGELOG
Gruntfile.js
LICENSE-MIT
README.md
index.js
package.json

README.md

DEPRECATED

Use https://github.com/jmreidy/grunt-browserify

grunt-watchify Build Status Dependency Status

Grunt task for node-browserify.

Getting Started

This plugin requires Grunt ~0.4.0 and Node >=0.8.x.

Install this grunt plugin with:

npm install grunt-watchify --save-dev

Then add this line to your project's Gruntfile.js Gruntfile:

grunt.loadNpmTasks('grunt-watchify');

Common errors

Running "watchify:source" (watchify) task
Fatal error: module "src/main.js" not found in require()

Is the src attribute starting with ./? grunt-watchify is different from grunt-browserify. It follows the nodejs require.resolve() algorithm.

...
{
  src: './src/main.js'
  ...
}
...

Differences with grunt-browserify

  • grunt-watchify watches the dependencies like watchify and rebuilds the bundle, when one dependency is modified.
  • grunt-watchify caches the dependencies making the rebuild process very fast (useful for big projects).
  • The configuration is different. You have the options of browserify plus keepalive and callback.
  • The instance of browserify is passed to callback where you can use the api of browserify. Remember to return the instance.
  • The keepalive is useful if you use grunt-watchify alone. It works like in grunt-contrib-connect#keepalive.
grunt.initConfig({
  watchify: {
    options: {
      // defaults options used in b.bundle(opts)
      detectGlobals: true,
      insertGlobals: false,
      ignoreMissing: false,
      debug: false,
      standalone: false,

      keepalive: false,
      callback: function(b) {
        // configure the browserify instance here
        b.add();
        b.require();
        b.external();
        b.ignore();
        b.transform();

        // return it
        return b;
      }
    },
    example: {
      src: './src/**/*.js',
      dest: 'app/js/bundle.js'
    }
  }
});
  • The src makes difference between process and ./process:
grunt.initConfig({
  watchify: {
    example: {
      src: ['process', './src/**/*.js'],
      dest: 'app/js/bundle.js'
    },
  }
});

Your project files usually start with ./.

  • You can use the glob only with your project files and not for the modules in node_modules.

Examples

You find this example in the directory example.

  • grunt-watchify builds the bundle.js and watches the dependencies.
  • grunt-contrib-watch watches the bundle.js and triggers livereload when it changes.
  • grunt-contrib-connect serves the files.
  • grunt-contrib-livereload is used only for the livereload snippet.
/*
 * grunt-watchify
 * http://github.com/amiorin/grunt-watchify
 *
 * Copyright (c) 2013 Alberto Miorin, contributors
 * Licensed under the MIT license.
 */

'use strict';

var path = require('path');

var lrSnippet  = require('grunt-contrib-livereload/lib/utils').livereloadSnippet;
var mountFolder = function(connect, dir) {
  return connect.static(path.resolve(dir));
};

module.exports = function(grunt) {
  grunt.initConfig({

    watchify: {
      example: {
        src: './src/**/*.js',
        dest: 'app/js/bundle.js'
      },
    },

    watch: {
      app: {
        files: 'app/js/bundle.js',
        options: {
          livereload: true
        }
      }
    },

    connect: {
      options: {
        port: 9000,
        // Change this to '0.0.0.0' to access the server from outside.
        hostname: 'localhost'
      },
      livereload: {
        options: {
          middleware: function (connect) {
            return [
              lrSnippet,
              mountFolder(connect, 'app')
            ];
          }
        }
      }
    }
  });

  grunt.loadTasks('../tasks');

  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-connect');
  grunt.loadNpmTasks('grunt-contrib-livereload');

  grunt.registerTask('default', ['watchify', 'connect', 'watch']);
};

How can you start grunt:

# with other tasks like connect and watch
# done() is called
grunt

# alone like watchify
# done() is *never* called
grunt watchify:example:keepalive

Credits

Bitdeli Badge