Gulp-useref：按类型有条件地处理资产？

Question

在使用 gulp-useref 时，是否可以根据 html 标签内声明的 html 构建类型有条件地处理 css 和 js 资产？

<!-- build:<type>(alternate search path) <path> -->
... HTML Markup, list of script / link tags.
<!-- endbuild -->

我想做的只是 autoprefix 和 jslint 通过区分它们来区分非供应商资产，就像那样（注意 css 与 css_vendors 类型）：

index.html

<!-- build:css_vendors css/vendors.min.css -->
    <link rel="stylesheet" href="vendor/fontawesome/css/font-awesome.css">
    <link rel="stylesheet" href="vendor/magnific-popup/magnific-popup.css">
<!-- endbuild -->
<!-- build:css css/styles.min.css -->
    <link rel="stylesheet" href="css/theme.css">
    <link rel="stylesheet" href="css/custom.css">
<!-- endbuild -->

gulpfile.js

gulp.task('useref', function() {
  return gulp.src('index.html')
    .pipe(useref({
      css: [ autoprefixer(), minifyCss() ],
      css_vendors: [ minifyCss() ]
    }))
    .pipe(gulp.dest('build/'));
});

但不幸的是，这个 gulpfile.js 代码不起作用。

Answer 1

还有另一个插件似乎以您想要的方式运行，但我不熟悉它的使用 - gulp-html-replace。

使用 useref，您可以使用 gulp-if 将函数应用于匹配项：

.pipe($.if('*.css', autoprefixer()))

等等

尽管您使用的源似乎不足以满足您的需求，因为您需要从 html 文件中收集资产。我的任务中的示例，如果你愿意的话：

gulp.task('build-dist', ['wiredep'], function () {

    var assets = $.useref.assets({searchPath: ''});
    var cb = Math.random();

    return gulp
        .src(config.indexFile)
        .pipe($.rename(config.outputIndexFile))
        .pipe($.plumber())
        .pipe(assets)
        .pipe($.if('*.css', $.csso()))
        .pipe($.if('**/lib.js', $.uglify({preserveComments: 'license', mangle: false})))
        .pipe($.if('**/init.js', $.ngAnnotate()))
        .pipe($.if('**/init.js', $.uglify({mangle: false})))
        .pipe($.if('**/app.js', $.ngAnnotate()))
        .pipe($.if('**/app.js', $.uglify()))
        .pipe(assets.restore())
        .pipe($.useref())
        .pipe($.replace('.css"', '.css?cb=' + cb + '"'))
        .pipe($.replace('.js"', '.js?cb=' + cb + '"'))
        .pipe(gulp.dest(config.indexLocation))
        ;
});

编辑：$ 是 var $ = require('gulp-load-plugins')({lazy: true}); - 用来避免一直写“require”。 :)

Answer 2

看起来这样做的方法是使用 gulp-usemin 而不是 gulp-useref。像这样：

index.html

<!-- build:css_vendors css/vendors.min.css -->
    <link rel="stylesheet" href="vendor/fontawesome/css/font-awesome.css">
    <link rel="stylesheet" href="vendor/magnific-popup/magnific-popup.css">
<!-- endbuild -->
<!-- build:css_styles css/styles.min.css -->
    <link rel="stylesheet" href="css/theme.css">
    <link rel="stylesheet" href="css/custom.css">
<!-- endbuild -->

gulpfile.js

gulp.task('usemin', function() {   
   return gulp.src('index.html')
     .pipe(plumber())
     .pipe(usemin({
       css_vendors: [ minifyCss() ],
       css_styles: [ autoprefixer(), minifyCss() ]
     }))
     .pipe(gulp.dest('./dist')); });