grunt-watchify

Browserify your code

grunt-watchify

Grunt task for node-browserify.

Getting Started

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

Install this grunt plugin with:

npm install grunt-watchify --save-dev

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

grunt.loadNpmTasks('grunt-watchify');

Common errors

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

Is the srcattribute starting with ./? grunt-watchifyis different from grunt-browserify. It follows the nodejs require.resolve() algorithm.

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

Differences with grunt-browserify

  • grunt-watchifywatchesthe dependencies like watchifyand rebuilds the bundle, when one dependency is modified.

  • grunt-watchifycachesthe dependencies making the rebuild process very fast (useful for big projects).

  • The configuration is different. You have the optionsof browserify plus keepaliveand callback.

  • The instance of browserify is passed to callbackwhere you can use the api of browserify. Remember to return the instance.

  • The keepaliveis useful if you use grunt-watchifyalone. 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 srcmakes difference between processand ./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-watchifybuilds the bundle.jsand watches the dependencies.
  • grunt-contrib-watchwatches the bundle.jsand triggers livereloadwhen it changes.
  • grunt-contrib-connectserves the files.
  • grunt-contrib-livereloadis 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

HomePage

https://github.com/amiorin/grunt-watchify

Repository

https://github.com/amiorin/grunt-watchify


上一篇:grunt-react-templates
下一篇:gruntfile

相关推荐

官方社区

扫码加入 JavaScript 社区