Refactoring My Website - Part 3

Happy new year! I hope you have enjoyed all your celebrations in the last couple of weeks.

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

First I wanted to make sure I could concatenate my CSS files. I was quite surprised at how much trouble I had with this. I thought I could just use grunt-contrib-concat (spoiler: I did in the end) but whenever I ran my Grunt task, it just wasn't concatenating my files. I was running the Sass and Watch tasks as well so I removed them and just ran the "concat" task, which worked. So after a lot of cutting, pasting, searching on Google, trouble-shooting and starting again, I decided to try a test "concat" task alongside all of my other tasks:

concat: {
  css: {
    src: ['css/1.css', 'css/2.css', 'css/3.css'],
    dest: 'css/123.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!