Question

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

我的问题是如何优化配置gulpfile.js来促进这一点。我为“模板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文件 - 一个用于'全局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文件？

如果需要，这里是完整的gulp文件：

    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声明return gulp.src('./**/*.scss', '!**/_*.scss')中使用Globs，它应该抓取每个没有_前缀的文件。即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解决方案

1 个答案: