Gulp 突然编译极其缓慢

Posted 2023-02-16

【中文标题】Gulp 突然编译极其缓慢

【英文标题】：Gulp suddenly compiling extremely slowly

【发布时间】：2014-08-18 19:42:52

【问题描述】：

最近，不知何故，我为严格的 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

【问题讨论】：

可能重复：***.com/questions/24350024/…

我的所有安装都没有发生这种情况。只有一些。

@thesublimeobject 链接的问题指定了 SCSS 语法。

【参考方案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

【参考方案2】：

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

【讨论】：

在添加 20+ @extend 后遇到同样的问题，没有它运行正常。感谢您指出问题所在。