Gulp.js bắt đầu nhiệm vụ sass nhưng không hoàn thành

Question

gulpfile.js My

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']); 

Khi tôi chạy gulp tôi nhận được kết quả như sau:

[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 

Sau đó, khi tôi lưu main.scss tập tin của tôi nó kết quả đầu ra:

[gulp] Starting 'sass'... 

Tại thời điểm này, nó chỉ bị treo và không bao giờ kết thúc. Tôi đang làm gì sai?

Answer 1

Sự trở lại bên trong nhiệm vụ sass dường như để phá vỡ nó, cập nhật gulpfile.js của tôi để sau để làm cho nó làm việc:

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']); 

Answer 2

Đối với bất kỳ ai khác có vấn đề này, tôi cố gắng khắc phục điều này bằng cách loại bỏ tròn nhập khẩu.

Ví dụ ...

Trước:

file1.scss 
@import 'file2'; 

file2.scss 
@import 'file1'; 

Sau:

file1.scss 
<removed import> 

file2.scss 
@import 'file1'; 

Tôi không thực sự cần những phụ thuộc vòng tròn, tôi đã chỉ cần sao chép/dán phụ thuộc vào đỉnh của tất cả các tệp scss của tôi. Lưu ý rằng nếu tệp của bạn thực sự cần nhập một tệp khác, bạn cần phải cấu trúc lại các tệp của mình theo cách mà bạn tránh phụ thuộc vòng tròn.

Answer 3

Lý do quá trình biên dịch sass của tôi không hoạt động và quá trình gulp bị treo và ping bộ xử lý của tôi là tôi đã tham chiếu cũ trong tệp .scss nhưng tôi đã xóa tệp. Không bao giờ có bất kỳ đầu ra nào phàn nàn - điều này thật khó để theo dõi - tôi đã may mắn.

@import 'file-that-has-been-removed-but-still-referenced';