gulp-resources

#gulp-resources

> Extracts js/css/less and other resources from html

Installation

``
npm install --save-dev gulp-resources
`

Usage

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:

`js

var 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




`

`js

var 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: false

Specify whether to skip errors when resource files were not found.

#### options.appendQueryToPath
Type: Boolean
Default: false

Append 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
}
``

License

MIT @ Eugene Gluhotorenko