├── .gitignore ├── .jshintrc ├── .travis.yml ├── LICENSE ├── README.md ├── index.js ├── package.json └── test ├── fixture ├── bad-script-tag.html ├── fixture.html ├── one.js ├── subdir │ └── subdir.html ├── template1.html ├── template2.html ├── three.js └── two.js └── test.js /.gitignore: -------------------------------------------------------------------------------- 1 | lib-cov 2 | *.seed 3 | *.log 4 | *.csv 5 | *.dat 6 | *.out 7 | *.pid 8 | *.gz 9 | 10 | pids 11 | logs 12 | results 13 | 14 | npm-debug.log 15 | node_modules 16 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "node": true, 3 | "esnext": true, 4 | "bitwise": true, 5 | "camelcase": true, 6 | "curly": true, 7 | "eqeqeq": true, 8 | "immed": true, 9 | "indent": 4, 10 | "newcap": true, 11 | "noarg": true, 12 | "quotmark": "single", 13 | "regexp": true, 14 | "undef": true, 15 | "unused": true, 16 | "strict": true, 17 | "trailing": true, 18 | "smarttabs": true 19 | } -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - '0.10' 4 | - '0.11' -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Chris Gross 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # gulp-dom-src [![Build Status](https://travis-ci.org/cgross/gulp-dom-src.png)](https://travis-ci.org/cgross/gulp-dom-src) 2 | 3 | > Create a gulp stream from script, link, or any set of tags in an HTML file. 4 | 5 | ## Example 6 | 7 | ```js 8 | var gulp = require('gulp'); 9 | var domSrc = require('gulp-dom-src'); 10 | var concat = require('gulp-concat'); 11 | var uglify = require('gulp-uglify'); 12 | 13 | gulp.task('default', function () { 14 | domSrc({ file: 'index.html', selector: 'script', attribute: 'src' }) 15 | .pipe(concat('app.full.min.js')) 16 | .pipe(uglify()) 17 | .pipe(gulp.dest('dist/')); 18 | }); 19 | ``` 20 | 21 | ## API 22 | 23 | ### domSrc(config) 24 | 25 | 26 | #### config.file 27 | 28 | Type: `String` 29 | 30 | The name of the HTML file to read the tags from. 31 | 32 | 33 | #### config.selector 34 | 35 | Type: `String` 36 | 37 | Any valid CSS selector. You can use complex selectors to allow flexible include/exclude logic for your tags. For example, use a selector such as `script[data-concat!="false"]` and put `data-concat="false"` on any script tags you wish to exclude from a concat/minification stream. 38 | 39 | 40 | #### config.attribute 41 | 42 | Type: `String` 43 | 44 | The name of the attribute that contains the file path. Typically `src` for `script` tags and `href` for `link`s. 45 | 46 | #### config.cwd 47 | 48 | Type: `String` (Optional) 49 | 50 | The directory where the paths in your tags are relative to. By default, the files references in your script or link tags are assumed to be relative to the HTML file they're read from. 51 | 52 | #### config.options 53 | 54 | Type: `Object` (Optional) 55 | Default: `{}` 56 | 57 | Options passed through to the underlying `vinyl-fs`. Can include options like `read` and `buffer`. 58 | 59 | ### domSrc.duplex(config) 60 | 61 | Creates a stream that html files can be piped into -- html files in, script or style files out. 62 | 63 | #### config.selector, config.attribute, config.cwd 64 | 65 | See above 66 | 67 | End-to-End Concatenation and Minification 68 | ------------- 69 | 70 | Combine gulp-dom-src with [gulp-cheerio](https://github.com/KenPowers/gulp-cheerio) for a full concat & min workflow. 71 | 72 | ```js 73 | var gulp = require('gulp'); 74 | var domSrc = require('gulp-dom-src'); 75 | var concat = require('gulp-concat'); 76 | var cssmin = require('gulp-cssmin'); 77 | var uglify = require('gulp-uglify'); 78 | var cheerio = require('gulp-cheerio'); 79 | 80 | gulp.task('css', function() { 81 | return domSrc({file:'index.html',selector:'link',attribute:'href'}) 82 | .pipe(concat('app.full.min.css')) 83 | .pipe(cssmin()) 84 | .pipe(gulp.dest('dist/')); 85 | }); 86 | 87 | gulp.task('js', function() { 88 | return domSrc({file:'index.html',selector:'script',attribute:'src'}) 89 | .pipe(concat('app.full.min.js')) 90 | .pipe(uglify()) 91 | .pipe(gulp.dest('dist/')); 92 | }); 93 | 94 | gulp.task('indexHtml', function() { 95 | return gulp.src('index.html') 96 | .pipe(cheerio(function ($) { 97 | $('script').remove(); 98 | $('link').remove(); 99 | $('body').append(''); 100 | $('head').append(''); 101 | })) 102 | .pipe(gulp.dest('dist/')); 103 | }); 104 | ``` 105 | 106 | Release History 107 | ------------- 108 | * 4/12/2015 - v0.2.0 - Added duplex feature from @psalaets. 109 | * 3/17/2014 - v0.1.1 - Added `cwd` option. 110 | * 3/08/2014 - v0.1.0 - Initial release. 111 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | var vinylFs = require('vinyl-fs'); 2 | var cheerio = require('cheerio'); 3 | var through = require('through2'); 4 | var vinylFile = require('vinyl-file'); 5 | var async = require('async'); 6 | var extend = require('extend'); 7 | var fs = require('fs'); 8 | var path = require('path'); 9 | 10 | module.exports = domSrc; 11 | 12 | function domSrc(config){ 13 | var html = fs.readFileSync(path.join(process.cwd(),config.file),'utf8'); 14 | var files = findFilenames(html, config); 15 | 16 | return vinylFs.src(files,config.options || {}); 17 | } 18 | 19 | function findFilenames(html, config) { 20 | var $ = cheerio.load(html); 21 | 22 | return $(config.selector).map(function(i,elem){ 23 | return $(elem).attr(config.attribute); 24 | }).toArray().filter(function(item){ 25 | return (item !== undefined && item.substring(0,4) !== 'http' && item.substring(0,2) !== '//'); 26 | }).map(function(item){ 27 | var cwd = config.cwd ? config.cwd : path.dirname(config.file); 28 | return path.join(cwd,item); 29 | }); 30 | } 31 | 32 | domSrc.duplex = function(config) { 33 | return through.obj(findAndReadFiles); 34 | 35 | function findAndReadFiles(htmlFile, encoding, throughCallback) { 36 | // copy config and set config.file to current html file 37 | // so cwd is resolved correctly when scanning html for filenames 38 | var configCopy = extend({}, config); 39 | configCopy.file = htmlFile.path; 40 | 41 | var html = htmlFile.contents.toString(); 42 | var filenames = findFilenames(html, configCopy); 43 | 44 | if (filenames.length == 0) { 45 | return throughCallback(); 46 | } 47 | 48 | var throughStream = this; 49 | async.eachSeries(filenames, function(filename, eachCallback) { 50 | vinylFile.read(filename, function(err, file) { 51 | if (err) return eachCallback(err); 52 | 53 | throughStream.push(file); 54 | eachCallback(); 55 | }); 56 | }, function(err) { 57 | throughCallback(err); 58 | }); 59 | } 60 | }; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gulp-dom-src", 3 | "version": "0.2.0", 4 | "description": "Create a gulp stream from script/link tags in an HTML file.", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "mocha" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/cgross/gulp-dom-src" 12 | }, 13 | "keywords": [ 14 | "gulpplugin", 15 | "html", 16 | "dom" 17 | ], 18 | "author": "Chris Gross", 19 | "license": "MIT", 20 | "dependencies": { 21 | "async": "~0.9.0", 22 | "cheerio": "~0.13.1", 23 | "extend": "~2.0.0", 24 | "through2": "~0.4.1", 25 | "vinyl-file": "~1.1.1", 26 | "vinyl-fs": "~0.1.0" 27 | }, 28 | "devDependencies": { 29 | "mocha": "~1.17.1", 30 | "should": "~3.1.3", 31 | "buffer-equal": "0.0.0" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /test/fixture/bad-script-tag.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /test/fixture/fixture.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /test/fixture/one.js: -------------------------------------------------------------------------------- 1 | one 2 | -------------------------------------------------------------------------------- /test/fixture/subdir/subdir.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /test/fixture/template1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /test/fixture/template2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /test/fixture/three.js: -------------------------------------------------------------------------------- 1 | three 2 | -------------------------------------------------------------------------------- /test/fixture/two.js: -------------------------------------------------------------------------------- 1 | two 2 | -------------------------------------------------------------------------------- /test/test.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | var should = require('should'); 3 | var domSrc = require('../index'); 4 | var vfs = require('vinyl-fs'); 5 | var through = require('through2'); 6 | 7 | var dataWrap = function(fn) { 8 | return function(data, enc, cb) { 9 | fn(data); 10 | cb(); 11 | }; 12 | }; 13 | 14 | describe('src (default) mode', function () { 15 | it('should read the script tags src into the stream', function (done) { 16 | 17 | var onEnd = function(){ 18 | buffered.length.should.equal(3); 19 | should.exist(buffered[0].stat); 20 | buffered[0].path.should.equal(path.resolve('test/fixture/one.js')); 21 | buffered[1].path.should.equal(path.resolve('test/fixture/two.js')); 22 | buffered[2].path.should.equal(path.resolve('test/fixture/three.js')); 23 | done(); 24 | }; 25 | 26 | var stream = domSrc({file:'test/fixture/fixture.html',selector:'script',attribute:'src'}); 27 | 28 | var buffered = []; 29 | var bufferStream = through.obj(dataWrap(buffered.push.bind(buffered)), onEnd); 30 | stream.pipe(bufferStream); 31 | 32 | }); 33 | 34 | it('should use the cwd property correctly.', function (done) { 35 | 36 | var onEnd = function(){ 37 | buffered.length.should.equal(1); 38 | should.exist(buffered[0].stat); 39 | buffered[0].path.should.equal(path.resolve('test/fixture/one.js')); 40 | done(); 41 | }; 42 | 43 | var stream = domSrc({file:'test/fixture/subdir/subdir.html',selector:'script',attribute:'src',cwd:'test/fixture'}); 44 | 45 | var buffered = []; 46 | var bufferStream = through.obj(dataWrap(buffered.push.bind(buffered)), onEnd); 47 | stream.pipe(bufferStream); 48 | 49 | }); 50 | }); 51 | 52 | describe('duplex mode', function () { 53 | it('should process html piped into it', function(done) { 54 | 55 | var onEnd = function(){ 56 | buffered.length.should.equal(3); 57 | should.exist(buffered[0].stat); 58 | buffered[0].path.should.equal(path.resolve('test/fixture/one.js')); 59 | buffered[1].path.should.equal(path.resolve('test/fixture/two.js')); 60 | buffered[2].path.should.equal(path.resolve('test/fixture/three.js')); 61 | done(); 62 | }; 63 | 64 | var stream = vfs.src('test/fixture/fixture.html') 65 | .pipe(domSrc.duplex({ 66 | selector:'script', 67 | attribute:'src' 68 | })); 69 | 70 | var buffered = []; 71 | var bufferStream = through.obj(dataWrap(buffered.push.bind(buffered)), onEnd); 72 | stream.pipe(bufferStream); 73 | }); 74 | 75 | it('should use the cwd property correctly.', function (done) { 76 | 77 | var onEnd = function(){ 78 | buffered.length.should.equal(1); 79 | should.exist(buffered[0].stat); 80 | buffered[0].path.should.equal(path.resolve('test/fixture/one.js')); 81 | done(); 82 | }; 83 | 84 | var stream = vfs.src('test/fixture/subdir/subdir.html') 85 | .pipe(domSrc.duplex({ 86 | selector:'script', 87 | attribute:'src', 88 | cwd: 'test/fixture' 89 | })); 90 | 91 | var buffered = []; 92 | var bufferStream = through.obj(dataWrap(buffered.push.bind(buffered)), onEnd); 93 | stream.pipe(bufferStream); 94 | }); 95 | 96 | it('should still work when finding nothing in html', function(done) { 97 | 98 | var onEnd = function(){ 99 | buffered.length.should.equal(0); 100 | done(); 101 | }; 102 | 103 | var stream = vfs.src('test/fixture/fixture.html') 104 | .pipe(domSrc.duplex({ 105 | selector:'script', 106 | attribute:'wont-find-this-attribute' 107 | })); 108 | 109 | var buffered = []; 110 | var bufferStream = through.obj(dataWrap(buffered.push.bind(buffered)), onEnd); 111 | stream.pipe(bufferStream); 112 | }); 113 | 114 | it('should handle multiple incoming html files', function(done) { 115 | 116 | var onEnd = function(){ 117 | buffered.length.should.equal(3); 118 | should.exist(buffered[0].stat); 119 | buffered[0].path.should.equal(path.resolve('test/fixture/one.js')); 120 | buffered[1].path.should.equal(path.resolve('test/fixture/two.js')); 121 | buffered[2].path.should.equal(path.resolve('test/fixture/three.js')); 122 | done(); 123 | }; 124 | 125 | var stream = vfs.src('test/fixture/template{1,2}.html') 126 | .pipe(domSrc.duplex({ 127 | selector:'script', 128 | attribute:'src' 129 | })); 130 | 131 | var buffered = []; 132 | var bufferStream = through.obj(dataWrap(buffered.push.bind(buffered)), onEnd); 133 | stream.pipe(bufferStream); 134 | }); 135 | 136 | it('should emit an error when a referenced file is not found', function(done) { 137 | 138 | var onEnd = function(){ 139 | done(new Error('onEnd should not have been called')); 140 | }; 141 | 142 | var stream = vfs.src('test/fixture/bad-script-tag.html') 143 | .pipe(domSrc.duplex({ 144 | selector:'script', 145 | attribute:'src' 146 | })); 147 | 148 | var buffered = []; 149 | var bufferStream = through.obj(dataWrap(buffered.push.bind(buffered)), onEnd); 150 | 151 | stream.on('error', function(err) { 152 | done(); 153 | }).pipe(bufferStream); 154 | }); 155 | }); --------------------------------------------------------------------------------