gulp-html-replace和gulp-minify-html插件如何同时使用？

Question

问题描述

gulp-html-replace和gulp-minify-html无法先后执行。

问题出现的环境背景及自己尝试过哪些方法

我目前遇到的问题是：
目前有一个src/index.html文件
1.将公共js和css压缩后生成到dist目录
2.将源码index.html目录中引用的js和css路径替换为压缩后的路径
3.将index.html也进行压缩，并生成到dist目录。

我使用了gulp工具，使用了gulp-html-replace和gulp-minify-html插件。
目前有个笨办法，先替换js和css的路径，生成临时html文件，再将临时html文件压缩。但是使用gulp series时，发现只能执行成功第一个任务，第二个没有执行的原因，估计是因为src和dest是相同的。

相关代码

const { series, parallel, src, dest, pipe } = require('gulp');
const uglify = require('gulp-uglify');
var conact = require('gulp-concat');
//var imgmin = require('gulp-imagemin');
var cleancss = require('gulp-clean-css');
var clean = require('gulp-clean');
var minifyHTML = require('gulp-minify-html');
var util = require('gulp-util');
var htmlreplace = require('gulp-html-replace');

function cls(cb) {
  src('dist').pipe(clean());
  cb();
}

function mergejsapp(cb) {
  src('js/*.js')
    .pipe(conact('app.js'))
    .pipe(uglify({
      mangle: true,
      compress: true
    }))
    .on('error', function(e) {
      util.log(util.colors.red('ERROR'), e.toString());
    })
    .pipe(dest('dist'));
  cb();
}

function mergejslib(cb) {
  src('js/lib/*.js')
    .pipe(conact('vendor.js'))
    .pipe(uglify())
    .pipe(dest('dist'));
  cb();
}

function mergecss (cb) {
  src('css/*.css')
  .pipe(conact('app.css'))
  .pipe(cleancss({
    compatibility: 'ie8'
  }))
  .pipe(dest('dist'));
  cb();
}

function replacehtml (cb) {
  src('index.html')
    .pipe(conact('temp.html'))
    .pipe(htmlreplace({
      'css': 'app.css',
      'js_vendor': 'vendor.js',
      'js_app': 'app.js'
    }))
    .pipe(dest('dist'));
    cb();
}

function minihtml (cb) {
  src('dist/temp.html')
    .pipe(conact('index.html'))
    .pipe(minifyHTML())
    .pipe(dest('dist'));
    src('dist/temp.html')
    .pipe(clean());
    cb();
}

exports.clean = series(cls);
exports.js = parallel(mergejslib, mergejsapp);
exports.css = series(mergecss);
exports.html = series(replacehtml);

你期待的结果是什么？实际看到的错误信息又是什么？

有没有办法能让这两个插件配合执行，达到先替换，再压缩的目的？

Answer 1

刚又试了一下，发现好像搞定了， 只需在一个function里面，在htmlReplace()后面紧跟着增加一个

.pipe(minifyHTML())

就可以了。

最终代码：

var htmlreplace = require('gulp-html-replace');
var minifyHTML = require('gulp-minify-html');

function replacehtml (cb) {
  src('index.html')
    .pipe(htmlreplace({
      'css': 'app.css',
      'js_vendor': 'vendor.js',
      'js_app': 'app.js'
    }))
    .pipe(minifyHTML())
    .pipe(dest('dist'));
    cb();
}

exports.html = series(replacehtml);