Gulp.js starts the sass task, but does not finish

Question

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

When I run gulp , I get the following output:

 [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 

Then, when I save the main.scss file, it outputs:

 [gulp] Starting 'sass'... 

At this moment, it just hangs and never ends. What am I doing wrong?

Answer 1

Returning inside the sass task seemed to break it, updated my gulpfile.js as follows to make it work:

 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

For everyone who has this problem, I managed to fix it by deleting the cyclic import.

For example...

Before:

 file1.scss @import 'file2'; file2.scss @import 'file1'; 

After:

 file1.scss <removed import> file2.scss @import 'file1'; 

I do not need a circular dependency, I just copied / pasted the dependencies to the tops of all my scss files. Note that if your files really need to import each other, you will need to either reorganize your files in such a way as to avoid circular dependencies.

Answer 3

The reason my sass compilation did not work and the gulp process hung and the ping of my processor was because I had an old link in my .scss file, but I deleted the file. There was never a way out that complained - it was hard to track - I was lucky.

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