使用gulp-usemin更新多个html文件

Question

我正在使用gulp-usemin，当我只更新一个html文件时，它似乎工作得很好，但是当我试图让它更新多个html文件时，它崩溃了。这是我现在的任务。注意，我已经复制了代码，一次用于login.html文件，另一次用于index.html文件。我想要做的就是传入一个像gulp.src([_appdir + '/login.html', _appdir + '/index.html'], {base: _appdir})这样的数组，但这似乎是我的任务炸弹。甚至尝试使用*.html，我也遇到了同样的问题。

gulp.task('usemin', ['browserify', 'sass'], function() {
  gulp.src([_appdir + '/images/**/*'], {base: _appdir})
    .pipe(gulp.dest(_publicdir));

  gulp.src([_appdir + '/login.html'], {base: _appdir})
    .pipe(usemin({
      css: [minifyCss({keepSpecialComments: 0}), 'concat', rev()],
      html: [gulpif(argv.production, minifyHtml({conditionals: true, quotes: true}))],
      jsOldIE: [uglify(), rev()],
      jsVendor: [uglify(), rev()],
      jsBundle: [
        gulpif(argv.production, rev()),
        gulpif(argv.production, uglify()),
        gulpif(argv.production, rename({suffix: '.min'}))
      ]
    }))
    .pipe(gulp.dest(_publicdir));

  return gulp.src([_appdir + '/index.html'], {base: _appdir})
    .pipe(usemin({
      css: [minifyCss({keepSpecialComments: 0}), 'concat', rev()],
      html: [gulpif(argv.production, minifyHtml({conditionals: true, quotes: true}))],
      jsOldIE: [uglify(), rev()],
      jsVendor: [uglify(), rev()],
      jsBundle: [
        gulpif(argv.production, rev()),
        gulpif(argv.production, uglify()),
        gulpif(argv.production, rename({suffix: '.min'}))
      ]
    }))
    .pipe(gulp.dest(_publicdir));
});

Answer 1

gulp-usemin目前有一个错误，它阻止你使用相同名称的多个<!-- build:name ... -->注释。如果在同一文件中有两个<!-- build:css ... -->部分，这也会触发错误。

我最终改用了useref，我甚至不需要改变我的HTML。

Answer 2

这个问题很老了，但这个问题很常见，网上很多人都在寻找解决方案，在谷歌搜索结果的顶部没有明确的解决方案。我是新手，很抱歉给您带来不便。

对于没有参数的简单函数，只需删除括号即可：

jsOldIE: [uglify, rev],

如果需要参数，则创建匿名函数

css: [
    function() { return minifyCss({keepSpecialComments: 0}); }, 
    'concat', rev],

Answer 3

您需要使用gulp-foreach

gulp.task('usemin', ['browserify', 'sass'], function() {
  gulp.src([_appdir + '/images/**/*'], {base: _appdir})
    .pipe(gulp.dest(_publicdir));

  return gulp.src([_appdir + '/login.html', _appdir + '/index.html'], {base: _appdir})
    .pipe(foreach(function (stream, file) {

      return stream.pipe(usemin({
        css: [minifyCss({keepSpecialComments: 0}), 'concat', rev()],
        html: [gulpif(argv.production, minifyHtml({conditionals: true, quotes: true}))],
        jsOldIE: [uglify(), rev()],
        jsVendor: [uglify(), rev()],
        jsBundle: [
          gulpif(argv.production, rev()),
          gulpif(argv.production, uglify()),
          gulpif(argv.production, rename({suffix: '.min'}))
        ]
      }))
      .pipe(gulp.dest(_publicdir));
    }))
})