If you’re new to Grunt, or don’t know what it is, check out the first article I wrote which introduces it: Using GRUNT to automate development tasks: Part I
watch, we can get Grunt to run tasks whenever something changes instead. So, for example, every time we update our JS, Grunt will automatically concatenate and minify it to an output file instead of waiting for us to run the file manually.
Watching happens through the official
Let’s get this installed as we have done in our previous post (it’s exactly the same process) –
npm install grunt-contrib-watch--save-dev.
watch by giving it specific file, or folder (or both) to monitor, then we tell it what tasks we want to run when it detects a change.
So, let’s take a look. I think it would be safe to say that we’d like Grunt to concatinate and minify our JS whenever anything in the
js folder changes – not just when we run it; and not when we change some images or CSS.
tasks: ['concat', 'uglify'],
This should be fairly straight forward.
spawn stops Grunt spawning child processes and keeps the context within the main
Don’t forget to load the NPM Task, and also to register the task.
grunt.registerTask('default', ['concat', 'uglify', 'imagemin', 'cssmin', 'watch']);
There are a lot of other resources and extensions around Grunt. So, some further reading: