gulp压缩后替换html,gulp-html-replace和gulp-minify-html插件如何同时使用？

问题描述

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

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

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