More Grunt & Jekyll

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”: “*”
 }
}

More Grunt & Jekyll

Javascript

Images

Full files

More site updates

Git + Rebase