Gulp-useref：有條件地按類型處理資產嗎？

Question

使用gulp-useref時，是否有可能根據html標簽中聲明的html構建類型有條件地處理css和js資產？

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

我想做的只是通過自動區分前綴來區分非供應商資產，就像這樣（注意css vs 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}); -用於避免一直寫“要求”。 :)

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')); });