Есть ли способ переписать HTML-код для использования gulp -minified CSS

Я борюсь со следующим:

Мой gulpfile.js компилирует все .less, уменьшает его и объединяет все CSS в. /dist/all.min.css

Есть ли способ переписать HTML файл, удалить все теги стиля и поместить только один тег стиля в него, загружая миниатюрный CSS?

Ответы

Ответ 1

Лучший способ справиться с этим - использовать один из инжекторов HTML из get-go. До сих пор я использую gulp-inject.

Добавьте gulp-inject в свой проект:

npm i --save-dev gulp-inject

Предполагая, что у вас есть макет папки, подобный этому:

  • сборки /
  • SRC/
    • index.html
    • меньше /
      • main.less
    • JS/
      • app.js

Ваш HTML должен включать это, где вы хотите, чтобы файлы CSS или JS были добавлены, либо голова для обоих, либо голова для CSS и непосредственно перед телом для ваших JS файлов:

<!-- inject:css -->
<!-- any *.css files among your sources will go here as: <link rel="stylesheet" href="FILE"> -->
<!-- endinject -->

<!-- inject:js -->
<!-- any *.js files among your sources will go here as: <script src="FILE"></script> -->
<!-- endinject -->

Затем ваш gulpfile выглядит примерно так:

gulp.task('build-styles', function() {
    // the return is important!
    return gulp.src('src/less/main.less')
            .pipe(less())
            .pipe(gulp.dest('build'));
});


gulp.task('build-js', function() {
    // the return is important if you want proper dependencies!
    return gulp.src('src/js/**/*.js')
            // lint, process, whatever
            .pipe(gulp.dest('build'));
});

gulp.task('build-html', function() {
    // We src all files under build
    return gulp.src('build/**/*.*')
            // and inject them into the HTML
            .pipe(inject('src/index.html', {
                        addRootSlash: false,  // ensures proper relative paths
                        ignorePath: '/build/' // ensures proper relative paths
                    }))
            .pipe(gulp.dest('build'));
});

gulp.task('build', ['build-styles', 'build-js'], function(cb) {
    gulp.run('build-html', cb);
});

gulp.task('default', ['build'], function() {
    gulp.watch('src/**/*.less', function() {
        gulp.run('build-styles');
    });
    gulp.watch(['build/**/*.*','!build/index.html', 'src/index.html'], function() {
        gulp.run('build-html');
    });
});

Это всего лишь приблизительная идея, и вы можете сделать гораздо больше, используя gulp-watch для инкрементных построений, но здесь мы видим, что мы смотрим каталог сборки, чтобы выбрать, когда перестраивать HTML файл, и смотреть каталог src для всего остального.

Примечание:

Так как это получает много upvotes, есть пара других плагинов, которые ссылаются на замену рядом с gulp-inject. Вы можете посмотреть на них и посмотреть, подходит ли один из них, особенно если вы не используете gulp-rev:

Есть также две библиотеки CDN, которые делают аналогичную вещь, но для ресурсов CDN

Ответ 2

Вы хотите переписать его во время сборки? Почему бы не заменить все ссылки CSS одной ссылкой на all.min.css в исходном коде? В любом случае вы можете использовать gulp-replace плагин для поиска и замены строки в ваших файлах во время сборки. Вот еще один примерный пример:

Шаблон для веб-приложений. HTML5. Шаблон веб-приложения с интерфейсом веб-приложений HTML5, расширенный с помощью LESS и Gulp.js построить систему.

Ответ 3

См. также gulp-smoosher. Пример:

index.html

<html>
    <head>
        <!-- smoosh -->
        <link rel='stylesheet' href='styles.css'>
        <!-- endsmoosh -->
    </head>

styles.css

body {
    background: red;
}

Gulpfile.js

gulp.task('default', function () {
    gulp.src('index.html')
        .pipe(smoosher())
        .pipe(gulp.dest('dist'));
});

расстояние /index.html

<html>
    <head>
        <style>body {
            background: red;
        }</style>
    </head>