View Grunt.js Browser

Question

I am new to Grunt.js .

So far i have run

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

every time you save a file.

Now I am trying to automate this process using the Grunt clock (0.4.2).

What is the right way to do this? Thanks.

Answer 1

I set up a view task with grunt-contrib-watch , which starts building the browser using grunt-browserify when the source files change.

To put it into action, here is an example of 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'); }; 

Now you can simply use it to view the changes by calling:

 grunt watch 

Note that you need to have a grunt along with grunt-contrib-watch and grunt-browserify .

---

Alternatively, you can use Gulp instead of Grunt. A similar result can be achieved with gulp-browserify along with gulp-watch with a less detailed build file and some potential winnings.

Answer 2

I may be late, but I am using the browser with grunt through grunt-browserify . It has a very convenient watch: true option, which uses watchify instead of the browser and speeds up most of the task.

My Gruntfile.js looks like this:

 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']); 

Of course, I had to install watchify with npm before.