Browserify by Grunt.js觀看

Question

我是Grunt.js的新手 。

直到現在，我一直在跑步

browserify ./js/app.js -o ./js/app.bundle.js

每個更改保存的文件。

現在，我正在嘗試使用Grunt（0.4.2）手表使此過程自動化。

這樣做的正確方法是什么？ 謝謝。

Answer 1

也許我來晚了，但是我通過grunt-browserify在grunt上使用grunt-browserify 。 它有一個非常方便的選項watch: true ，它使用watchify而不是browserify並在很大程度上加快了工作速度。

我的Gruntfile.js看起來像：

browserify: {
  dev: {
    src: ['./lib/app.js'],
    dest: 'build/bundle.<%= pkg.name %>.js',
    options: {
      transform: ['reactify'],
      watch: true
    }
   }
}

grunt.loadNpmTasks('grunt-browserify');
grunt.registerTask('dev', ['browserify:dev']);

當然，我之前必須使用npm安裝watchify。

Answer 2

我將使用grunt-contrib-watch設置watch任務，當源文件更改時，該任務通過grunt-browserify啟動browserify構建。

為了付諸實踐，這是一個示例Gruntfile.js：

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    watch: {
      files: ['app/app.js'],
      tasks: ['browserify']
    },
    browserify: {
      dist: {
        files: {
          'app/app.bundle.js': ['app/app.js'],
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-browserify');
};

現在，您可以通過調用以下命令使用它來監視更改：

grunt watch

請注意，您需要同時安裝grunt-contrib-watch和grunt-browserify 。

---

另外，您可以考慮使用Gulp代替Grunt。 使用gulp-browserify和gulp-watch可以實現類似的結果，生成文件的詳細程度較低，並且可能會獲得一些性能提升。