Question

我是Grunt.js的新手。

到现在为止，我一直在运行

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

每个文件都保存更改。

现在，我正在尝试使用Grunt（0.4.2）手表自动完成此过程。

这样做的正确方法是什么？感谢。

Answer 1

也许我迟到了，但我通过grunt-browserify使用了浏览器grunt。它有一个非常方便的选项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的监视任务，当源文件发生变化时，会通过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以及grunt-contrib-watch和grunt-browserify。

或者你可以考虑使用Gulp而不是Grunt。使用gulp-browserify和gulp-watch以及更简洁的构建文件和一些潜在的性能提升，可以实现类似的结果。

Browserify by Grunt.js观看

2 个答案: