автоматизация сборки HTML с помощью gruntjs - PullRequest
Новая
       97

автоматизация сборки HTML с помощью gruntjs

0 голосов
/ 26 октября 2019

Я занимаюсь разработкой довольно стандартного веб-приложения со следующей структурой каталогов 

/? 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, как мне кажется, лучше задокументировано.

Обновление2: см. Ответ ниже

1 Ответ

0 голосов
/ 26 октября 2019

В случае, если кто-то еще застрял с этой проблемой, вот как я решил ее с помощью 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);
...