css - 优化 gulp Sass 编译

Question

我有下一个情况。我有 core.scss 文件:

@import "fonts";
@import "custom_mixins";
@import "variables";
@import "base";

我通常将所有子文件添加到一个中央文件中。接下来用 compass 和 gulp 编译这个文件:

gulp.task('compass', function() {
    return gulp.src('css/src/core.scss')
        .pipe(compass({
            config_file: './config.rb',
            css: 'css/dist',
            sass: 'css/src'
        }));
});

它工作正常，但我遇到了问题。例如，每次我更改 _variables.scss 中的一行时，此任务都会将所有文件重新编译为 core.css 文件。换一行需要将近 2s。有什么方法可以缓存 未更改的 scss 子文件，这样它们就不会每次都重新编译了吗？我知道 Gulp 中有一个选项可以使用 gulp-remember 插件在连接它们之前记住已编译的未更改的 css 文件。但是这里我有一个从一个 scss 文件创建的 css 文件...

Answer 1

我建议您使用 gulp-sass 而不是 compass 。 Compass 只是一堆 mixin 和函数，您可以自己将它们集成到您的文件中，而无需依赖 compass。 Gulp-sass 比使用 Ruby 的 sass 编译更快，因为它使用了 libsass，C++ 中 Sass 的一个端口。

首先，您需要使用 NPM 或 Yarn 安装 node-sass并在您的 Gulpfile 中调用它。

var gulp = require('gulp');
var sass = require('gulp-sass');

您会将您的 compass 任务更改为 sass 版本:

gulp.task('sass', function() {
  return gulp.src('css/src/core.scss')
    .pipe(sass({
      outputStyle: 'nested'
    }).on('error', sass.logError))
    .pipe(gulp.dest('css/dist')
});

试试吧，你的编译可能会更快。您可以更改 sass 选项、添加源映射和其他选项。