在Gruntfile.js中使用grunt-browserify

时间:2014-12-30 21:37:52

标签: javascript node.js gruntjs browserify

我在找到如何使用grunt-browserify的解释时遇到了一些麻烦。查看他们的示例文件夹,我在其基本示例下查看browserify节点,我看到以下内容:

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']);
};

什么是"供应商"和"客户"他们在哪里记录?在README文件中,他们提到" preBundleCB"," dist"而且我见过很多其他人,而且大多数都有自己的数据结构。是否在任何地方列举和解释了这些选项?

1 个答案:

答案 0 :(得分:10)

根据the convention of Grunt configuration,“供应商”和“客户”均为targets。它们的名称不是由grunt或grunt-browserify定义的。您可以根据需要创建任意数量的目标,并为其指定您喜欢的名称。每个目标都有files配置,这在大多数Grunt任务中很常见,例如srcdest以及options配置,这是特定于插件的。 “dist”是目标的另一个例子,“preBundleCB”是grunt-browserify选项的属性。

您可以使用grunt browserify:vendorgrunt browserify:client单独调用目标。 grunt browserify调用browserify任务的所有目标,在此示例中为“vendor”和“client”。

grunt-browserify的每个目标都会创建一个捆绑的脚本文件。在此示例中,“供应商”目标创建vendor.js,其中包含名为jquery的{​​{1}},moment.js和名为momentWrapper的{​​{1}}。 “客户”目标会创建包含events的{​​{1}}及其依赖项,不包括evtapp.js