gulp-min-map is a gulp plugin to create a file minification mapping of local js and css in your HTML files. It uses HTML5 data attributes to process the min files and will optionally rewrite the js and css links for you.
Usage
gulp-min-map is a plugin that provides a { minFile: [sourceFile1, sourceFile2, ..] } mapping/manifest object. You can pass this map object to a custom concatenation, minification, etc. gulp task.
Install as a dependency into project
npm install --save-dev gulp-min-map
Then use in your gulpfile.js (simple example)
var minFiles ={};
gulp.task("deploy-html",function(){
returngulp.src("build/**/*.html")
.pipe(plumber())
.pipe(minMap(['js','css'], minFiles))
.pipe(gulp.dest('release'));
});
gulp.task("deploy-js",function(){
var streams =[];
var jsMinFiles =minFiles.js;
for(var minFile in jsMinFiles){
if(jsMinFiles.hasOwnProperty(minFile)){
var stream =gulp.src(jsMinFiles[minFile])
.pipe(stripDebug())
.pipe(uglify())
.pipe(concat(minFile))
.pipe(header(copyrightText,{}))
.pipe(gulp.dest('release'));
streams.push(stream);
}
}
returnes.merge.apply(es, streams);
});
gulp.task("deploy-css",function(){
var streams =[];
var cssMinFiles =minFiles.css;
for(var minFile in cssMinFiles){
if(cssMinFiles.hasOwnProperty(minFile)){
var stream =gulp.src(cssMinFiles[minFile])
.pipe(minifyCss())
.pipe(concat(minFile))
.pipe(header(copyrightText,{}))
.pipe(gulp.dest('release'));
streams.push(stream);
}
}
returnes.merge.apply(es, streams);
});
HTML
gulp-min-map will automatically detect local js and css references, and replace the src with the optional data-min attribute.
The HTML element attribute that specifies the min file name to associate this element with.
noMinAttr
Type: string
Default: "data-no-min"
The HTML element attribute that specifies that this element should be excluded from min file processing when automMin is true.
autoMin
Type: bool
Default: true
Minimize files without a data-min attribute. Otherwise, leave as is.
defaultMinFile
Type: string
Default: null
If autoMin is true, use this filename (e.g. 'app.min.js') for all elements without a data-min attribute. If defaultMinFile is null, the plugin will use the src file name instead (i.e. 'myfile.js' -> 'myfile.min.js').
updateHTML
Type: bool
Default: true
Rewrite the input HTML files so the src uses the min files. Otherwise, the HTML file is left as is.
appendRev
Type: bool
Default: false
If true, appends a query string '?rev=@@hash' to the end of the css or js file name when rewriting the HTML files. This format is compatible with the gulp-rev-append plugin for cache busting. Run gulp-rev-append on your HTML files after you have minified, concatenated, etc. your css and js files appropriately.