feat: support pug templates (PR #185, closes #181)

* adds pug tags to list

* updates tag test files to include pug

* updates inject tests to include pug files

* adds fixtures and expected results for pug files

* adds pug extensions for transform

* updates transform tests to include pug

* updates doc to include pug

Author: callmenick

README.md

@@ -6,7 +6,7 @@
 
 `gulp-inject` takes a stream of source files, transforms each file to a string and injects each transformed string into placeholders in the target stream files. See [Basic usage](#basic-usage) and [More examples](#more-examples) below.
 
-Default [transforms](#optionstransform) and [placeholders](#optionsstarttag) exists for injecting files into `html`, `jade`, `jsx` , `less`, `slm`, `haml` and `sass` / `scss` files.
+Default [transforms](#optionstransform) and [placeholders](#optionsstarttag) exists for injecting files into `html`, `jade`, `pug`, `jsx` , `less`, `slm`, `haml` and `sass` / `scss` files.
 
 **Note:** As of `gulp-inject` v4.0.0, NodeJS v4 or above is required. To use `gulp-inject` for older versions of Node install a specific version: `npm install gulp-inject@3`.
 
@@ -630,6 +630,7 @@ A function dependent on target file type and source file type that returns:
 * html as target: `<!-- {{name}}:{{ext}} -->`
 * haml as target: `-# {{name}}:{{ext}}`
 * jade as target: `//- {{name}}:{{ext}}`
+* pug as target: `//- {{name}}:{{ext}}`
 * jsx as target: `{/* {{name}}:{{ext}} */}`
 * slm as target: `/ {{name}}:{{ext}}`
 * less as target: `/* {{name}}:{{ext}} */`
@@ -655,6 +656,7 @@ A function dependent on target file type and source file type that returns:
 * html as target: `<!-- endinject -->`
 * haml as target: `-# endinject`
 * jade as target: `//- endinject`
+* pug as target: `//- endinject`
 * jsx as target: `{/* endinject */}`
 * slm as target: `/ endinject`
 * less as target: `/* endinject */`
@@ -707,6 +709,17 @@ The same as for injecting into `html` above with [`options.selfClosingTag`](#opt
 * jpg files: `img(src="<filename>.jpg")`
 * jpeg files: `img(src="<filename>.jpeg")`
 
+**Injecting into `pug`**
+
+* css files: `link(rel="stylesheet", href="<filename>.css")`
+* js files: `script(src="<filename>.js")`
+* coffee files: `script(type="text/coffeescript", src="<filename>.coffee")`
+* html files: `link(rel="import", href="<filename>.html")`
+* png files: `img(src="<filename>.png")`
+* gif files: `img(src="<filename>.gif")`
+* jpg files: `img(src="<filename>.jpg")`
+* jpeg files: `img(src="<filename>.jpeg")`
+
 **Injecting into `slm`**
 
 * css files: `link rel="stylesheet" href="<filename>.css"`
@@ -802,12 +815,16 @@ For more details see [the code with tests](https://github.com/klei/gulp-inject/t
 
 #### inject.transform.html
 
-The default transform function for files into `html`, or other file types not `jade`, `jsx`, `slm`, `less`, `scss`, `sass` or `haml`.
+The default transform function for files into `html`, or other file types not `jade`, `pug`, `jsx`, `slm`, `less`, `scss`, `sass` or `haml`.
 
 #### inject.transform.jade
 
 The default transform function for files into `jade`.
 
+#### inject.transform.pug
+
+The default transform function for files into `pug`.
+
 #### inject.transform.jsx
 
 The default transform function for files into `jsx`.

src/inject/expected/defaults.pug

@@ -0,0 +1,15 @@
+doctype html
+html
+  head
+    title gulp-inject
+    //- inject:html
+    link(rel="import", href="/fixtures/component.html")
+    //- endinject
+    //- inject:css
+    link(rel="stylesheet", href="/fixtures/styles.css")
+    //- endinject
+  body
+
+    //- inject:js
+    script(src="/fixtures/lib.js")
+    //- endinject

src/inject/expected/issue144.pug

@@ -0,0 +1,7 @@
+//- inject:js
+script(src="/fixtures/lib.js")
+//- endinject
+
+//- inject:jsx
+script(type="text/jsx", src="/fixtures/component.jsx")
+//- endinject

src/inject/fixtures/issue144.pug

@@ -0,0 +1,5 @@
+//- inject:js
+//- endinject
+
+//- inject:jsx
+//- endinject

src/inject/fixtures/template.pug

@@ -0,0 +1,12 @@
+doctype html
+html
+  head
+    title gulp-inject
+    //- inject:html
+    //- endinject
+    //- inject:css
+    //- endinject
+  body
+
+    //- inject:js
+    //- endinject

src/inject/inject_test.js

@@ -284,6 +284,19 @@ describe('gulp-inject', function () {
     streamShouldContain(stream, ['defaults.jade'], done);
   });
 
+  it('should use special default tags when injecting into pug files', function (done) {
+    var target = src(['template.pug'], {read: true});
+    var sources = src([
+      'lib.js',
+      'component.html',
+      'styles.css'
+    ]);
+
+    var stream = target.pipe(inject(sources));
+
+    streamShouldContain(stream, ['defaults.pug'], done);
+  });
+
   it('should be able to inject jsx into jade files (Issue #144)', function (done) {
     var target = src(['issue144.jade'], {read: true});
     var sources = src([
@@ -296,6 +309,18 @@ describe('gulp-inject', function () {
     streamShouldContain(stream, ['issue144.jade'], done);
   });
 
+  it('should be able to inject jsx into pug files (Issue #144)', function (done) {
+    var target = src(['issue144.pug'], {read: true});
+    var sources = src([
+      'lib.js',
+      'component.jsx'
+    ]);
+
+    var stream = target.pipe(inject(sources));
+
+    streamShouldContain(stream, ['issue144.pug'], done);
+  });
+
   it('should use special default tags when injecting into slm files', function (done) {
     var target = src(['template.slm'], {read: true});
     var sources = src([

src/tags/index.js

@@ -8,6 +8,7 @@ var DEFAULTS = {
     html: '<!-- {{name}}:{{ext}} -->',
     jsx: '{/* {{name}}:{{ext}} */}',
     jade: '//- {{name}}:{{ext}}',
+    pug: '//- {{name}}:{{ext}}',
     slm: '/ {{name}}:{{ext}}',
     slim: '/ {{name}}:{{ext}}',
     haml: '-# {{name}}:{{ext}}',
@@ -19,6 +20,7 @@ var DEFAULTS = {
     html: '<!-- endinject -->',
     jsx: '{/* endinject */}',
     jade: '//- endinject',
+    pug: '//- endinject',
     slm: '/ endinject',
     slim: '/ endinject',
     haml: '-# endinject',

src/tags/tags_test.js

@@ -34,6 +34,10 @@ describe('tags', function () {
         tags.start('jade', 'css').should.equal('//- {{name}}:{{ext}}');
       });
 
+      it('should return pug comments for pug target files', function () {
+        tags.start('pug', 'css').should.equal('//- {{name}}:{{ext}}');
+      });
+
       it('should return slm comments for slm target files', function () {
         tags.start('slm').should.equal('/ {{name}}:{{ext}}');
       });
@@ -95,6 +99,10 @@ describe('tags', function () {
         tags.end('jade').should.equal('//- endinject');
       });
 
+      it('should return pug comments for pug target files', function () {
+        tags.end('pug').should.equal('//- endinject');
+      });
+
       it('should return slm comments for slm target files', function () {
         tags.end('slm').should.equal('/ endinject');
       });

src/transform/index.js

@@ -4,7 +4,7 @@ var extname = require('../extname');
 /**
  * Constants
  */
-var TARGET_TYPES = ['html', 'jade', 'slm', 'slim', 'jsx', 'haml', 'less', 'sass', 'scss'];
+var TARGET_TYPES = ['html', 'jade', 'pug', 'slm', 'slim', 'jsx', 'haml', 'less', 'sass', 'scss'];
 var IMAGES = ['jpeg', 'jpg', 'png', 'gif'];
 var DEFAULT_TARGET = TARGET_TYPES[0];
 
@@ -98,6 +98,34 @@ transform.jade.image = function (filepath) {
   return 'img(src="' + filepath + '")';
 };
 
+transform.pug.css = function (filepath) {
+  return 'link(rel="stylesheet", href="' + filepath + '")';
+};
+
+transform.pug.js = function (filepath) {
+  return 'script(src="' + filepath + '")';
+};
+
+transform.pug.jsx = function (filepath) {
+  return 'script(type="text/jsx", src="' + filepath + '")';
+};
+
+transform.pug.pug = function (filepath) {
+  return 'include ' + filepath;
+};
+
+transform.pug.html = function (filepath) {
+  return 'link(rel="import", href="' + filepath + '")';
+};
+
+transform.pug.coffee = function (filepath) {
+  return 'script(type="text/coffeescript", src="' + filepath + '")';
+};
+
+transform.pug.image = function (filepath) {
+  return 'img(src="' + filepath + '")';
+};
+
 transform.slm.css = function (filepath) {
   return 'link rel="stylesheet" href="' + filepath + '"';
 };

src/transform/transform_test.js

@@ -31,6 +31,10 @@ describe('transform', function () {
       transform.jade.should.be.type('function');
     });
 
+    it('should have a transform function for pug target files', function () {
+      transform.pug.should.be.type('function');
+    });
+
     it('should have a transform function for slm target files', function () {
       transform.slm.should.be.type('function');
     });
@@ -234,6 +238,65 @@ describe('transform', function () {
     });
   });
 
+  describe('pug as target', function () {
+    it('should transform css to a pug link tag', function () {
+      transform.pug.css.should.be.type('function');
+      transform.pug.css('test-file.css').should.equal('link(rel="stylesheet", href="test-file.css")');
+    });
+
+    it('should transform pug to a pug include tag', function () {
+      transform.pug.html.should.be.type('function');
+      transform.pug.pug('test-file.pug').should.equal('include test-file.pug');
+    });
+
+    it('should transform html to a self closing link tag', function () {
+      transform.pug.html.should.be.type('function');
+      transform.pug.html('test-file.html').should.equal('link(rel="import", href="test-file.html")');
+    });
+
+    it('should transform javascript to a script tag', function () {
+      transform.pug.js.should.be.type('function');
+      transform.pug.js('test-file.js').should.equal('script(src="test-file.js")');
+    });
+
+    it('should transform coffeescript to a script tag', function () {
+      transform.pug.coffee.should.be.type('function');
+      transform.pug.coffee('test-file.coffee').should.equal('script(type="text/coffeescript", src="test-file.coffee")');
+    });
+
+    it('should transform an image to a self closing img tag', function () {
+      transform.pug.image.should.be.type('function');
+      transform.pug.image('test-file.png').should.equal('img(src="test-file.png")');
+    });
+
+    it('should use the css transformer for css files automatically', function () {
+      transform.pug('test-file.css').should.equal(transform.pug.css('test-file.css'));
+    });
+
+    it('should use the pug transformer for pug files automatically', function () {
+      transform.pug('test-file.pug').should.equal(transform.pug.pug('test-file.pug'));
+    });
+
+    it('should use the html transformer for html files automatically', function () {
+      transform.pug('test-file.html').should.equal(transform.pug.html('test-file.html'));
+    });
+
+    it('should use the js transformer for js files automatically', function () {
+      transform.pug('test-file.js').should.equal(transform.pug.js('test-file.js'));
+    });
+
+    it('should use the coffee transformer for coffee files automatically', function () {
+      transform.pug('test-file.coffee').should.equal(transform.pug.coffee('test-file.coffee'));
+    });
+
+    it('should use the image transformer for png, gif, jpg and jpeg files automatically', function () {
+      transform.pug('test-file.png').should.equal(transform.pug.image('test-file.png'));
+      transform.pug('test-file.gif').should.equal(transform.pug.image('test-file.gif'));
+      transform.pug('test-file.jpg').should.equal(transform.pug.image('test-file.jpg'));
+      transform.pug('test-file.jpeg').should.equal(transform.pug.image('test-file.jpeg'));
+    });
+  });
+
   describe('slm as target', function () {
     it('should transform css to a slm link tag', function () {
       transform.slm.css.should.be.type('function');
@@ -433,6 +496,13 @@ describe('transform', function () {
       .should.equal(transform.jade.image(sourceFile.path));
   });
 
+  it('should pick the correct target transformer for pug targets', function () {
+    var targetFile = fixture('index.pug');
+    var sourceFile = fixture('image.gif');
+    transform(sourceFile.path, null, null, sourceFile, targetFile)
+      .should.equal(transform.pug.image(sourceFile.path));
+  });
+
   it('should pick the correct target transformer for slm targets', function () {
     var targetFile = fixture('index.slm');
     var sourceFile = fixture('image.gif');