I'm trying to run sever and I get this assertion error. I've uninstalled node and NPM and reinstalled again also I tried many steps and suggested solutions here but it doesn't fit with my problem.
AssertionError [ERR_ASSERTION]: Task never defined: node_modules/scss/bootstrap.scss
at getFunction (C:\Users\Saviour\Desktop\Portfolio\Bootstrap\Project1\node_modules\undertaker\lib\helpers\normalizeArgs.js:15:5)
at map (C:\Users\Saviour\Desktop\Portfolio\Bootstrap\Project1\node_modules\arr-map\index.js:20:14)
at normalizeArgs (C:\Users\Saviour\Desktop\Portfolio\Bootstrap\Project1\node_modules\undertaker\lib\helpers\normalizeArgs.js:22:10)
at Gulp.series (C:\Users\Saviour\Desktop\Portfolio\Bootstrap\Project1\node_modules\undertaker\lib\series.js:13:14)
at C:\Users\Saviour\Desktop\Portfolio\Bootstrap\Project1\gulpfile.js:7:26
at sass (C:\Users\Saviour\Desktop\Portfolio\Bootstrap\Project1\node_modules\undertaker\lib\set-task.js:13:15)
at bound (domain.js:422:14)
at runBound (domain.js:435:12)
at asyncRunner (C:\Users\Saviour\Desktop\Portfolio\Bootstrap\Project1\node_modules\async-done\index.js:55:18)
at processTicksAndRejections (internal/process/task_queues.js:75:11)
This's my code
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
gulp.task('sass', async function () {
return gulp.src(gulp.series('node_modules/scss/bootstrap.scss', 'src/scss/*.scss'))
.pipe(sass())
.pipe(gulp.dest("src/css"))
.pipe(browserSync.stream());
});
gulp.task('js', async function () {
return gulp.src(gulp.series('node_modules/bootstrap/dist/js/bootstrap.min.js', 'node_modules/jquery/dist/jquery.min.js', 'node_modules/popper.js/dist/popper.min.js'))
.pipe(gulp.dest('src/js'))
.pipe(browserSync.stream());
});
gulp.task('serve', async function () {
browserSync.init({
server: "./src",
});
gulp.watch(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'], 'sass');
gulp.watch("src/*.html").on('change', browserSync.reload);
})
gulp.task('default', gulp.series(gulp.parallel('sass', 'js', 'serve')));
The error is coming from the sass and js tasks. You are wrapping your sources in gulp.series. So Gulp is trying to run your sources as tasks.
They just need to be in an array [] like in the watch task.
Just change:
gulp.task('sass', async function () {
return gulp.src(gulp.series('node_modules/scss/bootstrap.scss', 'src/scss/*.scss'))
to:
gulp.task('sass', async function () {
return gulp.src(['node_modules/scss/bootstrap.scss', 'src/scss/*.scss'])
and then the same format in the js task
The second error (coming from your watch task) is because you need to wrap the tasks you are watching in either series or parallel. Even when theres only one task So change:
gulp.watch(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'], 'sass');
to:
gulp.watch(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'], gulp.series('sass'));
Related
I have updated Gulp 3.9 to 4 and my gulp task is now returning an Assertion Error: Task function must be specified.
Can anyone show how I could refactor the code below to work with Gulp 4?
Thanks in advance!
gulp.task('default', ['sass', 'browser-sync'], function () {
gulp.watch("./scss/**/*.scss", ['sass']);
gulp.watch("./js/main.js", ['javascript']);
});
gulp.task('default', gulp.series('sass', 'browser-sync', function () {
gulp.watch("./scss/**/*.scss", 'sass');
gulp.watch("./js/main.js", 'javascript');
}));
should do it. The function signature has changed (from 3 to 2 parameters) and you need to use gulp.series.
See Convert gulp watch in gulp#3.9.1 to gulp#4
// compile scss into css
function style() {
// 1. where is my scss file
return gulp.src('./app/scss/**/*.scss')
// 2. pass that file through sass compiler
.pipe(sass().on('error', sass.logError))
// 3. where do I save the compiled CSS?
.pipe(gulp.dest('./app/css'))
// 4. stream changes to all browser
.pipe(browserSync.stream());
}
function watch() {
browserSync.init({
server: {
baseDir: './app/'
}
});
gulp.watch('./app/scss/**/*.scss', style);
gulp.watch('./app/**/*.html').on('change', browserSync.reload);
gulp.watch('./app/js/**/*.js').on('change', browserSync.reload);
}
exports.style = style;
exports.watch = watch;
Faced same issue and I found this code in this youtube video
Hope this helps.
Have a super simple gulp file where I want to run some basic gulp tasks in sequence one after the other.
I can't seem to get this running in Gulp v4. Had something similar in Gulp v3 using run-sequence instead of gulp.series()
const gulp = require("gulp");
const clean = require('gulp-clean');
gulp.task('clean-app', async () => {
return (gulp.src('./dist/app', {read: true, allowEmpty: true})
.pipe(clean()));
});
gulp.task('clean-tests', async () => {
return ( gulp.src('./dist/tests', {read: true, allowEmpty: true})
.pipe(clean()));
});
gulp.task('all-tasks', gulp.series('clean-app', 'clean-tests'));
The individual gulp tasks clean-app and clean-tests run fine individually.
However, when I use gulp all-tasks i get the below error
gulp all-tasks
[17:50:51] Using gulpfile ~\IdeaProjects\my-app\gulpfile.js
[17:50:51] Starting 'all-tasks'...
[17:50:51] Starting 'clean-app'...
[17:50:51] Finished 'clean-app' after 10 ms
[17:50:51] The following tasks did not complete: all-tasks
[17:50:51] Did you forget to signal async completion?
Both clean-app and clean-tests return streams which I thought would be sufficient.
Have tried using gulp4-run-sequence but i get the same error.
Want to be able to run gulp all-tasks such that clean-tests is executed after clean-app has completed successfully.
depending on the official documents here try to run cb() in your tasks like that
const gulp = require("gulp");
const clean = require('gulp-clean');
gulp.task('clean-app', (cb) => {
gulp.src('./dist/app', {read: true, allowEmpty: true}).pipe(clean());
cb();
});
gulp.task('clean-tests', (cb) => {
gulp.src('./dist/tests', {read: true, allowEmpty: true}).pipe(clean());
cb();
});
gulp.task('all-tasks', gulp.series('clean-app', 'clean-tests'));
I know this can be duplicate question, but i have almost spend 1 day to make it working.
so, i have gulpfile.js like here
const gulp = require('gulp');
const javascriptObfuscator = require('gulp-javascript-obfuscator');
gulp.task("javascriptObfuscator", (done) => {
gulp.src('./js/**/*.js', {base: './'})
.pipe(javascriptObfuscator())
.pipe(gulp.dest('./'))
done();
});
so when i'm running this file in azure pipeline under "Gulp task", facing this error "did you forget to signal async completion?"
try to add return before gulp.src as following:
const gulp = require('gulp');
const javascriptObfuscator = require('gulp-javascript-obfuscator');
gulp.task("javascriptObfuscator", (done) => {
return gulp.src('./js/**/*.js', {base: './'})
.pipe(javascriptObfuscator())
.pipe(gulp.dest('./'))
done();
});
will help if you watch:
title:How to Upgrade to Gulp 4
link: https://www.youtube.com/watch?v=2HpNiyimo8E
Assertion Error using Gulp:
$ gulp scripts
assert.js:42
throw new errors.AssertionError({
^
AssertionError [ERR_ASSERTION]: Task function must be specified
at Gulp.set [as _setTask] (/Users/ThedWord/Documents/my-project/node_modules/undertaker/lib/set-task.js:10:3)
at Gulp.task (/Users/ThedWord/Documents/my-proje
ct/node_modules/undertaker/lib/task.js:13:8)
at Object.<anonymous> (/Users/ThedWord/Documents/my-project/gulpfile.js:10:6)
at Module._compile (module.js:660:30)
at Object.Module._extensions..js (module.js:671:
at Module.load (module.js:573:32)
at tryModuleLoad (module.js:513:12)
at Function.Module._load (module.js:505:3)
at Module.require (module.js:604:17)
at require (internal/module.js:11:18)
/*eslint-env node */
const gulp = require('gulp');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const browserSync = require('browser-sync').create();
const eslint = require('gulp-eslint');
const jasmine = require('gulp-jasmine-phantom');
const concat = require('gulp-concat');
gulp.task('default', ['copy-html', 'copy-images', 'styles', 'lint'], function() {
gulp.watch('sass/**/*.scss', ['styles']);
gulp.watch('js/**/*.js', ['lint']);
gulp.watch('/index.html', ['copy-html']);
gulp.watch('./build/index.html').on('change', browserSync.reload);
});
browserSync.init({
server: './dist'
});
gulp.task('scripts', function(){
gulp.src('js/**/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('dist/js'));
});
gulp.task('scripts-dist', function(){
gulp.src('js/**/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('dist/js'));
});
gulp.task('copy-html', function() {
gulp.src('./index.html')
.pipe(gulp.dest('./dist'));
});
gulp.task('copy-images', function(){
gulp.src('img/*')
.pipe(gulp.dest('dist/img'));
});
gulp.task('styles', function() {
gulp.src('sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer({
browsers: ['last 2 versions']
}))
.pipe(gulp.dest('dist/css'))
.pipe(browserSync.stream());
});
gulp.task('lint', function () {
return gulp.src(['js/**/*.js'])
// eslint() attaches the lint output to the eslint property
// of the file object so it can be used by other modules.
.pipe(eslint())
// eslint.format() outputs the lint results to the console.
// Alternatively use eslint.formatEach() (see Docs).
.pipe(eslint.format())
// To have the process exit with an error code (1) on
// lint error, return the stream and pipe to failOnError last.
.pipe(eslint.failOnError());
});
gulp.task('dist', [
'copy-html',
'copy-images',
'styles',
'lint',
'scripts-dist'
]);
gulp.task('tests', function () {
gulp.src('tests/spec/extraSpec.js')
.pipe(jasmine({
integration: true,
vendor: 'js/**/*.js'
}));
});
The problem you are encountering is that you are running gulp v4.0 using gulp 3 syntax. The AssertionError: Task function must be specified error comes from the fact that gulp.task has changed and the 3 parameters signature was removed. In short, your task below will need to be changed to remove the [] parameter:
gulp.task('default', ['copy-html', 'copy-images', 'styles', 'lint'], function() {
gulp.watch('sass/**/*.scss', ['styles']);
gulp.watch('js/**/*.js', ['lint']);
gulp.watch('/index.html', ['copy-html']);
gulp.watch('./build/index.html').on('change', browserSync.reload);
});
This article will help you migrate to gulp 4 syntax.
If you'd like a simple fix to your problem, without having to make changes to your gulpfile.js, run the following command to downgrade your version of gulp from version 4 to 3.9.1:
npm install gulp#3.9.1 --save
Assuming all goes well you should no longer see the Assertion error.
I'm getting this error when trying to run my gulp command. It worked fine last week. Any reason why I'm getting the following error now?
TypeError: Object #<Readable> has no method 'write'
This is what the JS task looks like.
// JS task
gulp.task('js', function () {
var browserified = transform(function(filename) {
var b = browserify(filename);
return b.bundle();
});
return gulp.src('./src/js/*.js')
.pipe(browserified)
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(uglify())
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./Build/js'))
.pipe(reload({stream: true}))
});
Here's a link to the entire gulpfile.js: https://github.com/realph/gulp-zero/blob/master/gulpfile.js
Any help is appreciated. Thanks in advance!
What version of browserify do you have at the moment? Browserify changed recently to not accept inward streams, just creating some. This would be the correct, adapted code:
var source = require('vinyl-source-stream');
var buffer = require('gulp-buffer');
gulp.task('js', function () {
return browserify({entries:['./src/js/main.js']})
.bundle()
.pipe(source('bundle.js'))
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(uglify())
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./Build/js'))
.pipe(reload({stream: true}))
});
Update I changed the filename to a real file. Note that browserify works best if you just have one file there. If you have to create multiple bundles, please refer to this article