Gulp-asset-transform NPM

A fully async Usemin-like Gulp library

##Status

##Installation

Using npm:

npm install gulp-asset-transform

##Documentation

##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.