使用gruntjs自动进行html构建

Question

我正在开发具有以下目录结构的标准Web应用程序

/📁 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。自动化的最简单方法是什么？

我找到了https://www.npmjs.com/package/gulp-html-replace的gulpjs，但是我找不到gruntjs的相似物>

更新：

我决定从gruntjs移至gulpjs，因为据我看来，更好的记录了此文件。

Update2：

参见下面的答案

我正在开发具有以下目录结构的标准Web应用程序/📁app⊢index.html⊢/📁js⊢app.min.js⊢/📁css⊢app.min.css⊢/ ...... >>

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