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.
Related
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.
I'm new with js, node and all things related.
I'm trying to set up a front end development environment from scratch, using gulp, bower, browser sync, and other plugins.
I'm almost done, it's working in some way, except for a couple of details I can't resolve because I'm not sure if it's something in the code syntax or the order of the functions executed in my gulpfile.js file, or because the plugins are not being used correctly. I have already tried to change the order of them, change some path, etc with no results.
Now I'm experiencing the following issues:
The main.scss needs to be saved two times before see the changes reflected in the browser.
When I run gulp in the console this is what I receive (these errors are new and appeared after a minor change proposed by Poeta in his answer, which helped me a lot.
[16:38:08] Starting 'html'...
[16:38:08] 'html' errored after 41 ms
[16:38:08] ReferenceError: injectFiles is not defined
at Gulp. ([full_path]\gulpfile.js:50:18)
at module.exports ([full_path]\node_modules\orchestrator\lib\runTask.js:34:7)
at Gulp.Orchestrator._runTask ([full_path]\node_modules\orchestrator\index.js:273:3)
at Gulp.Orchestrator._runStep ([full_path]\node_modules\orchestrator\index.js:214:10)
at [full_path]\node_modules\orchestrator\index.js:279:18)
at finish ([full_path]\node_modules\orchestrator\lib\runTask.js:21:8)
at [full_path]\node_modules\orchestrator\lib\runTask.js:52:4
at f ([full_path]\node_modules\once\once.js:17:25)
at DestroyableTransform.onend ([full_path]\node_modules\end-of-stream\index.js:31:18)
at emitNone (events.js:91:20)
This is my gulpfile.js content:
var gulp = require('gulp');
var sass = require('gulp-sass');
var inject = require('gulp-inject');
var wiredep = require('wiredep').stream;
var plumber = require('gulp-plumber');
var imagemin = require('gulp-imagemin');
var browserSync = require('browser-sync');
var uglify = require('gulp-uglify');
gulp.task('styles', function(){
var injectAppFiles = gulp.src(['!src/styles/main.scss', 'src/styles/*.scss'], {read: false});
var injectGlobalFiles = gulp.src('src/global/*.scss', {read: false});
function transformFilepath(filepath) {
return '#import "' + filepath + '";';
}
var injectAppOptions = {
transform: transformFilepath,
starttag: '// inject:app',
endtag: '// endinject',
addRootSlash: false
};
var injectGlobalOptions = {
transform: transformFilepath,
starttag: '// inject:global',
endtag: '// endinject',
addRootSlash: false
};
return gulp.src('src/styles/main.scss')
.pipe(plumber())
.pipe(wiredep())
.pipe(inject(injectGlobalFiles, injectGlobalOptions))
.pipe(inject(injectAppFiles, injectAppOptions))
.pipe(sass())
.pipe(gulp.dest('dist/styles'));
});
gulp.task('html', ['styles'], function(){
var injectAppFiles = gulp.src('src/styles/*.scss', {read: false});
var injectOptions = {
addRootSlash: false,
ignorePath: ['src', 'dist']
};
return gulp.src('src/index.html')
.pipe(plumber())
.pipe(inject(injectFiles, injectOptions))
.pipe(gulp.dest('dist'));
});
gulp.task('imagemin', function() {
gulp.src('src/assets/*.{jpg,jpeg,png,gif,svg}')
.pipe(plumber())
.pipe(imagemin())
.pipe(gulp.dest('dist/assets'));
});
gulp.task('uglify', function() {
gulp.src('src/js/*.js')
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
});
gulp.task('sass', function() {
gulp.src('src/styles/*.scss')
.pipe(plumber())
.pipe(sass())
.pipe(gulp.dest('dist/styles/'));
});
gulp.task('browser-sync', function() {
browserSync.init(["styles/*.css", "js/*.js","index.html"], {
server: {
baseDir: "dist"
}
});
});
gulp.task('watch', function() {
gulp.watch('src/js/*.js', ['uglify']).on('change', browserSync.reload);
gulp.watch('src/styles/*.scss', ['sass']).on('change', browserSync.reload);
gulp.watch('src/assets/*.{jpg,jpeg,png,gif,svg}', ['imagemin']).on('change', browserSync.reload);
gulp.watch('src/index.html', ['html']).on('change', browserSync.reload);
});
gulp.task('default', ['html', 'sass','imagemin', 'uglify', 'browser-sync', 'watch']);
So, could you please point me in the right direction to get this enviroment set in the proper way?
Update about previous problem: The following was resolved thanks to Bruno Poeta's answer.
Plumber found unhandled error: Error in plugin 'gulp-sass'
Message: src\styles\main.scss
Error: An #import loop has been found: (full_path)/src/styles/main.scss imports src/styles/main.scss on line 526 of src/styles/main.scss
After that message...
[15:11:18] Finished 'styles' after 4.48 s
[15:11:18] Starting 'html'...
[15:11:19] gulp-inject 1 files into index.html.
[15:11:19] Finished 'html' after 1.44 s
[15:11:19] Starting 'default'...
[15:11:19] Finished 'default' after 6.98 μs
[Browsersync] Access URLs:
Local: localhost : 3000
External: 192.168 .0.4 :3000
UI: localhost :3001
UI External: 192.168 .0.4 :3001
[Browsersync] Serving files from: dist
[Browsersync] Watching files...
Note: the line 526 doesn't exist since it is generated by the gulp-inject plugin. These are the last lines in the main.css file, line 520 and 521:
// inject:app
// endinject
The error as you may have noticed is in your styles task. The problem is that you are importing all .scss files, including main.scss itself. That is your loop, right there. Remove main.scss from the files that should be injected, like this:
gulp.task('styles', function(){
var injectAppFiles = gulp.src(['!src/styles/main.scss', 'src/styles/*.scss'], {read: false});
// ...
It should work right now.
I have 2 tasks:
whitelabel - I have a gulp task that copies a given whitelabel project into a folder
sass - compile the sass project within that folder
My problem is that when I put them to run in sequence on my default task the css the files are copied but the sass task doesnt generated the css it is suposed to. But, if i run one task than the other the css file is generated.
What am I missing?
Whitelabel Task
gulp.task('whitelabel', function() {
var argv = yargs.argv;
if (argv.whitelabel){
gulp.src('./whitelabels/_template/**/*')
.pipe(gulp.dest('./assets'));
return gulp.src('./whitelabels/'+ argv.whitelabel +'/**/*')
.pipe(gulp.dest('.'));
} else {
return gulp.src('./whitelabels/_template/**/*')
.pipe(del.sync(['./assets/']))
.pipe(gulp.dest('.'));
}
});
SASS Task
gulp.task('sass', function() {
return gulp.src('assets/styles/style.scss')
.pipe($.sourcemaps.init())
.pipe($.sass({
style: 'expanded'
}))
.on('error', $.notify.onError({
title: 'SASS Failed',
message: 'Error(s) occurred during compile!'
}))
.pipe($.sourcemaps.write())
.pipe(gulp.dest('assets/styles'))
.pipe(reload({
stream: true
}))
.pipe($.notify({
message: 'Styles task complete'
}));
});
Default Task
gulp.task('default', ['config', 'browser-sync', 'whitelabel', 'sass', 'minify-css'], function() {
gulp.watch('whitelabels/_template/assets/styles/*.css', function(file) {
if (file.type === "changed") {
reload(file.path);
}
});
gulp.watch(['*.html', 'app/**/*.html', 'views/*.html'], ['bs-reload']);
gulp.watch(['whitelabels/_template/assets/js/*.js'], ['whitelabel','bs-reload']);
gulp.watch(['app/*.js'], ['bs-reload']);
gulp.watch('whitelabels/_template/assets/styles/**/*.scss', ['whitelabel', 'sass', 'minify-css']);
});
Your original default task does not guarantee that the tasks are run in any specific order - in fact they run in parallel.
Many people use run-sequence https://www.npmjs.com/package/run-sequence to run tasks in a specified order.
Or you could make the 'whitelabel' task a dependency of the sass task by
gulp.task('sass', ['whitelabel'], function() {
I've been trying to improve my standard gulpfile to notify when errors occur when compiling scss and JS.
SCSS Issue
I have it working for SCSS, it throws the error in terminal, makes a noise and doesn't stop gulp running - which is great.
Strangely, my styles used to compile when I ran gulp, but now I need to save one of the .scss files to start gulp (again this is good, but I want it to compile on running gulp).
gulp
[12:07:06] Using gulpfile ~PATH/gulpfile.js
[12:07:06] Starting 'scripts'...
[12:07:06] Starting 'watch'...
[12:07:06] Finished 'watch' after 32 ms
[12:07:07] PATH/js/script-dist.js reloaded.
[12:07:07] Finished 'scripts' after 455 ms
[12:07:07] Starting 'default'...
[12:07:07] Finished 'default' after 15 μs
JS Issue
I'm also trying to notify of errors and exactly where they're coming from in for the JS too (and also prevent gulp from stopping when an error occurs). Tried adding gulp-jshint, but it doesn't seem to be working. It flags the error with a noise etc... but doesn't tell me which of the concatenated files the error is located in. It just says:
Error in plugin 'gulp-uglify'
Message:
[_PATH_]/js/script-dist.js: Unexpected token keyword «var», expected punc «{»
Details:
fileName: [_PATH_]/js/script-dist.js
lineNumber: 3
Here is my gulpfile.js
var gulp = require('gulp');
// --------------------------------------------------------------
// Plugins
// ---------------------------------------------------------------
var concat = require('gulp-concat');
var stripDebug = require('gulp-strip-debug');
var uglify = require('gulp-uglify');
var jshint = require('gulp-jshint');
var include = require('gulp-include');
var sass = require('gulp-sass');
var minifycss = require('gulp-minify-css');
var watch = require('gulp-watch');
var livereload = require('gulp-livereload');
var notify = require('gulp-notify');
var plumber = require('gulp-plumber');
// --------------------------------------------------------------
// JS
// ---------------------------------------------------------------
gulp.task('scripts', function() {
return gulp.src(['./js/script.js'])
.pipe(include())
.pipe(plumber({errorHandler: errorScripts}))
.pipe(concat('script-dist.js'))
//.pipe(stripDebug())
.pipe(jshint())
.pipe(uglify())
.pipe(gulp.dest('./js/'))
.pipe(livereload());
});
// --------------------------------------------------------------
// Styles
// ---------------------------------------------------------------
gulp.task("styles", function(){
return gulp.src("./ui/scss/styles.scss")
.pipe(include())
.pipe(plumber({errorHandler: errorStyles}))
.pipe(sass({style: "compressed", noCache: true}))
.pipe(minifycss())
.pipe(gulp.dest("./ui/css/"))
.pipe(livereload());
});
// --------------------------------------------------------------
// Errors
// ---------------------------------------------------------------
// Styles
function errorStyles(error){
notify.onError({title: "SCSS Error", message: "Check your terminal", sound: "Sosumi"})(error); //Error Notification
console.log(error.toString()); //Prints Error to Console
this.emit("end"); //End function
};
// Scripts
function errorScripts(error){
notify.onError({title: "JS Error", message: "Check your terminal", sound: "Sosumi"})(error); //Error Notification
console.log(error.toString()); //Prints Error to Console
this.emit("end"); //End function
};
// --------------------------------------------------------------
// Watch & Reload
// ---------------------------------------------------------------
gulp.task('watch', function() {
gulp.watch('./ui/scss/*.scss', ['styles']);
gulp.watch(['./js/*.js', '!./js/script-dist.js'], ['scripts']);
});
gulp.task('default', ['styles', 'watch']);
gulp.task('default', ['scripts', 'watch']);
livereload.listen();
(My JS isn't great, so please bear with me )
Update
I've now managed to plumb a JS error through to terminal, but not sure how to report what the error actually is, which file the error is coming from and which line? Obviously need to replace the console.log with some variables but not sure how to achieve this?
gulp.task('scripts', function() {
return gulp.src(['./js/script.js'])
.pipe(include())
.pipe(plumber(
//{errorHandler: errorScripts};
function() {
console.log('There was an issue compiling scripts');
this.emit('end');
}
))
.pipe(concat('script-dist.js'))
//.pipe(stripDebug())
//.pipe(jshint())
.pipe(uglify())
.pipe(gulp.dest('./js/'))
.pipe(livereload());
});
Styles not running answer:
When running you default task, your styles are not compiled, because you do this:
gulp.task('default', ['styles', 'watch']);
gulp.task('default', ['scripts', 'watch']);
Basically what you're doing here is overwriting your default task with a new one.
This can be overcome easily by combining the two:
gulp.task('default', ['scripts', 'styles', 'watch']);
Error notification in console answer:
You should do the jshinting before concatenation, or else you will get error reporing on the concatenated file (script-dist.js).
You should change your gulpfile to:
gulp.task('scripts', function() {
return gulp.src(['./js/script.js'])
.pipe(include())
.pipe(plumber(
//{errorHandler: errorScripts};
function() {
console.log('There was an issue compiling scripts');
this.emit('end');
}
))
.pipe(jshint())
.pipe(concat('script-dist.js'))
.pipe(stripDebug())
.pipe(uglify())
.pipe(gulp.dest('./js/'))
.pipe(livereload());
});
That should do the trick ;-)
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).