gulp-usemin

1、作用及基本用法

一个html文件中一般会依赖多个css文件，该插件就是通过一种特殊的注释语法将所个css文件替换成一个。

var usemin = require('gulp-usemin');
gulp.task('usemin', function() {
  return gulp.src('./*.html')
    .pipe(usemin({options}))
    .pipe(gulp.dest('build/'));
});
//html特殊注释
<!-- build:css style.css -->
<link rel="stylesheet" href="css/clear.css"/>
<link rel="stylesheet" href="css/main.css"/>
<!-- endbuild -->
 
<!-- build:htmlimport components-packed.html -->
<link rel="import" href="components-a.html">
<link rel="import" href="components-b.html">
<!-- endbuild -->
 
<!-- build:js js/lib.js -->
<script src="../lib/angular-min.js"></script>
<script src="../lib/angular-animate-min.js"></script>
<!-- endbuild -->
 
<!-- build:js1 js/app.js -->
<script src="js/app.js"></script>
<script src="js/controllers/thing-controller.js"></script>
<script src="js/models/thing-model.js"></script>
<script src="js/views/thing-view.js"></script>
<!-- endbuild -->
 
<!-- build:remove -->
<script src="js/localhostDependencies.js"></script>
<!-- endbuild -->
 
<!-- build:inlinejs -->
<script src="../lib/angular-min.js"></script>
<script src="../lib/angular-animate-min.js"></script>
<!-- endbuild -->
 
<!-- build:inlinecss -->
<link rel="stylesheet" href="css/clear.css"/>
<link rel="stylesheet" href="css/main.css"/>
<!-- endbuild -->

2、注释语法

三个参数可以配置

... HTML Markup, list of script / link tags.

• pipelineId: 对应options中的某个配置，比如css,js等，填哪个Id，其包含的块就会执行option中配置的Id对应的任务；或者填remove，表示该section会被删除，即不会编译到html中
• alternate search path: (optional) css，js文件一般是相对于当前html的，但是这个配置项可以改变这个相对地址，即可以不相对于html
• path: 执行完pipelineId对应的任务后生产的文件路径

3、配置项

• assetsDir
  设置处理后的静态资源根路径，可用于配置CDN
• path
  设置第2节中的alternate search path，可被某个具体的块重写
• pipelineId String
  若存在就用其改变对应的文件，如果没有包含字符串'concat'，就会作为第一个管道中的成员，若有concat，则concat永远是管道中的第一个
• outputRelativePath String
  经过处理输出的js和css相对html文件的位置
• enableHtmlComment Boolean
  是否保留html里的评论
• jsAttribute Object
  在输出的script上添加属性，主要是加defer做异步加载

{
        async : true,
        defer:true,
        lorem : 'ipsum',
}

• skipMissingResources Boolean
  当一个资源不存在时，是否跳过，默认false，当一个资源不存在时会报错

4、其他

• 该插件自带concat功能，无需再引入其他concat插件
• 如果你需要使用两次相同的管道输入，你需要给将任务用函数包起来

gulp.task('usemin', function() {
  return gulp.src('./*.html')
    .pipe(usemin({
      css: [ rev ],
      html: [ function () {return htmlmin({ collapseWhitespace: true });} ],
      js: [ uglify, rev ],
      inlinejs: [ uglify ],
      inlinecss: [ cleanCss, 'concat' ]
    }))
    .pipe(gulp.dest('build/'));
});

gulp.task('usemin', ['sass'], function() { //
del('build/')
gulp.src([
_opt.src + 'view/ink-share.html'
], {
base: _opt.src
})
.pipe(gulpRevAll.revision({
prefix: 'http://1234.cloudfront.net/'
}))
.pipe(usemin({
css: [minifyCss(), gulpRevAll.revision({
hashLength: 4,
prefix: 'http://1234.cloudfront.net/'
})],
html: [function() {
return htmlmin({
collapseWhitespace: true
});
}],
js: [uglify(), gulpRevAll.revision({
hashLength: 4,
prefix: 'http://1234.cloudfront.net/'

        })],
        // inlinejs: [uglify],
        // inlinecss: [minifyCss, 'concat']
    }))
    .pipe(gulp.dest('build/'));

});