Merge pull request #337 from mcampo/custom-types

add suport for block replacement for custom block types

Author: sindresorhus

README.md

@@ -51,7 +51,7 @@ Blocks are expressed as:
 <!-- endbuild -->
 ```
 
-* **type**: either `js` or `css`
+* **type**: can be `js`, `css` or a custom type with a [block replacement function](#blockreplacements) defined
  * If another type, the block will be ignored.  Useful for "development only" blocks that won't appear in your build
 * **alternate search path**: (optional) By default the input files are relative to the treated file. Alternate search path allows one to change that
 * **path**: the file path of the optimized file, the target output
@@ -136,28 +136,28 @@ useminPrepare: {
 
 ### dest
 
-Type: 'string' <br/>
+Type: 'string'  
 Default: `nil`
 
 Base directory where the transformed files should be output.
 
 ### staging
 
-Type: 'string' <br/>
+Type: 'string'  
 Default: `.tmp`
 
 Base directory where the temporary files should be output (e.g. concatenated files).
 
 ### root
 
-Type: 'string' or 'Array' <br/>
-Default: `nil` <br/>
+Type: 'string' or 'Array'  
+Default: `nil`
 
 The root directory from which your files will be resolved.
 
 ### flow
 
-Type: 'object' <br/>
+Type: 'object'  
 Default: `{ steps: { js: ['concat', 'uglifyjs'], css: ['concat', 'cssmin'] }, post: {} }`
 
 This allow you to configure the workflow, either on a per-target basis, or for all the targets.
@@ -327,7 +327,7 @@ By default `usemin` will look under `dist/html` for revved versions of `styles/m
 
 #### assetsDirs
 
-Type: 'Array'
+Type: 'Array'  
 Default: Single item array set to the value of the directory where the currently looked at file is.
 
 List of directories where we should start to look for revved version of the assets referenced in the currently looked at file.
@@ -344,7 +344,7 @@ usemin: {
 
 #### patterns
 
-Type: 'Object'
+Type: 'Object'  
 Default: Empty
 
 Allows for user defined pattern to replace reference to files. For example, let's suppose that you want to replace
@@ -375,9 +375,36 @@ So in short:
     * FIXME
     * FIXME
 
+#### blockReplacements
+
+Type: 'Object'  
+Default: `{ css: function (block) { ... }, js: function (block) { ... } }`
+
+This lets you define how blocks get their content replaced. Useful to have block types other that `css` and `js`.
+
+* Object key matches a block type
+* Value is the replacement function for that block type.
+  * The replacement function gets called with a single argument: a [block](#block) object.
+  * Must return a `String`, the "summary" line that will replace the block content.
+
+For example, to create a `less` block you could define its replacement function like this:
+
+```js
+usemin: {
+  html: index.html,
+  options: {
+    blockReplacements: {
+      less: function (block) {
+          return '<link rel="stylesheet" href="' + block.dest + '">';
+      }
+    }
+  }
+}
+```
+
 #### revmap
 
-Type: 'String'
+Type: 'String'  
 Default: Empty
 
 Indicate the location of a map file, as produced by `grunt-filerev` for example. This map file is a simple JSON file, holding an object

lib/fileprocessor.js

@@ -68,7 +68,22 @@ var _defaultPatterns = {
   ]
 };
 
-var FileProcessor = module.exports = function (patterns, finder, logcb) {
+//
+// Default block replacement functions, for css and js types
+//
+var defaultBlockReplacements = {
+  css: function (block) {
+    var media = block.media ? ' media="' + block.media + '"' : '';
+    return '<link rel="stylesheet" href="' + block.dest + '"' + media + '>';
+  },
+  js: function (block) {
+    var defer = block.defer ? 'defer ' : '';
+    var async = block.async ? 'async ' : '';
+    return '<script ' + defer + async + 'src="' + block.dest + '"><\/script>';
+  }
+};
+
+var FileProcessor = module.exports = function (patterns, finder, logcb, blockReplacements) {
   if (!patterns) {
     throw new Error('No pattern given');
   }
@@ -89,6 +104,13 @@ var FileProcessor = module.exports = function (patterns, finder, logcb) {
     throw new Error('Missing parameter: finder');
   }
   this.finder = finder;
+
+
+  this.blockReplacements = _.assign({}, defaultBlockReplacements);
+  if (blockReplacements && _.keys(blockReplacements).length > 0) {
+    _.assign(this.blockReplacements, blockReplacements);
+  }
+
 };
 
 //
@@ -107,21 +129,13 @@ FileProcessor.prototype.replaceBlocks = function replaceBlocks(file) {
 
 FileProcessor.prototype.replaceWith = function replaceWith(block) {
   var result;
-  var dest = block.dest;
   var conditionalStart = block.conditionalStart ? block.conditionalStart + '\n' + block.indent : '';
   var conditionalEnd = block.conditionalEnd ? '\n' + block.indent + block.conditionalEnd : '';
   if (typeof block.src === 'undefined' || block.src === null || block.src.length === 0) {
     // there are no css or js files in the block, remove it completely
     result = '';
-  } else if (block.type === 'css') {
-    var media = block.media ? ' media="' + block.media + '"' : '';
-    result = block.indent + conditionalStart + '<link rel="stylesheet" href="' + dest + '"' + media + '/>' + conditionalEnd;
-  } else if (block.defer) {
-    result = block.indent + conditionalStart + '<script defer src="' + dest + '"><\/script>' + conditionalEnd;
-  } else if (block.async) {
-    result = block.indent + conditionalStart + '<script async src="' + dest + '"><\/script>' + conditionalEnd;
-  } else if (block.type === 'js') {
-    result = block.indent + conditionalStart + '<script src="' + dest + '"><\/script>' + conditionalEnd;
+  } else if (_.contains(_.keys(this.blockReplacements), block.type)) {
+    result = block.indent + conditionalStart + this.blockReplacements[block.type](block) + conditionalEnd;
   } else {
     result = '';
   }

tasks/usemin.js

@@ -111,6 +111,7 @@ module.exports = function (grunt) {
     var options = this.options({
       type: this.target
     });
+    var blockReplacements = options.blockReplacements || {};
 
     debug('Looking at %s target', this.target);
     var patterns;
@@ -129,7 +130,7 @@ module.exports = function (grunt) {
     var revvedfinder = new RevvedFinder(locator);
     var handler = new FileProcessor(patterns, revvedfinder, function (msg) {
       grunt.log.writeln(msg);
-    });
+    }, blockReplacements);
 
     this.files.forEach(function (fileObj) {
       var files = grunt.file.expand({

test/fixtures/block_with_custom_type.html

@@ -0,0 +1,4 @@
+<!-- build:less styles/main.css -->
+<link rel="stylesheet/less" href="styles/foo.less">
+<link rel="stylesheet/less" href="styles/bar.less">
+<!-- endbuild -->

test/test-fileprocessor.js

@@ -66,7 +66,7 @@ describe('FileProcessor', function () {
       };
 
       var result = fp.replaceWith(block);
-      assert.equal(result, '  <link rel="stylesheet" href="foo.css"/>');
+      assert.equal(result, '  <link rel="stylesheet" href="foo.css">');
     });
 
     it('should remove css blocks which have no stylesheets linked in them', function () {
@@ -108,6 +108,24 @@ describe('FileProcessor', function () {
       assert.equal(result, '');
     });
 
+    it('should replace cutsom blocks using provided replacement function', function () {
+      var blockReplacements = {
+        less: function (block) {
+          return 'custom replacement for ' + block.dest;
+        }
+      };
+      var fp = new FileProcessor('html', {}, function () {}, blockReplacements);
+      var block = {
+        dest: 'foo.css',
+        type: 'less',
+        src: ['bar.less'],
+        indent: '  '
+      };
+
+      var result = fp.replaceWith(block);
+      assert.equal(result, '  custom replacement for foo.css');
+    });
+
     it('should preserve defer attribute (JS)', function () {
       var fp = new FileProcessor('html', {});
       var block = {
@@ -147,7 +165,7 @@ describe('FileProcessor', function () {
       };
 
       var result = fp.replaceWith(block);
-      assert.equal(result, '  <link rel="stylesheet" href="foo.css" media="(min-width:980px)"/>');
+      assert.equal(result, '  <link rel="stylesheet" href="foo.css" media="(min-width:980px)">');
     });
 
     it('should preserve IE conditionals for js blocks', function () {
@@ -177,7 +195,7 @@ describe('FileProcessor', function () {
       };
 
       var result = fp.replaceWith(block);
-      assert.equal(result, '  <!--[if (lt IE 9) & (!IEmobile)]>\n  <link rel="stylesheet" href="foo.css"/>\n  <![endif]-->');
+      assert.equal(result, '  <!--[if (lt IE 9) & (!IEmobile)]>\n  <link rel="stylesheet" href="foo.css">\n  <![endif]-->');
     });
   });
 

test/test-usemin.js

@@ -147,7 +147,7 @@ describe('usemin', function () {
       var changed = grunt.file.read('build/foo/index.html');
 
       assert.ok(changed.match(/<img src="\.\.\/images\/test\.23012\.png"\>/));
-      assert.ok(changed.match(/<link rel=\"stylesheet\" href=\"styles\/main\.min\.css\"\/>/));
+      assert.ok(changed.match(/<link rel=\"stylesheet\" href=\"styles\/main\.min\.css\">/));
       assert.ok(changed.match(/<img src=\"\.\.\/images\/misc\/test\.2a436\.png\">/));
 
     });
@@ -331,6 +331,27 @@ describe('usemin', function () {
     assert.ok(changed.match('<img src="images/test.2134.png">'));
   });
 
+  it('should allow for custom block replacement functions', function () {
+    grunt.log.muted = true;
+    grunt.config.init();
+    grunt.config('usemin', {
+      html: 'index.html',
+      options: {
+        blockReplacements: {
+          less: function (block) {
+            return '<link rel="stylesheet" href="' + block.dest + '">';
+          }
+        }
+      }
+    });
+    grunt.file.copy(path.join(__dirname, 'fixtures/block_with_custom_type.html'), 'index.html');
+    grunt.task.run('usemin');
+    grunt.task.start();
+
+    var changed = grunt.file.read('index.html');
+    // Check replace has performed its duty
+    assert.equal(changed, '<link rel="stylesheet" href="styles/main.css">');
+  });
 });
 
 describe('useminPrepare', function () {