At the end of my last post about Grunt I mentioned that I will be adding code to concatenate the javascript, compress the images and also tidy the code up abit. I have now done this ….
Javascript
I moved all of the javascript to a folder called _js and then set up the following ….
js: { src: [ ‘_js/jquery.min.js’, ‘_js/jquery.plugin.min.js’, ‘js/bootstrap.min.js’, ‘_js/jquery.flexslider-min.js’, ‘_js/smooth-scroll.min.js’,’ _js/skrollr.min.js’, ‘_js/twitterFetcher_v10_min.js’, ‘_js/spectragram.min.js’, ‘_js/scrollReveal.min.js’, ‘_js/isotope.min.js’, ‘_js/lightbox.min.js’, ‘_js/jquery.countdown.min.js’, ‘_js/scripts.js’ ], dest: ‘js/main.js’ }
As you can see I am having to merge the javascript in a certain order, I tried using src: [‘_js/*’] but this broke a lot of the site.
Now I have all of the javascript in a single file which works I can compress it using Uglify ….
uglify: { options: { banner: ‘/*! <%= pkg.name %> <%= grunt.template.today(“dd-mm-yyyy”) %> */n’ }, my_target: { files: { ‘js/main.min.js’: [‘js/main.js’] } } },
I then created a task to put it all together ….
grunt.registerTask(‘js’, [‘concat:js’, ‘uglify’]);
as well as adding the _js and tasks to the watch section of my Gruntfile.js.
Images
I use the TinyPNG Photoshop plug-in to export the headers and other images so most of the graphics on the site are already quite compressed, however to ensure that everything is as optimised as possible I added the following ….
imgcompress: { dist: { options: { optimizationLevel: 7, progressive: true }, files: [{ expand: true, cwd: ‘img/’, src: ‘{,*/}*.{png,jpg,jpeg}’, dest: ‘img/’ }] } }, svgmin: { dist: { files: [{ expand: true, cwd: ‘img/’, src: ‘{,*/}*.svg’, dest: ‘img/’ }] } },
as the site has a lot of image files Newer was used to files are only processed if they have been changed or haven’t been processed. I added the following task ….
grunt.registerTask(‘images’, [‘newer:imgcompress’, ‘newer:svgmin’]);
However, for the moment I have left it out of the watch list as it can take a little while to execute.
Full files
This now means my Gruntfile.js looks like ….
module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON(‘package.json’),
less: { development: { options: { compress: true, yuicompress: true, optimization: 2 }, files: { “_css/main.css”: “_less/main.less” } } }, concat: { css: { src: [ ‘_css/*’ ], dest: ‘css/main.css’ }, js: { src: [ ‘_js/jquery.min.js’, ‘_js/jquery.plugin.min.js’, ‘js/bootstrap.min.js’, ‘_js/jquery.flexslider-min.js’, ‘_js/smooth-scroll.min.js’,’ _js/skrollr.min.js’, ‘_js/twitterFetcher_v10_min.js’, ‘_js/spectragram.min.js’, ‘_js/scrollReveal.min.js’, ‘_js/isotope.min.js’, ‘_js/lightbox.min.js’, ‘_js/jquery.countdown.min.js’, ‘_js/scripts.js’ ], dest: ‘js/main.js’ } }, cssmin: { css: { src: ‘css/main.css’, dest: ‘css/main.min.css’ } }, uglify: { options: { banner: ‘/*! <%= pkg.name %> <%= grunt.template.today(“dd-mm-yyyy”) %> */n’ }, my_target: { files: { ‘js/main.min.js’: [‘js/main.js’] } } }, jekyll: { options: { src: ‘.’ }, dist: { options: { dest: ‘./_site’, config: ‘_config-dev.yml’ } } }, imgcompress: { dist: { options: { optimizationLevel: 7, progressive: true }, files: [{ expand: true, cwd: ‘img/’, src: ‘{,*/}*.{png,jpg,jpeg}’, dest: ‘img/’ }] } }, svgmin: { dist: { files: [{ expand: true, cwd: ‘img/’, src: ‘{,*/}*.svg’, dest: ‘img/’ }] } }, watch: { options: { livereload: true, }, css: { files: [‘_css/*’, ‘_less/*’], tasks: [‘less’, ‘concat:css’, ‘cssmin:css’, ‘jekyll’] }, js: { files: [‘_js/*’], tasks: [‘concat:js’, ‘uglify’, ‘jekyll’] }, html: { files: [‘*.html’, ‘_includes/*.html’, ‘_layouts/*.html’, ‘_posts/*’, ‘*.yml’, ‘img/*’], tasks: [‘jekyll’], options: { spawn: false, } } }, connect: { server: { options: { port: 8000, base: ‘./_site’ } } },
}); require(‘load-grunt-tasks’)(grunt); grunt.registerTask(‘default’, [‘concat:js’, ‘uglify’, ‘less’, ‘concat:css’, ‘cssmin:css’, ‘jekyll’, ‘connect’, ‘watch’]); grunt.registerTask(‘css’, [‘less’, ‘concat:css’, ‘cssmin:css’]); grunt.registerTask(‘js’, [‘concat:js’, ‘uglify’]); grunt.registerTask(‘server’, [‘connect’, ‘watch’]); grunt.registerTask(‘images’, [‘newer:imgcompress’, ‘newer:svgmin’]); };
And the package.json
file ….
{ “name”: “mediaglasses”, “version”: “0.0.1”, “description”: “The Media Glasses Jekyll site”, “author”: “Russ McKendrick <russ@mckendrick.io>”, “homepage”: “http://media-glass.es/", “license”: “”, “devDependencies”: { “grunt”: “~0.4.5”, “grunt-contrib-concat”: “*”, “grunt-contrib-cssmin” : “*”, “grunt-contrib-watch” : “*”, “grunt-contrib-less”: “*”, “grunt-jekyll”: “*”, “grunt-contrib-connect”: “*”, “grunt-contrib-uglify”: “*”, “grunt-contrib-imagemin”: “*”, “grunt-svgmin”: “*”, “grunt-imgcompress”: “*”, “grunt-newer”: “*”, “load-grunt-tasks”: “*” } }