使用 gruntjs 自动构建 html答案

【问题标题】：automating html build with gruntjs使用 gruntjs 自动构建 html
【发布时间】：2019-10-26 17:48:48
【问题描述】：

我正在开发一个具有以下目录结构的非常标准的网络应用程序

/???? app ⊢ index.html
        ⊢ /???? js
            ⊢ app.min.js
        ⊢ /???? css
            ⊢ app.min.css
        ⊢ /???? dev
            ⊢ index.html
            ⊢ /???? js
                ⊢ app1.js
                ⊢ app2.js
            ⊢ /???? css
                ⊢ app1.css
                ⊢ app2.css

gruntjs 脚本对/dev/js/*.js 和/dev/css/*.css 文件进行丑化、合并和缩小，并将它们写入顶级文件夹，准备好包含在/index.html 中。我不知道如何自动处理/dev/index.html，以便更新所有最新更改并写入根级别/index.html。自动化此过程的最简单方法是什么？

我为gulpjs 找到了https://www.npmjs.com/package/gulp-html-replace，但我无法为gruntjs 找到类似的东西

更新：我决定从 gruntjs 转移到 gulpjs，因为在我看来它的文档记录更好。

Update2：见下方答案

【问题讨论】：

标签： node.js gulp gruntjs

【解决方案1】：

如果其他人遇到此问题，以下是我使用 gulpjs 解决的方法

const { parallel, src, dest } = require('gulp');

const htmlreplace = require('gulp-html-replace');
const cssmin = require('gulp-cssmin');
const concat = require('gulp-concat');
const terser = require('gulp-terser');

const htmldest = '.';
const cssdest = htmldest + '/css';
const jsdest = htmldest + '/js';

const finalcss = 'app.min.css';
const finaljs = 'app.min.js';

function docss() {
    return src('dev/css/*.css')
        .pipe(cssmin())
        .pipe(concat(finalcss))
        .pipe(dest(cssdest));
}

function dohtml() {
    return src('dev/index.html')
        .pipe(htmlreplace({
            'css': `css/${finalcss}`,
            'js': `js/${finaljs}`
        }))
        .pipe(dest(htmldest));
}

function dojs(){
  return src('dev/js/*.js')
    .pipe(terser())
    .pipe(concat(finaljs))
    .pipe(dest(jsdest));
}

exports.default = parallel(docss, dohtml, dojs);

【讨论】：