I’m still getting a handle on Grunt. As far as a build tool, I’ve not yet been able to wrap my head completely around it.
Maybe I need a better tutorial, or maybe I just need to not get hung up on any task runner that isn’t working right (looking at you, livereload!).
I’ll get it figured out. I usually do:-).
Until then, I wanted to make some notes about what I’d see so far, and what I’ve done. I had some help from the Grunt documentation, as well as some good tutorials. This isn’t a tutorial, just some notes. If you’re looking for how-tos, follow the links…
Installing Grunt and Extras
So, for anyone who’s new, you’ll want to install Grunt globally and on a per-project basis. The global install gets you the Grunt command line interface (cli) (which is npm install -g grunt-cli), and then grunt installation per project allows you to run the tasks you (or someone else!) has set up. Pretty sweet that someone can compile a whole set of tasks for you to run, and all you have to do is npm install and then run grunt.
Nice.
Installing Grunt Plugins
Like WordPress plugins, it’s easy to get a little trigger happy with plugins. They let you do extra tasks you couldn’t before and it’s just a command away.
Whenever installing Grunt plugins to the project, you want to make sure to post fix --save-dev to the end of the install command. This will keep all of the plugins listed in the dev dependencies section of your package.json file.
Here are some plugins I’ve installed and have been trying to get to work (with more success than not):
npm install grunt-contrib-sass --save-dev //installs Sass compiler npm install grunt-contrib-watch --save-dev //installs the watch which, yes, watches for changes in specified files. npm install grunt-autoprefixer --save-dev //install the autoprefixers for different browsers so you don't have to worry about prefixing in CSS npm install grunt-reload //installs the live reload, or at least is supposed to... npm install grunt-contrib-connect --save-dev //install the companion for live reload, which I can't get to work... yet! npm install grunt-contrib-concat --save-dev //install the ability to concatenate files, like javascript and CSS files, into one massive file.
These are just a few of the thousands of plugins available for Grunt.
Configuring All the Tasks
This is where the waters start to get a little murky for me. That’s ok, for now. I’ve mostly been copying, pasting, editing and testing the provided scripts (see this one for an example). I basically look at how the example is using the code, try to understand it, copy it in, and customize it to work for what I’m trying to do.
Nice way to hack at Grunt, right?
Maybe.
Currently, I’m not able to do all of the tasks I’ve installed, and I’m not sure why. The two big things are:
- Compiling Bootstrap Sass in CSS
- Running the livereload task
I literally have spent two hours tweaking things with no idea why things won’t compile or live reload. They’re not huge deals. I can always just copy the most recent bootstrap.css file and enqueue it, but the point is to use Grunt (and Bower).
And live reload isn’t necessary, but it would just be nice.
Here’s what I’ve got so far in my Gruntfile.js. It runs with no errors, but doesn’t do everything I want it to (yet!):
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
/**
* Sass
*/
sass: {
dev: {
options: {
style: 'expanded',
sourcemap: 'none',
},
files: {
'style-human-readable.css': 'sass/style.scss',
// 'bootsasscompiled.css': '**/vendor/boostrap-sass/assets/stylesheets/_bootstrap.scss'
}
},
dist: {
options: {
style: 'compressed',
sourcemap: 'none',
},
files: {
'style.css': 'sass/style.scss'
}
}
},
concat : {
options: {
separator: '\n\n//------------------------------------------\n',
banner: '\n\n//------------------------------------------\n'
},
dist : {
src: ['js/*.js'],
dest: 'concatjs.js'
},
dev: {
src: [],
dest: 'bootconcat.css'
}
}, //concat
/**
* autoprefixer
*/
autoprefixer: {
options: {
browsers: ['last 2 versions']
},
multiple_files: {
expand: true,
flatten: true,
src: 'compiled/*.css',
dest: ''
}
},
/**
* Watch
*/
watch: {
options: {
livereload: true,
},
css: {
files: '**/*.scss',
tasks: ['sass','autoprefixer']
}
},
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.registerTask('default',['concat', 'sass', 'watch']);
}
Conclusion
I’m excited about Grunt, because it opens me up to using Sass (or LESS), compiling it all to CSS, keeping my production files to a minimum (and minified!), and allows me to use the tools real developers use.
Now, I’ve just gotta fix some tasks…
Peace,
Nate