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

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

мой gulpfile.Яш компилирует все .меньше, minifies и concattenates все CSS в ./ dist / all.минута.в CSS

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

31
concatenation gulp gulp-less minify

3 ответов

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

добавить глоток-впрыснуть проект:

npm i --save-dev gulp-inject

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

  • построить/
  • src/
      .HTML-код
  • меньше/
    • main.меньше
  • 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

50

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

Шаблон Веб-Приложения - HTML5 шаблон интерфейсного веб-приложения расширен с помощью меньше таблицы стилей и залпом.js построить систему.

4

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

.HTML-код

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

стили.в CSS

body {
    background: red;
}

Gulpfile.js

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

dist / index.HTML-код

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