Gulpfile 关键 CSS 解决方案

Question

我正在使用 Gulp 和 SASS 在本地进行开发，为动态站点（即 CMS 驱动）编译 CSS。我正在尝试配置一个解决方案来编译全局路径与关键路径 CSS。到目前为止最好的想法是将我的主要 scss 文件拆分为特定于站点模板的文件（例如 templateA.scss、templateB.scss 等）然后，我可以输出并缩小离散的 CSS 即一个模板一个模板拉入网站。

我的问题是关于如何优化配置 gulpfile.js 来促进这一点。我为 "template A"（实际上是站点的主页）设置了一个任务。我有 4-5 个额外的模板，这些模板将利用关键 CSS，并且希望获得有关如何最好地添加这些模板的反馈。

这是前面提到的处理主页 SCSS 的任务：

gulp.task('home', function() {
return gulp.src([
    'scss/home.scss'
    ])
    .pipe(sass({
        includePaths: [
            paths.bower + '/foundation-sites/scss'
        ]
    }))
    .pipe(autoprefixer({
        browsers: ['last 2 versions', 'ie >=9']
    }))
    .pipe(concat('home.css'))
    .pipe(gulp.dest(paths.assets + '/styles/crpath-css'))
    .pipe(cleanCSS({compatibility: 'ie8'}))
    .pipe(gulp.dest('assets/styles/crpath-css'))
    .pipe(sync.stream());
 });

和 sass 任务，如您所见，它处理两个 scss 文件——一个用于 'global css'，另一个用于 'home css'。

gulp.task('sass', function() {
return gulp.src('scss/app.scss')
.pipe($.sass({
  includePaths: sassPaths,
  outputStyle: 'expanded'
})
  .on('error', $.sass.logError))
.pipe($.autoprefixer({
  browsers: ['last 2 versions', 'ie >= 9']
}))
.pipe(concat('styles.dev.css'))
.pipe(gulp.dest('assets/styles'));

return gulp.src('scss/home.scss')
.pipe($.sass({
  includePaths: sassPaths
})
  .on('error', $.sass.logError))
.pipe($.autoprefixer({
  browsers: ['last 2 versions', 'ie >= 9']
}))
.pipe(concat('home.css'))
.pipe(gulp.dest('assets/styles/crpath-css'))
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(gulp.dest('assets/styles/crpath-css'));
});

我是否需要创建一个单独的任务来管理（和监视）每个 scss 文件？

如果需要，这里是完整的 gulpfile：

    var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var cleanCSS = require('gulp-clean-css');
var sync = require('browser-sync').create(); // create a browser sync instance.

var paths = {
    'bower': 'bower_components',
    'assets': 'assets'
};

var mypath = {
    'mycss': 'css'
};

gulp.task('styles', function() {
    return gulp.src([
        'scss/app.scss'
        ])
        .pipe(sass({
            includePaths: [
                paths.bower + '/foundation-sites/scss'
            ]
        }))
        .pipe(autoprefixer({
            browsers: ['last 2 versions', 'ie >=9']
        }))
        .pipe(concat('styles.dev.css'))
        .pipe(gulp.dest(paths.assets + '/styles'));
});

gulp.task('home', function() {
    return gulp.src([
        'scss/home.scss'
        ])
        .pipe(sass({
            includePaths: [
                paths.bower + '/foundation-sites/scss'
            ]
        }))
        .pipe(autoprefixer({
            browsers: ['last 2 versions', 'ie >=9']
        }))
        .pipe(concat('home.css'))
        .pipe(gulp.dest(paths.assets + '/styles/crpath-css'))
        .pipe(cleanCSS({compatibility: 'ie8'}))
        .pipe(gulp.dest('assets/styles/crpath-css'))
        .pipe(sync.stream());
});

gulp.task('sass', function() {
    return gulp.src('scss/app.scss')
    .pipe($.sass({
      includePaths: sassPaths,
      outputStyle: 'expanded'
    })
      .on('error', $.sass.logError))
    .pipe($.autoprefixer({
      browsers: ['last 2 versions', 'ie >= 9']
    }))
    .pipe(concat('styles.dev.css'))
    .pipe(gulp.dest('assets/styles'));

    return gulp.src('scss/home.scss')
    .pipe($.sass({
      includePaths: sassPaths
    })
      .on('error', $.sass.logError))
    .pipe($.autoprefixer({
      browsers: ['last 2 versions', 'ie >= 9']
    }))
    .pipe(concat('home.css'))
    .pipe(gulp.dest('assets/styles/crpath-css'))
    .pipe(cleanCSS({compatibility: 'ie8'}))
    .pipe(gulp.dest('assets/styles/crpath-css'));
    });

gulp.task('minify-css', function() {
  return gulp.src('assets/styles/crpath-css/*.css')
    .pipe(cleanCSS({compatibility: 'ie8'}))
    .pipe(gulp.dest('assets/styles/crpath-css'));
});

gulp.task('watch', function() {

  sync.init({
    injectChanges: true,
    proxy: 'localhost/wesleypicotte'
  });

  gulp.watch('scss/**/*.scss', ['styles']);
  gulp.watch('scss/**/*.scss', ['home']);
  gulp.watch('scss/**/*.scss').on('change', sync.reload);
});

gulp.task('default', ['styles', 'home', 'minify-css']);

Answer 1

您可以在 src 声明中使用 Globs return gulp.src('./**/*.scss', '!**/_*.scss')，它应该抓取每个没有前缀 _ 的文件。即 home.scss 和 main.scss 将被编译为 home.css 和 main.css 但 _buttons.scss 仅当包含在另一个文件中时才会被编译。所有文件都将输出到同一目录，因此如果您希望它们以不同的结构结束，您可能需要查看 https://github.com/gulpjs/gulp/blob/master/docs/recipes/running-task-steps-per-folder.md

Gulpfile 关键 CSS 解决方案

Gulpfile Critical CSS Solution

css

sass

gulp

gulp-sass