I am receiving the error message: "The following tasks did not complete: default, sass. Did you forget to signal async completion?" I am new to Gulp and trying to figure out what the mistake is. I believe it's something with my syntax, but as I am new to Gulp, I can't quite pinpoint it. Below are the contents of my gulpfile. Thank you in advance.
use strict';
var gulp = require('gulp'),
sass = require('gulp-sass'),
watch = require('gulp-watch');
gulp.task('sass', function(){
gulp.src('./assets/sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('../style.css'));
});
gulp.task('default', gulp.series('sass', function() {
return gulp.watch('./assets/sass/**/*.scss', ['sass']);
}));
I'm new to Gulp and was attempting to convert my Sass to CSS via a simple Gulp task.
I've tried the following (return statement):
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var uglifycss = require('gulp-uglifycss');
sass.compiler = require('node-sass');
//Compile Sass to CSS
function sass() {
return gulp.src('./assets/sass/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./assets/css'));
};
and (done)
//Complie Sass to CSS
function sass(done) {
gulp.src('./assets/sass/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./assets/css'))
done();
};
But both return with
[18:38:07] The following tasks did not complete: sass
[18:38:07] Did you forget to signal async completion?
I figured using the return statement or the done parameter would complete the task. I can't figure out why it's telling me the taks can't be completed.
I also have a very similar CSS minify task running (hence the uglify variable) that is working.
Any ideas?
Thanks!
I'm using gulp for a wordpress theme development serve by mamp pro.
Here is my gulpfile.js :
var gulp = require('gulp');
var compass = require('gulp-compass');
var browserSync = require('browser-sync').create();
gulp.task('browserSync', function() {
browserSync.init({
proxy: "http://favre.test",
port:8080
})
});
gulp.task('compass', function() {
return gulp.src('assets/sass/*.scss')
.pipe(compass({
css: './',
sass: 'assets/sass',
image: 'assets/img'
}))
.pipe(gulp.dest('./'))
.pipe(browserSync.reload({
stream: true
}))
});
gulp.task('watch', ['browserSync', 'compass'], function (){
gulp.watch('assets/sass/**/*.scss', ['compass']);
});
As you can see browserSync with a proxy reload css when a *.scss file is changing after compass.
It works fine but firefox tab crashing when css is reloaded. Working on chrome but i was wondering why firefoxis crashing I something wrong in Gulp ?
Thanks for your answers. Don't hesitate to ask me questions if something is not clear. (french guy)
I'm using CodeAnywhere (cloud IDE) and installing gulp. Running 'gulp sass' works fine every time, but when I 'gulp watch' the 'sass' task runs fine the first time. After that it just creates an empty style.css file. I'm following the 'gulp for beginners' post on css-tricks.
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function() {
return gulp.src('src/scss/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('src/css'))
})
gulp.task('watch', function() {
gulp.watch('src/scss/**/*.scss', ['sass']);
})
My file structure is laid out as follows:
Everything is almost working, compass is compiling the CSS and a few other tasks are running to minify, rename, rev etc. The problem is that when a style change occurs LiveReload is reloading the page instead of injecting the style. If I switch back to compass watch then style injection occurs. Is it possible to have style injection with Gulp, Compass and LiveReload? I hope so because if not I will have to run compass watch in 1 terminal and gulp in another which seems a bit clunky. Here is the relevant code from the gulpfile.js
var gulp = require('gulp'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
compass = require('gulp-compass'),
minifyCSS = require('gulp-minify-css'),
rev = require('gulp-rev'),
rename = require('gulp-rename'),
clean = require('gulp-clean'),
lr = require('tiny-lr'),
server = lr(),
livereload = require('gulp-livereload');
gulp.task('compass', function() {
gulp.src('./static/scss/*.scss')
.pipe(compass({
css: 'static/css',
sass: 'static/scss',
image: 'static/images',
font: 'static/fonts',
javascript: 'static/js',
comments: false,
style: 'expanded',
bundle_exec: true,
require: ['wegowise_styles/compass']
}))
.on('error', function(err) {})
.pipe(gulp.dest('./static/css/'))
.pipe(livereload(server))
.pipe(minifyCSS())
.pipe(rename({suffix: '.min'}))
.pipe(rev())
.pipe(gulp.dest('./static/production/'))
.pipe(rev.manifest())
.pipe(rename('css-manifest.json'))
.pipe(gulp.dest('./static/production/'));
});
gulp.task('clean', function() {
return gulp.src(['static/production'], {read: false})
.pipe(clean());
});
gulp.task('watch', function() {
gulp.watch('static/scss/**/*.scss', ['compass']);
gulp.watch('static/js/**/*.js', ['scripts']);
});
gulp.task('default', ['clean', 'watch']);
ps. I am using the LiveReload chrome extension
Yes, it is possible. I haven't seem in your code (maybe because you removed the rest of the file) when you start tiny-lr, i.e.:
var gutil = require('gulp-util');
gulp.task('tiny', function(next) {
server.listen(35729, function() {
gutil.log('Server listening on port: ', gutil.colors.magenta(port));
next();
});
});
// add as a dependency in your watch task
gulp.task('watch', ['tiny'], function() {
gulp.watch('static/scss/**/*.scss', ['compass']);
gulp.watch('static/js/**/*.js', ['scripts']);
});
The error might be related to the scripts task as well, so maybe include it in the question so we can take a look. Maybe, finally, there is some other task causing the issue.
In order to be sure, I just created a test here, and created a index.html file inside the static folder, pointing to css/file.css.
Created a simple static/scss/file.scss with a body background-color. I've used the same code snippet you provided for the rest of the gulpfile.
Also created a node-static server and served all files under static/ folder.
At the end, is there any other automated task involved in the building process?