Added support for lazy loading

README.md

@@ -5,6 +5,8 @@
 [![Dependencies](https://david-dm.org/hollandben/grunt-cache-bust.svg)](https://david-dm.org/hollandben/grunt-cache-bust.svg)
 [![devDependency Status](https://david-dm.org/alanshaw/david/dev-status.svg?style=flat)](https://david-dm.org/alanshaw/david#info=devDependencies)
 
+#### `v1.0.0` is currently in development and has breaking changes. You can read more about the changes in #147. The more people who try the branch, the quicker I can get it released. Thanks :)
+
 > Bust static assets from the cache using content hashing
 
 * [Getting Started](#getting-started)
@@ -13,6 +15,7 @@
 * [Options](#options)
 * [Usage Examples](#usage-examples)
 * [CDNs](#cdns)
+* [Lazy Loading](#lazy-loading)
 * [Change Log](#change-log)
 
 ## Getting Started
@@ -189,7 +192,7 @@ Type: `Boolean|String`
 
 Default value: `false`
 
-When set as `true`, `cachbust` will create a json file with an object inside that contains key value pairs of the original file name, and the renamed md5 hash name for each file.
+When set as `true`, `cachebust` will create a json file with an object inside that contains key value pairs of the original file name, and the renamed md5 hash name for each file.
 
 The default output file will be named `grunt-cache-bust.json` and is relative to the root of the project, or the `baseDir` option if set.
 
@@ -301,8 +304,25 @@ Remote URLs for CSS, JavaScript, and images are ignored by cacheBust. This assum
 <img src="https://secure.gravatar.com/avatar/d3b2094f1b3386e660bb737e797f5dcc?s=420" alt="test" />
 ```
 
+### Lazy loading
+
+This plugin also supports lazy loading approach. For using this with any 'lazy loading' implementation, use class 'lazy' and 'data-original' for storing the original url.
+
+Example,
+
+[This](http://www.appelsiini.net/projects/lazyload) plugin works well.
+
 ### Change Log
 
+**v0.6.1**
+* Support cache busting for meta tags
+* Support cache busting for all favicons
+
+**v0.6.0**
+* Support cache busting for video tag
+* Fix CSS processing for media queries with comments
+* Use passed in grunt when registering
+
 **v0.5.1**
 * Reading files to be hashed as a buffer rather than string
 

config/metas.js

@@ -0,0 +1,10 @@
+module.exports = {
+    options: {
+        baseDir: 'tmp/metas'
+    },
+    files: [{
+        expand: true,
+        cwd: 'tmp/metas/',
+        src: ['*.html']
+    }]
+};

config/videos.js

@@ -0,0 +1,10 @@
+module.exports = {
+    options: {
+        baseDir: 'tmp/videos'
+    },
+    files: [{
+        expand: true,
+        cwd: 'tmp/videos/',
+        src: ['*.html']
+    }]
+};

package.json

@@ -1,7 +1,9 @@
 {
   "name": "grunt-cache-bust",
   "description": "Bust static assets from the cache using content hashing",
-  "version": "0.5.1",
+  "branchVersion": "^0.6.1",
+  "branchPattern": "0.6.*",
+  "distTag": "latest",
   "author": "Ben Holland <[email protected]>",
   "repository": {
     "type": "git",
@@ -20,19 +22,19 @@
     "test": "grunt test"
   },
   "devDependencies": {
-    "grunt-contrib-clean": "~0.6.0",
-    "grunt-contrib-copy": "~0.8.0",
-    "grunt-contrib-jshint": "~0.11.0",
-    "grunt-contrib-nodeunit": "~0.4.1",
-    "grunt-contrib-watch": "~0.6.1"
+    "grunt-contrib-clean": "^0.7.0",
+    "grunt-contrib-copy": "^0.8.0",
+    "grunt-contrib-jshint": "^0.11.0",
+    "grunt-contrib-nodeunit": "^0.4.1",
+    "grunt-contrib-watch": "^0.6.1"
   },
   "peerDependencies": {
-    "grunt": "~0.4.5"
+    "grunt": "^0.4.5"
   },
   "dependencies": {
-    "cheerio": "~0.18.0",
-    "css": "~2.2.0",
-    "flatten": "~0.0.1",
+    "cheerio": "^0.18.0",
+    "css": "^2.2.0",
+    "flatten": "^0.0.1",
     "path-is-absolute": "^1.0.0"
   },
   "keywords": [

tasks/cachebust.js

@@ -35,7 +35,7 @@ var removeIgnoredPatterns = function(parsedUrl) {
     return true;
 };
 
-module.exports = function() {
+module.exports = function(grunt) {
     grunt.registerMultiTask('cacheBust', 'Bust static assets from the cache using content hashing', function() {
         opts = this.options(require('./lib/defaultOptions'));
 

tasks/lib/defaultFilters.js

@@ -5,9 +5,23 @@ module.exports = {
     'link[rel="stylesheet"]': function() {
         return this.attribs['href'];
     },
+    'meta[property]': function() {
+        return this.attribs.content;
+    },
+    'div': function() {
+        if(this.attribs['class']&&(this.attribs['class'].indexOf(' lazy') >= 0 )){
+            return this.attribs['data-original'];
+        }else{
+            return false;
+        }
+    },
     'img': [
         function() {
-            return this.attribs.src;
+            if(this.attribs['class']&&(this.attribs['class'].indexOf(' lazy') >= 0 )){
+                return this.attribs['data-original'];
+            }else{
+                return this.attribs.src;
+            }
         },
         function() {
             var srcset = this.attribs.srcset;
@@ -21,7 +35,17 @@ module.exports = {
             });
         }
     ],
-    'link[rel="icon"], link[rel="shortcut icon"]': function() {
+    'video': function() {
+        return this.attribs['src'];
+    },
+    // Video source tag e.g. <video><source src="video.mp4" type="video/mp4" /></video>
+    'source' : function() {
+        if (this.attribs.type && this.attribs.type.indexOf("video") === 0 ){
+            return this.attribs.src;
+        }
+        return undefined;
+    },
+    'link[rel*="icon"]': function() {
         return this.attribs.href;
     },
     'script[type="text/template"]': function() {},

tasks/lib/processCssFile.js

@@ -32,7 +32,10 @@ module.exports = function(data) {
     // Loop through each stylesheet rules
     cssObj.stylesheet.rules.forEach(function(rule) {
         var mediaQueryDeclarations = rule.type !== 'media' ? [] : rule.rules.reduce(function(acc, rule) {
-            return acc.concat(rule.declarations);
+            if (rule.declarations) {
+                return acc.concat(rule.declarations);
+            }
+            return acc;
         }, []);
 
         var declarations = (rule.declarations || []).concat(mediaQueryDeclarations);

tasks/lib/utils.js

@@ -68,6 +68,14 @@ module.exports = {
             filePath = element.attribs.href;
         }
 
+        if (element.attribs.content) {
+            filePath = element.attribs.content;
+        }
+
+        if(element.attribs.class && (element.attribs.class.indexOf(' lazy') >= 0 )){
+            filePath = element.attribs['data-original'];
+        }
+
         return filePath ? this.checkIfValidFile(url.parse(filePath), cdnPath) : false;
     },
 

tests/metas/metas.html

@@ -0,0 +1,3 @@
+<meta property="og:image" content="assets/image1.jpg">
+<meta property="og:image" content="assets/image1.png">
+<meta property="og:image" content="assets/image1.gif">

tests/metas/metas_test.js

@@ -0,0 +1,19 @@
+'use strict';
+
+var grunt = require('grunt');
+
+module.exports = {
+
+    metas: function(test) {
+        test.expect(3);
+
+        var markup = grunt.file.read('tmp/metas/metas.html');
+
+        test.ok(markup.match(/image1\.[a-z0-9]{16}\.jpg/), 'testing meta .jpg');
+        test.ok(markup.match(/image1\.[a-z0-9]{16}\.png/), 'testing meta .png');
+        test.ok(markup.match(/image1\.[a-z0-9]{16}\.gif/), 'testing meta .gif');
+
+        test.done();
+    }
+
+};

tests/stylesheets/stylesheet.css

@@ -40,6 +40,7 @@ body {
 }
 
 @media only screen and (min-device-pixel-ratio: 2) and (min-resolution: 2dppx) {
+    /** Just a comment */
     .large-image {
         background-image: url('assets/image1.jpg');
     }

tests/videos/videos.html

@@ -0,0 +1,10 @@
+<video>
+    <source src="assets/empty-video.mp4" type="video/mp4" />
+    <source src="assets/empty-video.ogg" type="video/ogg" />
+    <source src="assets/empty-video.webm" type="video/webm" />
+    <source src="assets/empty-video.webm" type="no/video" />
+    <source src="assets/empty-video.webm" />
+</video>
+<video src="assets/empty-video-stand-alone.mp4">
+  Your browser does not support the video tag.
+</video>

tests/videos/videos_test.js

@@ -0,0 +1,21 @@
+'use strict';
+
+var grunt = require('grunt');
+
+module.exports = {
+
+    videos: function(test) {
+        test.expect(5);
+
+        var markup = grunt.file.read('tmp/videos/videos.html');
+
+        test.ok(markup.match(/empty-video\.[a-z0-9]{16}\.mp4/), 'testing mp4 video in video>source tag');
+        test.ok(markup.match(/empty-video\.[a-z0-9]{16}\.ogg/), 'testing ogg video in video>source tag');
+        test.ok(markup.match(/empty-video\.[a-z0-9]{16}\.webm/), 'testing webm video in video>source tag');
+        test.ok(markup.match(/empty-video.webm/), 'testing webm video in video>source tag without type does not get replaced');
+        test.ok(markup.match(/empty-video-stand-alone\.[a-z0-9]{16}\.mp4/), 'testing src attribute in video tag');
+
+        test.done();
+    }
+
+};