Browserify由Grunt.js手表

我是Grunt.js的新手 。

到现在为止，我一直在跑

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

在每个文件更改保存。

现在，我试图用Grunt（0.4.2）手表自动化这个过程。

什么是适当的方式来做到这一点？ 谢谢。

Answer 1

我会用grunt-contrib-watch设置watch任务，当源文件改变时，通过grunt-browserify启动browserify build。

要实施它，下面是一个示例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可以实现类似的结果，而不需要冗长的构build文件和一些潜在的性能增益。

Answer 2

也许我迟到了，但我通过grunt-browserify使用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。