GUlp - following tasks did not complete - gulp

I'm using gulp 4, and i have the following gulpfile.js:
'use strict';
var gulp = require('gulp'), del = require('del');
gulp.task('copy-fonts', () => {
return gulp.src(['node_modules/ng/resources/fonts/**/*'])
.pipe(gulp.dest('apps/src/assets/fonts'));
});
gulp.task('clean-copy', () => {
del(['apps/src/assets/fonts']);
});
gulp.task('copy-assets', gulp.series(['clean-copy', 'copy-fonts']), (done) => {
console.log("Gulp is running...");
done();
});
When i run this command: gulp copy-assets, i get the below error:
[11:59:06] The following tasks did not complete: copy-assets
[11:59:06] Did you forget to signal async completion?

In this code:
gulp.task('copy-assets', gulp.series(['clean-copy', 'copy-fonts']), (done) => {
console.log("Gulp is running...");
done();
});
the task has three arguments - that is gulp v3 syntax, not gulp 4. So change that to
gulp.task('copy-assets', gulp.series(['clean-copy', 'copy-fonts'], (done) => {
console.log("Gulp is running...");
done();
));
The done return is now within the gulp.series arguments. Also make this change, I think it will be necessary:
gulp.task('clean-copy', (cb) => {
del(['apps/src/assets/fonts'] );
cb();
});

Related

Configuring and running gulp to watch and compile sass

I have configured my gulp file to run certain tasks, and when I run the file I get this error:
AssertionError [ERR_ASSERTION]: Task function must be specified
at Gulp.set [as _setTask]
Here is my code in the gulpfile.js:
'use strict';
var gulp = require('gulp'),
sass = require('gulp-sass'),
browserSync = require('browser-sync');
gulp.task('sass', function () {
return gulp
.src('./css/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css'));
});
gulp.task('sass:watch', function () {
gulp.watch('./css/*.scss', [ 'sass' ]);
});
gulp.task('browser-sync', function () {
var files = [
'./*.html',
'./css/*.css',
'./js/*.js',
'./img/*.{png, jpg, gif}'
];
browserSync.init(files, {
server: {
baseDir: './'
}
});
});
gulp.task('default', [ 'browser-sync' ], function () {
gulp.start('sass:watch');
});
I think the problem is caused by the syntax I am using with this line:
gulp.task('default', [ 'browser-sync' ], function () {
gulp.start('sass:watch');
});
Can someone help me to solve this problem

error: gulp.start is not a function while using gulp version 4

Iam using gulp CLI version: 2.2.1 Local version: 4.0.2
The node version is 12.16.3
MY code of gulpfile.js is
'use strict';
var gulp = require('gulp'),
sass = require('gulp-sass'),
browserSync = require('browser-sync'),
del=require('del'),
imagemin = require('gulp-imagemin'),
uglify = require('gulp-uglify'),
usemin = require('gulp-usemin'),
rev = require('gulp-rev'),
cleanCss = require('gulp-clean-css'),
flatmap = require('gulp-flatmap'),
htmlmin = require('gulp-htmlmin');
gulp.task('sass', function () {
return gulp.src('./css/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css'));
});
gulp.task('sass:watch', function () {
gulp.watch('./css/*.scss', ['sass']);
});
gulp.task('browser-sync', function () {
var files = [
'./*.html',
'./css/*.css',
'./img/*.{png,jpg,gif}',
'./js/*.js'
];
browserSync.init(files, {
server: {
baseDir: "./"
}
});
});
// Default task
gulp.task('default', gulp.series('browser-sync', function() {
gulp.start('sass:watch');
}));
gulp.task('clean', function() {
return del(['dist']);
});
gulp.task('copyfonts', function() {
gulp.src('./node_modules/font-awesome/fonts/**/*.{ttf,woff,eof,svg}*')
.pipe(gulp.dest('./dist/fonts'));
});
gulp.task('imagemin', function() {
return gulp.src('img/*.{png,jpg,gif}')
.pipe(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))
.pipe(gulp.dest('dist/img'));
});
gulp.task('usemin', function() {
return gulp.src('./*.html')
.pipe(flatmap(function(stream, file){
return stream
.pipe(usemin({
css: [ rev() ],
html: [ function() { return htmlmin({ collapseWhitespace: true })} ],
js: [ uglify(), rev() ],
inlinejs: [ uglify() ],
inlinecss: [ cleanCss(), 'concat' ]
}))
}))
.pipe(gulp.dest('dist/'));
});
gulp.task('build',gulp.series('clean', function() {
gulp.start('copyfonts','imagemin','usemin');
}));
The error I got is after running gulp build on the command line is:
[15:38:33] Starting 'build'...
[15:38:33] Starting 'clean'...
[15:38:33] Finished 'clean' after 69 ms
[15:38:33] Starting '<anonymous>'...
[15:38:33] '<anonymous>' errored after 3.57 ms
[15:38:33] TypeError: gulp.start is not a function
at C:\Users\HARIKA\Desktop\bootstrapassign1\Bootstrap4\conFusion\gulpfile.js
:74:10
[15:38:33] 'build' errored after 83 m
I dont know how to solve the erros. I even changed some of tasks to gulp.series() as per version of gulp version 4. Can anyone help me to resolve the error? Thank you in advance.
Replace these two tasks:
// Default task
gulp.task('default', gulp.series('browser-sync', function() {
gulp.start('sass:watch');
}));
gulp.task('build',gulp.series('clean', function() {
gulp.start('copyfonts','imagemin','usemin');
}));
with:
// Default task
gulp.task('default', gulp.series('browser-sync', 'sass:watch'));
gulp.task('build',gulp.series('clean', 'copyfonts','imagemin','usemin'));
gulp.start is not a part of gulp4+ - it was in v3 although not really sanctioned for use even there.
I had the same issue and perhaps found the solution:
Replace the following:
gulp.task('sass:watch', function () {
gulp.watch('./css/*.scss', ['sass']);
// Default task
gulp.task('default', gulp.series('browser-sync', function() {
gulp.start('sass:watch');
}));
And add instead:
gulp.task('sass:watch', function() {
gulp.watch('./css/*.scss', gulp.series(['sass']));
// Default task
gulp.task('default', gulp.parallel('browser-sync', 'sass:watch'));
From what I have found you will have to use gulp.series and gulp.parallel interchangeably with gulp +4.x
Now for the second part change:
gulp.task('copyfonts', function() {
gulp.src('./node_modules/font-awesome/fonts/**/*.{ttf,woff,eof,svg}*')
.pipe(gulp.dest('./dist/fonts'));
});
Adding return here:
gulp.task('copyfonts', function() {
return gulp.src('./node_modules/font-awesome/fonts/**/*.{ttf,woff,eof,svg}*')
.pipe(gulp.dest('./dist/fonts'));
});
And like shown in the previous answer make the last task:
gulp.task('build', gulp.series('clean','copyfonts','imagemin','usemin'));
Hope this helps!

Trying to start server with Gulp and it throw error

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'));

Gulp task not finishing

Being new to gulp. I have the follwing task. I need to spawn a webserver and then another script has to run some stuff against this webserver. I am currently struggling with finishing the script because the browser-sync task does not finish and prevents the script from exit.
'use strict';
const browserSync = require('browser-sync').create();
const cp = require('child_process');
const minimalcss = require('minimalcss');
const gulp = require('gulp');
const clean = require('gulp-clean');
const sourceDir = "_site/";
const deployDir = "public/";
// build the mkdocs Site
gulp.task('build', function() {
return cp.exec('pipenv run mkdocs build --site-dir ' + sourceDir);
});
// Delete _deploy directory first
gulp.task('prepare', function() {
return gulp.src(deployDir, {read: false, allowEmpty: true})
.pipe(clean());
});
// Delete _deploy directory again // just for testing
gulp.task('cleanup', function() {
return gulp.src(deployDir, {read: false, allowEmpty: true})
.pipe(clean());
});
// does not lead to anything, just for testing
gulp.task('inlinecriticalCSS', function(done) {
minimalcss
.minimize({ urls: ['http://localhost:9999/' + 'index.html'] })
.then(result => {
console.log('OUTPUT', result.finalCss.length, result.finalCss);
})
.catch(error => {
console.error(`Failed the minimize CSS: ${error}`);
});
done();
});
// webserver
gulp.task('serve', (done) => {
browserSync.init({
port: 9999,
server: {
baseDir: sourceDir
}
});
done();
});
// default sequence
gulp.task('default', gulp.series(
'prepare',
'build',
'serve',
'inlinecriticalCSS',
'cleanup')
);

check if runSequence fail

I have the following task on my gulpfile:
gulp.task('build', function (cb) {
return runSequence(
'clean',
'tsd',
'ts-lint',
['sass', 'copy-assets', 'ts-compile', 'templates', 'copy-vendor'],
'karma-once',
'index',
cb
);
});
How can I check if any of the tasks in a runSequence fail in gulp?
The callback function that runSequence accepts as last argument, gives you an err object if some task failed.
runSequence('mytask', ['othertask'], function(err) {
if (err) {
// you can check for err.message or err.task for the name of the task
}
});