With Grunt you can automate core tasks for your AngularJS project. In this lesson we will take a look at converting Stylus files to CSS, and add a watch task to convert those files automatically whenever a change is detected.

Development Automation Tasks with Grunt

Lecturer: [00:01] Let's go ahead and set up some Grunt tasks to make the development cycle a little bit easier. We're going to install two plug-ins to help us out.

[00:08] The Grunt Stylus plug-in that will compile our stylus files and then the Watch plug-in that watch for changes in our style files and build them into CSS automatically.

[00:18] From your terminal type, "Npm install grunt-contrib-stylus," and use the "--save-dev" flag.

[00:25] Now let's install the Watch plug-in by typing "Npm install grunt-contrib-watch," again using the "--save-dev" flag.

[00:33] Now that we've added these to our project we need to load them into our Grunt file by using the "grunt.loadNpmTasks" API.

[00:40] [pause]

Lecturer: [00:48] Now we're done with the installation. Let's go ahead and set it up. Let's start by creating our stylus task. We don't have any style files so let's go ahead and create one. Let's create a style directory and add an app.style to it.

[01:00] We know that our app.style is going to compile into app.css so let's go ahead and reference app.css in our HTML page.

[01:07] [pause]

[01:12] Now that we have our style file and we've loaded the Stylus plug-in, let's go ahead and add it to our NIC config in our Grunt file.

[01:19] Let's add a section called "Stylus" with a compile target inside of it. Each target can have options but we're going to pass the compress option set defaults so that it doesn't minify our CSS during this demo.

[01:31] In the files configuration, we're going to point at our app.style and tell it to build it into app.CSS.

[01:39] Now from the command line all we have to do is run Grunt.stylus and it knows what to do in order to compile our stylus into CSS.

[01:47] Let's go ahead and add some styles and we'll reload the page and watch it happen.

[01:51] [pause]

Lecturer: [02:02] This is cool, but it would be better if we added Watch to it so that any time we make a change it automatically runs the Grunt-stylus for us. Let's go ahead and configure our Watch task.

[02:12] Add a watch parameter to our NIC config and let's give it a target called "Stylus." All the configuration for our Stylus build will go inside this Stylus target.

[02:22] Let's add a files array that includes a pattern that will match our app.style. We'll also provide a tasks array that's a list of tasks we want it to run any time a style file is changed.

[02:34] For us, we're going to have it run the Stylus compile task that we just set up in the last step. In the terminal, let's go ahead and run Grunt Watch and you'll notice any time I make changes to the app.style it instantly builds a new app.css file.

[02:50] We can go ahead and reload the browser and it will pick up those changes that we're making. However, Grunt gives us another feature that's very, very cool. We can add a new target that will watch for any changes to our CSS files.

[03:04] If we give that target a live reload option and set it to true it will automatically fire off a reload event any time a CSS file is changed. We can teach our page to react to that live reload event by adding a small script tag to our page.

[03:19] You can find the script tag over on the Grunt Watch GitHub page.

[03:23] At this point, if we restart our Watch task and we reload our page the page should be listening for changes. Any time I change a style file it will create new CSS and any time a new CSS file is created the page will instantly reload.

[03:38] Now that we have a Watch task for CSS, let's go ahead and create one for HTML files and for our JavaScript files. That way any of the files we edit as part of our development process will fire off a live reload event and our browser will reload.

[03:51] [pause]

Lecturer: [04:07] From now on, as we sit down to develop, we can simply type, "Grunt Watch" in the terminal and it will take care of all these development tasks. The remaining videos in this series will not talk about development tasks. We're only going to focus on build tasks from here on out.

Development Automation Tasks with Grunt

Share this video with your friends