Extracts js/css/less and other resources from html
npm install gulp-resources#gulp-resources
> Extracts js/css/less and other resources from html
```
npm install --save-dev gulp-resources
With this gulp plugin you can extract js/css/less resources from your html and pipe them to other plugins.
`js
var gulp = require('gulp'),
resources = require('gulp-resources');
gulp.task('default', function () {
return gulp.src('./template.html')
.pipe(resources())
.pipe(gulp.dest('./tmp'));
});
`
Running this example task for such html:
`html
gulp-resources example
will produce such folder with sources:
`
tmp
└─css
└─style1.css
└─scripts
├─script1.js
└─script2.js
`Features and tips
gulp-resources considers every resource entry as a glob so you can do such thing in your HTML:`html
gulp-resources example
`You can use built-in options (see API) to filter resources but if you want to run
gulp-resources once so good solution is to use the gulp-if plugin:`jsvar gulp = require('gulp'),
gif = require('gulp-if'),
concat = require('gulp-concat'),
resources = require('gulp-resources');
gulp.task('default', function () {
return gulp.src('./template.html')
.pipe(resources())
.pipe(gif('*/.js', concat('concat.js')))
.pipe(gif('*/.css', concat('concat.css')))
.pipe(gulp.dest('./tmp'));
});
`Mostly you also need to replace all the resources references with concatenated and/or uglified version. Here the gulp-replace can help:
`html
gulp-resources example
``jsvar gulp = require('gulp'),
gif = require('gulp-if'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
replace = require('gulp-replace'),
resources = require('gulp-resources');
gulp.task('default', function () {
return gulp.src('./template.html')
.pipe(resources())
.pipe(gif('*/.js', concat('all.js')))
.pipe(gif('*/.js', uglify()))
.pipe(gif('*/.html', replace(/[^]+/, '')))
.pipe(gulp.dest('./tmp'));
});
`After running the task you will have such html:
`html
gulp-resources example
`It also supports resources with query parameters:
`html
gulp-resources example
`When
appendQueryToPath option is true (false by default), vinyl files path property will contain query parameters, so if you need to read the file from file.path property, remove the query parameters before:`javascript
function readFileContents(file) {
var queryIdx = file.path.indexOf('?');
queryIdx = queryIdx < 0 ? file.path.length : queryIdx;
return fs.readFileSync(file.path.substring(0, queryIdx)).toString('utf8');
}
`API
$3
Returns a stream with extracted resources.
#### options.cwd
Type:
String or Array
Default: none Without this value only working directory of processing HTML file is used to search resources.
Specifying this property allows you to add another location/locations to search for resources files if they were not found with HTML's working directory.
#### options.js
Type:
Boolean
Default: true Specify whether to search js files
#### options.css
Type:
Boolean
Default: true Specify whether to search css files
#### options.less
Type:
Boolean
Default: true Specify whether to search less files
#### options.favicon
Type:
Boolean
Default: false Specify whether to search favicon file
#### options.skipNotExistingFiles
Type:
Boolean
Default: falseSpecify whether to skip errors when resource files were not found.
#### options.appendQueryToPath
Type:
Boolean
Default: falseAppend query to
file.path if exists. When true, will produce this vinyl file:
`javascript
{
base: '/',
cwd: '/',
stat: Object,
path: '/myscript.js?v3.0',
contents: Object
}
`When
false, it will produce this one:
`javascript
{
base: '/',
cwd: '/',
stat: Object,
path: '/myscript.js',
contents: Object
}
``MIT @ Eugene Gluhotorenko