Running tasks automatically
Now that we know how to configure and use Grunt to minify our style sheets, let's turn our attention to task automation, that is, how we can execute our Grunt minification task automatically as soon as we make changes to our source files. To this end, we will learn about a second Grunt package, called grunt-contrib-watch
(https://github.com/gruntjs/grunt-contrib-watch). As with contrib-css-min
, this package can be installed using npm
:
npm install grunt-contrib-watch --save-dev
Open package.json
and verify that grunt-contrib-watch
has been added as a dependency:
{ "name": "MyPhoto", "version": "0.1.0", "devDependencies": { "grunt": "^0.4.5", "grunt-contrib-cssmin": "^0.14.0", "grunt-contrib-watch": "^0.6.1" } }
Next, tell Grunt about our new package by adding grunt.loadNpmTasks('grunt-contrib-watch');
to Gruntfile.js
. Furthermore, we need to define the watch
task by adding a new empty...