CODEWITHSUNDEEP
javascriptnode.jsgruntjsbrowserify
Shane
Shane

Reputation: 5151

using grunt-browserify in Gruntfile.js

I'm having some trouble finding an explanation for how to use grunt-browserify. Looking in their examples folder, I'm looking under the browserify node under their basic example and I see the following:

module.exports = function (grunt) {
  grunt.initConfig({
    browserify: {
      vendor: {
        src: [],
        dest: 'public/vendor.js',
        options: {
          require: ['jquery'],
          alias: [
            './lib/moments.js:momentWrapper', //can alias file names
            'events:evt' //can alias modules
          ]
        }
      },
      client: {
        src: ['client/**/*.js'],
        dest: 'public/app.js',
        options: {
          external: ['jquery', 'momentWrapper'],
        }
      }
    },
    concat: {
      'public/main.js': ['public/vendor.js', 'public/app.js']
    }
  });
  grunt.loadTasks('../../tasks');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.registerTask('default', ['browserify', 'concat']);
};

What are "vendor" and "client" and where are they documented? In the README file, they mention "preBundleCB", "dist" and I've seen quite a few others, and most have their own data structures. Are these options enumerated and explained anywhere?

Upvotes: 6

Views: 4428

Answers (1)

Shuhei Kagawa
Shuhei Kagawa

Reputation: 4777

According to the convention of Grunt configuration, "vendor" and "client" are targets. Their names are not defined by grunt or grunt-browserify. You can create as many targets as you want and give them the names you like. Each target has files configuration, which is common in most of Grunt tasks, such as src and dest, and options configuration, which is plugin specific. "dist" is another example of targets and "preBundleCB" is a property of grunt-browserify's options.

You can individually invoke the targets with grunt browserify:vendor and grunt browserify:client. And grunt browserify invokes all targets of browserify task, which are "vendor" and "client" in this example.

Each target of grunt-browserify creates a bundled script file. In this example, "vendor" target creates vendor.js that contains jquery, moment.js named momentWrapper and events named evt. "client" target creates app.js that contains client/**/*.js and their dependencies excluding jquery and momentWrapper.

Upvotes: 12

Related Questions