Question

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

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

我通常将所有子文件添加到一个中心。接下来用罗盘和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 文件。一行更改需要近2秒。有没有什么办法可以缓存 unchaged scss 子文件，以便每次都不会重新编译？我知道Gulp中有一个选项，使用 gulp-remember 插件来记住编译的未更改的css 文件，然后再连接它们。但是这里我有一个从一个scss文件创建的css文件......

Answer 1

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

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

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

您将罗盘任务更改为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选项，添加源图和其他选项。

优化gulp Sass编译

1 个答案: