I have recently been writing about my website refactor (see Part 1 here and Part 2 here) and now I have come to the end of the exercise I am just tidying up my build process - and I'm going to tell you about it in this post.
When we last looked at my Grunt file, it wasn't looking too shabby - it was compiling my SCSS files and watching for changes, and I had a nice OS X notification appearing whenever the tasks were successful or failing (take a look here). Today, I wanted to improve my build process further by implementing the following changes:
- Automatically load any Grunt tasks to remove the need for "grunt.loadNpmTasks('');"
- Concatenate the CSS files in the CSS folder
- Minify the final CSS file used on the site
src: ['css/1.css', 'css/2.css', 'css/3.css'],
This would concatenate 1.css, 2.css and 3.css (three makeshift files I created) into a file called 123.css. Again, it didn't work. So I removed the Sass task and kept the rest and tried again - but still no luck. Then I put back the Sass task and removed the Watch task. Bingo! My files were concatenating! So for some reason the Watch task was stopping the concatenation. I then added a minification configuration using grunt-contrib-cssmin which was pretty simple, and added a "clean" task so that my final "tn.css" or "tn.min.css" would be deleted and recompiled accordingly. At this point I created two Grunt tasks; one for developing (which included the Watch task) and one for building (which did not, and included concatenation and minification):
grunt.registerTask('develop', ['clean', 'sass', 'watch', 'notify_hooks']);
grunt.registerTask('build', ['clean', 'sass', 'concat:css', 'cssmin', 'notify_hooks']);
In hindsight it made more sense to do this anyway as I don't need to watch my files when I have deployed my final files. I also don't need to concatenate and minify my files during development.
Finally, I modified my Grunt file slightly so that all Grunt tasks are loaded in automatically (using load-grunt-tasks).
I have created a repository for my Grunt file, called basic-grunt-toolkit. I will be improving it over time and I am also planning an advanced Grunt file as well which will utilise Bower along with some other useful Grunt plugins. I hope you find these resources useful - please feel free to fork and use them for your own projects!