Browserify by Grunt.js观看

Question

我是Grunt.js的新手.

直到现在,我一直在跑步

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

在每个文件上保存更改.

现在,我正试图用Grunt(0.4.2)手表自动化这个过程.

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

Answer 1

也许我迟到了,但我正在使用浏览器和grunt via 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安装grunt .

或者你可以考虑使用Gulp而不是Grunt.使用gulp-browserify和gulp-watch可以实现类似的结果,同时使用较少的详细构建文件和一些潜在的性能提升.