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!
Related
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've come from Grunt to Gulp. Good so far but i can't seem to get the Sass errors to show on the site. Curently it stops the whole gulp task and i only get an error in Terminal
With Grunt the errors appreared immediately on the local site in a css content property. I liked this much better, much easier to use. Any ideas? Thanks.
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
gulp.task('serve', ['sass'], function() {
browserSync.init({
proxy:"dummy.com"
});
gulp.watch("craft/web/sass/*.scss", ['sass']);
gulp.watch("craft/templates/*.html").on('change', browserSync.reload);
});
gulp.task('sass', function() {
return gulp.src("craft/web/sass/*.scss")
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest("craft/web/css"))
.pipe(browserSync.stream());
});
gulp.task('default', ['serve']);
There are other questions on stackoverflow about this topic, but not the one I was hoping for.
Here is a simplified version of my gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('css', function() {
gulp.src('site/scss/style.scss')
.pipe(sass())
.pipe(gulp.dest('assets/css'))
});
gulp.task('watch', function() {
gulp.watch('site/scss/**/*.scss', ['css']);
});
I can do this successfully:
gulp watch
Now I want to be able to do something like this in my terminal command line:
gulp watch my-domain-name
or
gulp watch my-other-domain
My gulpfile would in my mind look something like this:
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('css', function(name) {
gulp.src('site/scss/style.scss')
.pipe(sass())
.pipe(gulp.dest('assets/css'))
});
gulp.task('watch', function(name) {
gulp.watch('site/scss/**/*.scss', ['css', name]);
});
I try to send name around as a variable of my watch task. In my case it would be my-domain-name or my-other-domain depending on what I write in my terminal.
How can I send a parameter from the terminal to the watch task and then over to the css task?
There are a number of sources for passing parameters from the command line to gulp. See:
https://www.sitepoint.com/pass-parameters-gulp-tasks/
https://github.com/gulpjs/gulp/blob/master/docs/recipes/pass-arguments-from-cli.md
The official recipe uses
minimist an extremely popular package.
So with these approaches you would not be passing the command line args directly to the watch task, but rather to an object that can be accessed by any task.
And it look like gulp-param may do exactly what you want, directly injecting command line args into each task's callback function.
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:
Here is my gulpfile.
var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var babel = require("gulp-babel");
// Gulp Sass Task
gulp.task('sass', function () {
console.log('called');
// gulp.src locates the source files for the process.
// This globbing function tells gulp to use all files
// ending with .scss or .sass within the scss folder.
gulp.src("scss/*.scss")
// Converts Sass into CSS with Gulp Sass
.pipe(sass().on('error', sass.logError))
// Outputs CSS files in the css folder
.pipe(gulp.dest("css"));
});
// Watch scss folder for changes
gulp.task('watch', function() {
// Watches the scss folder for all .scss and .sass files
// If any file changes, run the sass task
gulp.watch('./scss/**/*.{scss,sass}', ['sass'])
});
gulp.task("transpile", function () {
return gulp.src("js/*.js")
.pipe(babel())
.pipe(gulp.dest("./compile"));
});
// Creating a default task
gulp.task('build', ['sass', 'transpile']);
gulp sass runs successfully but does not create any css folder which I am expecting. Also when I run the sass manually,
sass --trace _picker.scss:css/_picker.css
I see the css being compiled properly. Not sure what is going wrong with gulpfile. Any help would be really appreciated.