I have created a gulpfile.js file for a project I'm building. When I try to run it, I get this error.
[18:29:03] Using gulpfile ~\Documents\codeprojects\antenna\gulpfile.js
[18:29:03] Starting 'default'...
[18:29:03] Starting 'sass'...
[18:29:03] The following tasks did not complete: default, sass
[18:29:03] Did you forget to signal async completion?
Here is my gulpfile.js code
var gulp = require('gulp');
var sass = require('gulp-sass');
var plumber = require('gulp-plumber');
gulp.task('sass', function() {
gulp.src('public/stylesheets/style.scss')
.pipe(plumber())
.pipe(sass())
.pipe(gulp.dest('public/stylesheets'));
});
gulp.task('watch', function() {
gulp.watch('public/stylesheets/*.scss', ['sass']);
});
gulp.task('default', gulp.series('sass', 'watch'));
gulp.task('sass', function() {
return gulp.src('public/stylesheets/style.scss') // return added here
.pipe(plumber())
.pipe(sass())
.pipe(gulp.dest('public/stylesheets'));
});
// the return above will suffice to "signal async completion"
gulp.task('watch', function() {
// gulp.watch('public/stylesheets/*.scss', ['sass']); // old gulp v3 synatx
gulp.watch('public/stylesheets/*.scss', gulp.series('sass')); // v4 syntax
});
Also, you will want to switch to the plugin gulp-dart-sass instead of gulp-sass. It supports more recent features like #use for example.
Related
I'm trying to convert my gulp 3 file to gulp 4 after upgrading to Node v12, and I'm still erroring out even after reading tutorials/examples. I'm getting the AssertionError [ERR_ASSERTION]: Task never defined: sass error
My gulpfile.js file:
const gulp = require('gulp');
const browserSync = require('browser-sync').create();
const sass = require('gulp-sass');
// Compile Sass & Inject Into Browser
gulp.task('sass', gulp.series('sass'), function() {
return gulp.src(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'])
.pipe(sass())
.pipe(gulp.dest("src/css"))
.pipe(browserSync.stream());
});
// Move JS Files to src/js
gulp.task('js', gulp.series(['js']), function() {
return gulp.src(['node_modules/bootstrap/dist/js/bootstrap.min.js', 'node_modules/jquery/dist/jquery.min.js','node_modules/popper.js/dist/umd/popper.min.js'])
.pipe(gulp.dest("src/js"))
.pipe(browserSync.stream());
});
// Watch Sass & Serve
gulp.task('serve', gulp.series(['sass']), function() {
browserSync.init({
server: "./src"
});
gulp.watch(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'], gulp.series('sass'));
gulp.watch("src/*.html").on('change', browserSync.reload);
});
// Move Fonts to src/fonts
gulp.task('fonts', gulp.series(['fonts']), function() {
return gulp.src('node_modules/font-awesome/fonts/*')
.pipe(gulp.dest('src/fonts'))
})
// Move Font Awesome CSS to src/css
gulp.task('fa', gulp.series(['fa']), function() {
return gulp.src('node_modules/font-awesome/css/font-awesome.min.css')
.pipe(gulp.dest('src/css'))
})
gulp.task('default', ['js','serve', 'fa', 'fonts']);
Any help is greatly appreciated, thanks!
To start this form is incorrect:
gulp.task('sass', gulp.series('sass'), function() {
That calls the 'sass' at the beginning of the 'sass' task itself. It would presumably cause an infinite loop. I suspect it is the cause of your error because you are calling the 'sass' task before it has been completely defined.
gulp.task takes only two arguments: the name and one function, so this is correct:
gulp.task('sass', function() {
so make that change to all your tasks except:
gulp.task('serve', gulp.series(['sass']), function() {
where you might want to run the 'sass' task before starting the server. But you can still only have two arguments to gulp.task so try
gulp.task('serve', gulp.series('sass', function() {
Finally, this line
gulp.task('default', ['js','serve', 'fa', 'fonts']);
needs a gulp.series to work properly in gulp v4 so try
gulp.task('default', gulp.series('js','serve', 'fa', 'fonts'));
Once you make all those changes, see if you get any other errors.
Ihave 2 problems with gulp sass watch
1- when i save my sass file gulp create extra css folder and i already have one
2- gulp watch is only watching for my style.scss and not the other files inside the other folders
My project structure
assets
css
style.css
sass
1-basics
_base.scss
_colors.scss
2-layout
_grid.scss
_header.scss
style.scss
index.html
gulp
const gulp = require('gulp');
const watch = require('gulp-watch');
const sass = require('gulp-sass');
const bs = require('browser-sync').create();
gulp.task('browser-sync', ['sass'], function() {
bs.init({
server: {
baseDir: "./"
}
});
});
gulp.task('sass', function () {
return gulp.src('assets/sass/**/*style.scss')
.pipe(sass())
.pipe(gulp.dest('./assets/css'))
.pipe(bs.reload({stream: true}));
});
gulp.task('watch', ['browser-sync'], function () {
gulp.watch("assets/sass/**/*style.scss", ['sass']);
gulp.watch("*.html").on('change', bs.reload);
});
I modified a few parts of your code, see the comments:
const gulp = require('gulp');
// you are not using the following require, gulp.watch is not the watch plugin below
// it is a function of the gulp object required above
// const watch = require('gulp-watch');
const sass = require('gulp-sass');
const bs = require('browser-sync').create();
gulp.task('browser-sync', ['sass'], function() {
bs.init({
server: {
baseDir: "./"
}
});
// note I moved the watch tasks to within the browser-sync task
// and changed the sass watch glob below
// so it watches both the partials and style.scss
gulp.watch("assets/sass/**/*.scss", ['sass']);
gulp.watch("*.html").on('change', bs.reload);
});
gulp.task('sass', function () {
// this appears to be the correct path to your style.scss file
return gulp.src('assets/style.scss')
.pipe(sass())
// with the change to the gulp.src above, now the gulp.dest is correct
// before you had a globstar ** and that effects the base directory
// that will be used below. Without the globstar it is a little easier
.pipe(gulp.dest('./assets/css'))
.pipe(bs.reload({stream: true}));
});
// moving the watch tasks now allows this simple default task
gulp.task('default', ['browser-sync']));
// below not needed now
//gulp.task('watch', ['browser-sync'], function () {
//gulp.watch("assets/sass/**/*style.scss", ['sass']);
//gulp.watch("*.html").on('change', bs.reload);
//});
first time I'm using browser sync with gulp, this is my project structure:
-root
-assets
-img
-src
-css
-js
-scss
index.html
gulpfile.js
package.json
and this is the gulpfile.js:
const gulp = require('gulp');
const browserSync = require('browser-sync').create();
const sass = require('gulp-sass');
gulp.task('sass', function() {
return gulp.src("./src/scss/*.scss")
.pipe(sass())
.pipe(gulp.dest("./src/css"))
.pipe(browserSync.stream());
});
// Static Server + watching scss/html files
gulp.task('serve', gulp.series('sass'), () => {
browserSync.init({
server: "./src"
});
gulp.watch("./src/scss/*.scss", ['sass']);
gulp.watch("./src/*.html").on('change', browserSync.reload({stream:true}));
});
// Compile sass into CSS & auto-inject into browsers
gulp.task('default', gulp.series('serve'));
I take the code by the browser sync docs here and modified a bit, but when I type 'gulp' on the console, I get this:
[22:24:59] Starting 'default'...
[22:24:59] Starting 'serve'...
[22:24:59] Starting 'sass'...
[22:24:59] Finished 'sass' after 40 ms
[22:24:59] Finished 'serve' after 43 ms
[22:24:59] Finished 'default' after
Probably I missed something, shouldn't browser sync run indefinitely?
thanks
ok now seems I solved:
const gulp = require('gulp');
const browserSync = require('browser-sync').create();
const sass = require('gulp-sass');
gulp.task('sass', function() {
return gulp.src("./src/scss/*.scss")
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest("./src/css"))
.pipe(browserSync.stream());
});
// Static Server + watching scss/html files
gulp.task('serve', function() {
browserSync.init({
injectChanges: true,
server: "./src"
});
gulp.watch("./src/scss/*.scss", gulp.series('sass'));
gulp.watch("./src/*.html").on('change', browserSync.reload);
});
// Compile sass into CSS & auto-inject into browsers
gulp.task('default', gulp.series('serve','sass'));
Hi im trying to get a gulp watch on the go in my gulp.js file. It needs to run my sass and minify it and set to destination folder on watch. Can anybody help please?
var gulp = require('gulp');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var watch = require('gulp-watch');
var htmlmin = require('gulp-html-minifier');
gulp.task('sass', function(){
return gulp.src('scss/styles.scss')
.pipe(sass()) // Converts Sass to CSS with gulp-sass
.pipe(minifyCss())
.pipe(gulp.dest('dest'))
});
gulp.task('minify-css', function() {
return gulp.src('dest/*.css')
.pipe(minifyCss())
.pipe(gulp.dest('dest'));
});
gulp.task('compress', function() {
return gulp.src('lib/*.js')
.pipe(uglify())
.pipe(gulp.dest('dist'));
});
gulp.task('minify-html', function() {
gulp.src('*.html')
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(gulp.dest(''))
});
// Watch Files For Changes
gulp.task('watch', function(){
gulp.watch('scss/*.scss', ['sass']);
// Other watchers
})
// Run all Refinedby Tasks
gulp.task('all', ['sass']);
You need to load the watcher when you call your "all task command".
gulp.task('all', ['sass'], function() {
gulp.watch('scss/*.scss', ['sass']);
});
or
gulp.task('all', ['sass'], function() {
gulp.start('watch');
});
or if you do not want to change your code just add
// Run all Refinedby Tasks
gulp.task('all', ['sass', 'watch']);
Below is my current Gulpfile.js and when I'm attempting to run gulp minify I'm getting the error, "Task 'minify' is not in your gulpfile". However, I'm able to run gulp sass with no issues. I also have each module installed with npm.
module.exports = function(gulp) {
'use strict'
var sass = require('gulp-sass');
var browserSync = require('browser-sync');
var cssnano = require('gulp-cssnano');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
gulp.task('sass', function() {
return gulp.src('app/scss/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('app/css'))
.pipe(browserSync.reload({
stream: true
}))
});
gulp.task('minify', function() {
return gulp.src('app/css/**/*.css')
.pipe(cssnano())
.pipe(concat('style.min.css'))
.pipe(gulp.dest('app/css/min'))
.pipe(browserSync.reload({
stream: true
}))
});
gulp.task('watch', ['browserSync', 'sass', 'cssnano'], function() {
gulp.watch('app/scss/**/*.scss', ['sass']);
gulp.watch('app/*.html', browserSync.reload);
gulp.watch('app/js/**/*.js', browserSync.reload);
});
gulp.task('browserSync', function() {
browserSync({
server: {
baseDir: 'app/'
},
})
})
}
You should not treat the gulpfile.js as a node module and drop the following part
module.exports = function(gulp) {
(don't forget to remove the closing curly (}) at the end of the gulpfile.js)
Then, you should require gulp
var gulp = require('gulp');
That should make it run smoothly.
Why it does run your gulp sass, I don't know. I just created a simple test file in a fresh directory, and it didn't recognise the sass task for me. Maybe you installedgulp, sass or both globally at some point (e.g. earlier project).