0

gulp-userref を使用する場合、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 コードは機能しません。

4

2 に答える 2

0

これを行う方法は、gulp-userref の代わりに gulp-usemin を使用することのようです。そのように：

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')); });
于 2015-09-20T17:27:24.957 に答える