gulp-asset-transform
v2.1.0
Published
A fully async Usemin-like Gulp library ===================
Downloads
61
Maintainers
Readme
A fully async Usemin-like Gulp library
Inspired by gulp-usemin
##Status
##Installation
Using npm:
npm install gulp-asset-transform
##Documentation
- comment directive explanation
- html
- gulpfile
- tasks array
- reusing pipelines
- stream function
- remove
- implicit tag template references
- tag templates
- explicit tags
- concat
- legacy directives
##Examples
var at = require('gulp-asset-transform');
Each start directive is composed of a few parts, some of which are optional. The required portion
<!-- at:some_pipeline_id -->
Additionally you can include a desired filename and a tag template to use in case you don't want to match on the extension of the desired filename.
<!-- at:some_pipeline_id >> tag_template_name:sub/path/and/filename.ext -->
<!-- at:id1 >> assets/site.css -->
<link rel="stylesheet/less" type="text/css" href="less/less1.less">
<link rel="stylesheet/less" type="text/css" href="less/less2.less">
<!-- at:end -->
<!-- at:id2 >> assets/site.js -->
<script src="js/js1.js"></script>
<script src="js/js2.js"></script>
<!-- at:end -->
<!-- at:remove -->
<script src="js/less.js"></script>
<!-- at:end -->
If you use the tasks array configuration, gulp-concat is provided for you via 'concat', and the filename is parsed from the tag field.
gulp.task('build', function () {
gulp.src('./src/client/index.html')
.pipe(at({
less: {
tasks: [
less,
minifyCss,
function (filename) { return concat(filename); }
]
}
}))
.pipe(gulp.dest('build/client'));
});
gulp.task('build', function() {
gulp.src('./src/client/index.html')
.pipe(at({
id2: {
stream:function(filestream, outputFilename){
return filestream
.pipe(uglify())
.pipe(concat(outputFilename)); //concat is gulp-concat
}
}
}))
.pipe(gulp.dest('build/client'));
});
<!-- at:id >> assets/site.css -->
<link rel="stylesheet/less" type="text/css" href="less/less1.less">
<link rel="stylesheet/less" type="text/css" href="less/less2.less">
<!-- at:end -->
This will use the tag template assigned to 'css'.
These can be overridden by explicitly specifying a template reference before the desired filename.
<!-- at:id >> css1:assets/site.css -->
<link rel="stylesheet/less" type="text/css" href="less/less1.less">
<link rel="stylesheet/less" type="text/css" href="less/less2.less">
<!-- at:end -->
In this case, we expect to use a tag template called 'css1'. If you specify something other than css or js, you will need to provide the tag template.