在Gruntfile.js中使用grunt-browserify

Question

我在找到如何使用grunt-browserify的解釋時遇到了一些麻煩。 查看他們的examples文件夾，我在他們的基本示例下查看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”，我看過很多其他人，大多數都有自己的數據結構。 是否在任何地方列舉和解釋了這些選項？

Answer 1

根據Grunt配置的慣例 ，“供應商”和“客戶”是targets 。 它們的名稱不是由grunt或grunt-browserify定義的。 您可以根據需要創建任意數量的目標，並為其指定您喜歡的名稱。 每個目標都有files配置，這在大多數Grunt任務中很常見，例如src和dest ，以及options配置，這是特定於插件的。 “dist”是目標的另一個例子，“preBundleCB”是grunt-browserify browserify選項的屬性。

您可以使用grunt browserify:vendor單獨調用目標grunt browserify:vendor和grunt browserify:client 。 並且grunt browserify調用browserify任務的所有目標，在此示例中為“vendor”和“client”。

grunt-browserify的每個目標都會創建一個捆綁的腳本文件。 在此示例中，“vendor”目標創建vendor.js ，其中包含jquery ， moment.js命名為momentWrapper和名為evt events 。 “client”目標創建app.js ，其中包含client/**/*.js momentWrapper及其依賴項，不包括jquery和momentWrapper 。