Gulp 突然编译极其缓慢

Question

最近，不知何故，我为严格的 sass 任务而进行的 gulp 编译时间变得非常慢了。他们现在平均每次编译大约 18-20 秒，这非常慢。我尝试从 ruby​​-sass 切换到 node-sass，但 node-sass 似乎不支持我需要的几乎任何 3.3 sass 语法（特别是映射）。在它们都在毫秒范围内之前；我从不记得他们甚至超过 1s。

这是我的 sass 任务文件：

var gulp         = require('gulp');
var sass         = require('gulp-ruby-sass');
var autoprefixer = require('gulp-autoprefixer');
var minifycss    = require('gulp-minify-css');
var notify       = require('gulp-notify');
var rename       = require('gulp-rename');
var handleErrors = require('../util/handleErrors');
var browserSync  = require('browser-sync');

gulp.task('styl', function() {
    return gulp.src('styl/src/screen.scss')
        .pipe(sass({sourcemap: false, style: 'compact'}))
        .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
        .pipe(gulp.dest('styl/bld'))
        .pipe(rename({suffix: '.min'}))
        .pipe(minifycss())
        .pipe(gulp.dest('../bld'))
        .pipe(notify({ message: 'Styles task complete' }))
        .pipe(browserSync.reload({ stream: true, notify: false }))
        .on('error', handleErrors);
});

这是最近的一次 gulp 运行：

[11:56:22] Starting 'setWatch'...
[11:56:22] Finished 'setWatch' after 44 μs
[11:56:22] Starting 'browserify'...
[11:56:22] Running 'bundle'...
[11:56:22] Starting 'uglify'...
[11:56:22] Finished 'uglify' after 11 ms
[11:56:22] Starting 'styl'...
[11:56:24] Finished 'bundle' in 1.76 s
[11:56:24] Finished 'browserify' after 1.76 s
[11:56:38] Finished 'styl' after 16 s
[11:56:38] Starting 'build'...
[11:56:38] Finished 'build' after 15 μs
[11:56:38] Starting 'browserSync'...
[11:56:38] Finished 'browserSync' after 6.28 ms
[11:56:38] Starting 'watch'...
[11:56:38] Finished 'watch' after 46 ms
[11:56:38] Starting 'default'...
[11:56:38] Finished 'default' after 32 μs
[BS] Proxy running. Use this URL: http://10.0.1.6:3002
[11:56:45] Starting 'styl'...
[BS] File Changed: screen.min.css
[BS] Injecting file into all connected browsers...
[11:57:05] Finished 'styl' after 20 s

Answer 1

这个问题的答案与 Gulp 无关，而是与链接到 https://github.com/sass/sass/issues/1019 的 cmets 中可能的重复项有关。

我通过从 Susy 2.x 切换回 Susy 1.x 暂时解决了这个问题。根据 Kaij 在上面引用的链接中的评论，基本上每次在 Susy 中使用 span() 都绝对会浪费编译时间：切换回 Susy 1.x 使我从 ~24s 编译时间缩短到 ~4s 编译时间。我不确定这个问题是否与其他框架相关，但我认为可能是这样。

编辑：有关此问题的更多信息，特定于 Susy：https://github.com/ericam/susy/issues/325#issuecomment-47670013

Answer 2

我在使用 node-sass 和 ember-cli 时也遇到了同样的问题。真正扼杀我们编译时间的是@extends 指令的任何使用。它们每个都为我们的编译时间增加了大约 10 秒。