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 Uglifyexternal link  ….

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 TinyPNGexternal link 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 Newerexternal link 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: *
 }
}