From 195df4ebf000dee69a3754720fa8d3cd7eadc444 Mon Sep 17 00:00:00 2001 From: Nick Salloum Date: Wed, 18 May 2016 02:04:26 -0400 Subject: [PATCH] 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 --- README.md | 21 +++++++++- src/inject/expected/defaults.pug | 15 +++++++ src/inject/expected/issue144.pug | 7 ++++ src/inject/fixtures/issue144.pug | 5 +++ src/inject/fixtures/template.pug | 12 ++++++ src/inject/inject_test.js | 25 ++++++++++++ src/tags/index.js | 2 + src/tags/tags_test.js | 8 ++++ src/transform/index.js | 30 +++++++++++++- src/transform/transform_test.js | 70 ++++++++++++++++++++++++++++++++ 10 files changed, 192 insertions(+), 3 deletions(-) create mode 100644 src/inject/expected/defaults.pug create mode 100644 src/inject/expected/issue144.pug create mode 100644 src/inject/fixtures/issue144.pug create mode 100644 src/inject/fixtures/template.pug diff --git a/README.md b/README.md index bdc5012..b173a80 100644 --- a/README.md +++ b/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: `` * 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: `` * 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=".jpg")` * jpeg files: `img(src=".jpeg")` +**Injecting into `pug`** + +* css files: `link(rel="stylesheet", href=".css")` +* js files: `script(src=".js")` +* coffee files: `script(type="text/coffeescript", src=".coffee")` +* html files: `link(rel="import", href=".html")` +* png files: `img(src=".png")` +* gif files: `img(src=".gif")` +* jpg files: `img(src=".jpg")` +* jpeg files: `img(src=".jpeg")` + **Injecting into `slm`** * css files: `link rel="stylesheet" href=".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`. diff --git a/src/inject/expected/defaults.pug b/src/inject/expected/defaults.pug new file mode 100644 index 0000000..0a079f1 --- /dev/null +++ b/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 diff --git a/src/inject/expected/issue144.pug b/src/inject/expected/issue144.pug new file mode 100644 index 0000000..394598b --- /dev/null +++ b/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 diff --git a/src/inject/fixtures/issue144.pug b/src/inject/fixtures/issue144.pug new file mode 100644 index 0000000..c324756 --- /dev/null +++ b/src/inject/fixtures/issue144.pug @@ -0,0 +1,5 @@ +//- inject:js +//- endinject + +//- inject:jsx +//- endinject diff --git a/src/inject/fixtures/template.pug b/src/inject/fixtures/template.pug new file mode 100644 index 0000000..7cecadc --- /dev/null +++ b/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 diff --git a/src/inject/inject_test.js b/src/inject/inject_test.js index 343b662..b946117 100644 --- a/src/inject/inject_test.js +++ b/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([ diff --git a/src/tags/index.js b/src/tags/index.js index f45888c..d046973 100644 --- a/src/tags/index.js +++ b/src/tags/index.js @@ -8,6 +8,7 @@ var DEFAULTS = { html: '', 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: '', jsx: '{/* endinject */}', jade: '//- endinject', + pug: '//- endinject', slm: '/ endinject', slim: '/ endinject', haml: '-# endinject', diff --git a/src/tags/tags_test.js b/src/tags/tags_test.js index bc5b0d7..30ec8bc 100644 --- a/src/tags/tags_test.js +++ b/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'); }); diff --git a/src/transform/index.js b/src/transform/index.js index 6ebac5d..b0b8431 100644 --- a/src/transform/index.js +++ b/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 + '"'; }; diff --git a/src/transform/transform_test.js b/src/transform/transform_test.js index 597970d..ecab02e 100644 --- a/src/transform/transform_test.js +++ b/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');