使用 gulp/node/libsass 编译需要 30 多秒

Question

我正在使用 Gulp 和 node-sass 来编译我的 sass。我也在使用 node-neat 和 node-bourbon。但是，当我编译时，需要 30-50 秒！我究竟做错了什么？我不太确定 libsass 如何在 gulp-sass 和 node-sass 中发挥作用，或者 gulp-sass 和 node-sass 之间的区别是什么。在我的 gulpfile.js 中，我尝试了 sass = require('gulp-sass'), 和 sass = require('node-sass'),，但它们给了我相同的结果。另外，我正在使用管道工，如果出现错误，它会停止观看。这是我的 gulpfile.js：

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    bourbon = require('node-bourbon').includePaths;
    neat = require('node-neat').includePaths;
    cache = require('gulp-cache'),
    plumber = require('gulp-plumber'),
    notify = require("gulp-notify"),
    sourcemaps = require('gulp-sourcemaps');

gulp.task('styles', function() {
  return gulp.src('sass/cleverDesign.scss')
    .pipe(plumber())
    .pipe(sourcemaps.init())
    .pipe(sass({
      style: 'expanded',
      includePaths: require('node-bourbon').includePaths,
      includePaths: require('node-neat').includePaths}))
    .pipe(gulp.dest('sass/'))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('sass/' ));
});

// Watch
gulp.task('watch', function() {
  // Watch .scss files
  gulp.watch('sass/**/*.scss', ['styles']);
});

gulp.task('default', ['styles', 'watch']);

Answer 1

libSass 基础 > NodeSass（主节点包装器）> Gulp-Sass（gulp 友好版本）

至于编译时间慢，我会仔细检查您的节点版本，并确保您的 gulp-sass 节点模块是最新版本。一些严重的错误已得到修复。

对于管道工问题，这可以通过在 gulp-sass 配置中添加几行来解决。 errLogToConsole: true, and .pipe(plumber.stop())

 var gulp = require('gulp'),
    sass = require('gulp-sass'),
    bourbon = require('node-bourbon').includePaths;
    neat = require('node-neat').includePaths;
    cache = require('gulp-cache'),
    plumber = require('gulp-plumber'),
    sourcemaps = require('gulp-sourcemaps');


gulp.task('styles', function() {
  return gulp.src('sass/mainScss.scss')
    .pipe(plumber())
    .pipe(sourcemaps.init())
    .pipe(sass({
      style: 'expanded',
      errLogToConsole: true,
      includePaths: require('node-bourbon').includePaths,
      includePaths: require('node-neat').includePaths}))
    .pipe(gulp.dest('sass/'))
    .pipe(sourcemaps.write())
    .pipe(plumber.stop())
    .pipe(gulp.dest('sass/' ))
});

// Default task
gulp.task('default', function() {
    gulp.start('styles');
});

// Watch
gulp.task('watch', function() {
  gulp.watch('sass/**/*.scss', ['styles']);
});