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.
var gulp = resources = ; gulp;
Running this example task for such 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:
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:
var gulp = gif = concat = resources = ; gulp;
Mostly you also need to replace all the resources references with concatenated and/or uglified version. Here the gulp-replace can help:
<!--startjs--> <!--endjs--> gulp-resources example
var gulp = gif = concat = uglify = replace = resources = ; gulp;
After running the task you will have such html:
gulp-resources example
It also supports resources with query parameters:
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:
{ var queryIdx = filepath; queryIdx = queryIdx < 0 ? filepathlength : queryIdx; return fs;}
API
resources(options)
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
, <script src="myscript.js?v3.0"></script>
will produce this vinyl file:
base: '/' cwd: '/' stat: Object path: '/myscript.js?v3.0' contents: Object
When false
, it will produce this one:
base: '/' cwd: '/' stat: Object path: '/myscript.js' contents: Object
License
MIT @ Eugene Gluhotorenko