Join Morten Rand-Hendriksen for an in-depth discussion in this video Creating a Gruntfile with a watch task, part of WordPress: Developing with Sass and Grunt.js.
- View Offline
- With the package file configured…and my node modules in place,…I'm now ready to setup the Gruntfile.…This is the file that will tell Grunt…what to do and in what order.…And this is where we configure…all the different tasks that are gonna be run.…Now, you saw an example Gruntfile in the previous chapter.…And the one we're gonna build now is not all that different.…It's just much bigger, cause we're gonna…setup more tasks and do more advanced things.…But it's based on the exact same principle.…So first, I'm gonna create the file itself.…So I'll right click on the folder name,…create a new file, and I'm gonna…call this file Gruntfile.js.…
Notice the capitalized G here.…Once I've created my Gruntfile,…I'll scroll back up again so you can see what's going on,…here's the Gruntfile, from here I'm gonna…setup the Gruntfile itself.…And I'll do this manually so you…can see exactly what's happening.…At the very top, I'll put in…module.exports = function(grunt)…Add a curly bracket and then I'll…end my curly bracket down here.…
Note: This course doesn't teach Sass itself. To learn more about the language, watch CSS with LESS and Sass.
- Setting up your development environment
- Installing Node.js, Ruby, Grunt, and Sass
- Setting up Grunt and Sass on Mac and Windows
- Adding support to Grunt, Sass, Watch, and Autoprefixer in WordPress
- Building custom themes with _s and Sass