Gulp.js启动了Sass任务但没有完成。

Question

我的gulpfile.js

var gulp = require('gulp');

// plugins
var sass = require('gulp-sass');
var minifycss = require('gulp-minify-css');

// compile sass
gulp.task('sass', function() {
    return gulp.src('static/css/scss/main.scss')
        .pipe(sass())
        .pipe(minifycss())
        .pipe(gulp.dest('/static/css/main.css'));
});

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

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

当我运行gulp时，会得到以下输出：

[gulp] Using gulpfile /var/www/example/gulpfile.js
[gulp] Starting 'watch'...
[gulp] Finished 'watch' after 21 ms
[gulp] Starting 'default'...
[gulp] Finished 'default' after 23 μs

当我保存main.scss文件时，它会输出:

[gulp] Starting 'sass'...

在哪个步骤它就卡住了，永远无法完成。我做错了什么？

- xylar

Answer 1

在sass任务中的return语句似乎导致它出错了。我更新了我的gulpfile.js如下，以使其正常工作：

var gulp = require('gulp');

// plugins
var sass = require('gulp-sass');
var minifycss = require('gulp-minify-css');

// compile sass
gulp.task('sass', function() {
    gulp.src('static/css/scss/main.scss')
        .pipe(sass())
        .pipe(minifycss())
        .pipe(gulp.dest('/static/css'));
});

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

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

- xylar

---

我注意到同样的事情，但移除返回语句会让 gulp 不知道流的存在，也就是说这只是去掉了等待时间，但任务仍然不会被执行。 - Benja

与你相反，我不得不在我的compile_scss任务中加入那个return，然后它就起作用了！在此之前，我的compile_scss任务从未完成过，并且在第一次调用后一直挂起。感谢您分享经验，给了我解决问题的思路！ :) - Mahdieh Shavandi

Answer 2

如果有其他人遇到了这个问题，我成功地解决了它，方法是移除循环导入。

例如...

之前的代码：

file1.scss
@import 'file2';

file2.scss
@import 'file1';

之后：

file1.scss
<removed import>

file2.scss
@import 'file1';

实际上我并不需要循环依赖，只是在所有的scss文件顶部复制/粘贴依赖关系。请注意，如果您的文件确实需要相互导入，那么您需要重新设计文件结构，避免循环依赖。

- Hanna

Answer 3

我的sass编译失败，gulp进程挂起并占用了我的处理器，原因是我在.scss文件中有一个旧的引用，但我已经删除了该文件。从未出现过任何输出来进行投诉-这很难跟踪-我很幸运。

- somedirection