Live reload is not working after upgrading to Gulp 4 - gulp

My gulpfile.js looks like below,
var gulp = require('gulp');
var pug = require('gulp-pug');
var sass = require('gulp-sass');
var minifyCSS = require('gulp-csso');
var concat = require('gulp-concat');
var sourcemaps = require('gulp-sourcemaps');
var connect = require('gulp-connect');
gulp.task('connect', function () {
connect.server({
root: 'build',
livereload: true,
port: 3000
});
});
gulp.task('html', function () {
return gulp.src('client/html/**/*.pug')
.pipe(pug({
pretty: true
}))
.pipe(gulp.dest('build'))
.pipe(connect.reload())
});
gulp.task('css', function () {
return gulp.src(['node_modules/bootstrap/scss/bootstrap.scss', 'client/scss/*.scss'])
.pipe(sass({ outputStyle: 'compressed' }))
.pipe(gulp.dest('build/css'))
.pipe(connect.reload())
});
gulp.task('images', function () {
return gulp.src(['client/assets/**/*.*'])
.pipe(gulp.dest('build/assets'))
.pipe(connect.reload())
});
gulp.task('js', function () {
return gulp.src('client/javascript/*.js')
.pipe(sourcemaps.init())
.pipe(concat('app.min.js'))
.pipe(sourcemaps.write())
.pipe(gulp.dest('build/js'))
.pipe(connect.reload())
});
gulp.task('watch', gulp.parallel('html', 'css', 'js'));
gulp.task('default', gulp.series('connect', 'watch', 'html', 'css', 'images', 'js'));
When I run this code, I do not get any error on console, but also things do not auto reload on browser. I did this right with previous versions of Gulp, but unable to run it with Gulp 4 somehow. Now whenever I stop the server, I get below error,
[18:44:35] The following tasks did not complete: default, connect
[18:44:35] Did you forget to signal async completion?
Any help will be appreciated. Thanks

Try changing your connect function to explicitly call done(); I think you'll need this when calling series() in Gulp 4
gulp.task('connect', function (done) {
connect.server({
root: 'build',
livereload: true,
port: 3000
});
done();
});

gulp.task('html', (done) =>
gulp.src('client/html/**/*.pug')
.pipe(pug({
pretty: true
}))
.pipe(gulp.dest('build'))
.on('end', () => {
connect.reload();
done();
});
);

Related

Localhost doesn't display img but index.html does

i have a problem with at localhost. I use gulp server for my project and i want to display img but when i use localhost it doesn't display but when i open my index.html file it works fine
<img src="src/img/logo.png" alt="Logo">
I can't find a good src to display it. How it should looks like?
edit:
my gulpfile is:
const gulp = require("gulp");
const sass = require("gulp-sass");
const sourcemaps = require('gulp-sourcemaps');
var connect = require('gulp-connect');
gulp.task('connect', function(cb) {
connect.server({
root: './dist',
livereload: true
});
cb();
});
gulp.task("sass", function() {
return gulp.src('./src/scss/main.scss')
.pipe(sourcemaps.init())
.pipe(sass({errLogToConsole: true}))
.pipe(sourcemaps.write())
.pipe(gulp.dest('./dist/css'))
.pipe(connect.reload());
});
gulp.task('html', function () {
return gulp.src('./src/*.html')
.pipe(gulp.dest('./dist'))
.pipe(connect.reload());;
});
gulp.task('watch', function () {
gulp.watch('./src/scss/**/*.scss', gulp.series('sass'));
gulp.watch('./src/**/*.html', gulp.series('html'));
});
gulp.task('default', gulp.series('connect', 'watch'));
Based on your gulp configuration your HTML files from src are moved (Part 1) into your ./dist/ folder and then served from there (Part 2). So move your index.html into src and remove it from the img tag.
Moving HTML to dist folder (Part 1):
gulp.task('html', function () {
return gulp.src('./src/*.html')
.pipe(gulp.dest('./dist'))
.pipe(connect.reload());;
});
Gulp server on dist folder (Part 2):
gulp.task('connect', function(cb) {
connect.server({
root: './dist',
livereload: true
});
cb();
});
So what you need is either a task that moves your images as well or the easy way:
Create a img folder in dist containing the image and change the path in your index.html as follows:
<img src="img/logo.png" alt="Logo">
I would recommend to change your gulp config, so it serves from your src folder for development and create a second task for a build process (Including minify css, js and moving the files). I just add a config that i used some time ago:
var gulp = require('gulp');
var sass = require('gulp-sass');
var browsersync = require("browser-sync").create();
var babel = require('gulp-babel');
var sourcemaps = require('gulp-sourcemaps');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var plumber = require('gulp-plumber');
var cssnano = require('gulp-cssnano');
var imagemin = require('gulp-imagemin');
var cache = require('gulp-cache');
var del = require('del');
var rev = require('gulp-rev');
var revdel = require('rev-del');
var collect = require('gulp-rev-collector');
// Development Tasks
// -----------------
// BrowserSync
function browserSync(done) {
browsersync.init({
server: {
baseDir: "./src/"
},
port: 3000
});
done();
}
// BrowserSync Reload
function browserSyncReload(done) {
browsersync.reload();
done();
}
// Watchers
function watchFiles(){
gulp.watch('src/scss/**/*.scss', gulp.series('sassify', browserSyncReload));
gulp.watch('src/*.html', gulp.series(browserSyncReload));
gulp.watch('src/js/**/*.js', gulp.series(browserSyncReload));
}
// Optimization Tasks
// ------------------
// Sassify
gulp.task('sassify', (cb) => {
gulp.src('src/scss/**/*.scss') // Gets all files ending with .scss in src/scss and children dirs
.pipe(plumber())
.pipe(sass()) // Passes it through a gulp-sass, log errors to console
.pipe(gulp.dest('src/css')) // Outputs it in the css folder
.pipe(browsersync.stream());
cb();
});
// Optimizing CSS
gulp.task('css', (done) => {
gulp.src('src/css/*.css')
.pipe(plumber())
.pipe(cssnano())
.pipe(gulp.dest('dist/css'));
done();
});
// Optimizing JS
gulp.task('js', (cb) => {
gulp.src('src/js/*.js')
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(babel({
presets: ['#babel/env']
}))
.pipe(uglify())
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('dist/js'));
cb();
});
// HTML
gulp.task('html', (cb) => {
gulp.src('src/*.html')
.pipe(gulp.dest('dist'));
cb();
});
// Optimizing Images
gulp.task('images', function(done) {
gulp.src('src/assets/**/*.+(png|jpg|jpeg|gif|svg)')
// Caching images that ran through imagemin
.pipe(cache(imagemin({
interlaced: true,
})))
.pipe(gulp.dest('dist/assets'))
done();
});
// Generate Revisions...
gulp.task('revision:rename', function(){
gulp.src(["dist/**/*.css",
"dist/**/*.js"])
.pipe(rev())
.pipe(revdel())
.pipe(gulp.dest('dist'))
.pipe(rev.manifest({ path: 'manifest.json' }))
.pipe(gulp.dest('dist'))
});
// update references
gulp.task('revision:updateReferences', function(){
gulp.src(['dist/manifest.json','dist/**/*.{html,json,css,js}'])
.pipe(collect())
.pipe(gulp.dest('dist'))
});
// Cleaning
gulp.task('clean', function() {
return del.sync('dist').then(function(cb) {
return cache.clearAll(cb);
});
})
gulp.task('clean:dist', (cb) => {
del.sync(['dist/**/*', '!dist/assets', '!dist/assets/**/*']);
cb();
});
// Build Sequences
// ---------------
gulp.task('default',
gulp.series(
'sassify',
gulp.parallel(
watchFiles,
browserSync
)
)
);
gulp.task('build',
gulp.series(
'clean:dist',
'sassify',
gulp.parallel(
'css',
'js',
'images'
),
'html'
)
);

upgrading gulp from 3 to 4 - Task function must be specified error - what to do?

I had a simple javascript webpage and used gulp 3. Now (as I understand) node 10 crashes with gulp 3 so that ive upgraded to gulp 4. I have a very limited knowledge about gulp and read tutorials now on how to upgrade and I am still getting error: Task function must be specified.
Any help would be great. thanks!!
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var cleanCSS = require('gulp-clean-css');
var rename = require("gulp-rename");
var uglify = require('gulp-uglify');
var cache = require('gulp-cache');
var imagemin = require('gulp-imagemin');
// Compiles SCSS files from /scss into /css
gulp.task('sass', function (done) {
gulp.src('app/scss/styles.scss')
.pipe(sass())
.pipe(gulp.dest('css'))
.pipe(browserSync.reload({
stream: true
}))
done()
});
// Minify compiled CSS
gulp.task('minify-css', ['sass'], function (done) {
gulp.src('app/css/styles.css')
.pipe(cleanCSS({
compatibility: 'ie8'
}))
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('css'))
.pipe(browserSync.reload({
stream: true
}))
done()
});
// Minify custom JS
gulp.task('minify-js', function (done) {
gulp.src('app/js/index.js')
.pipe(uglify())
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('js'))
.pipe(browserSync.reload({
stream: true
}))
done()
});
// Copy vendor files from /node_modules into /vendor
gulp.task('copy', function (done) {
gulp.src([
'node_modules/bootstrap/dist/**/*',
'!**/npm.js',
'!**/bootstrap-theme.*',
'!**/*.map'
])
.pipe(gulp.dest('vendor/bootstrap'))
gulp.src(['node_modules/jquery/dist/jquery.js', 'node_modules/jquery/dist/jquery.min.js'])
.pipe(gulp.dest('vendor/jquery'))
gulp.src(['node_modules/jquery-easing/*.js'])
.pipe(gulp.dest('vendor/jquery-easing'))
/*gulp.src(['node_modules/waypoints/lib/jquery.waypoints.js'])
.pipe(gulp.dest('vendor/waypoint'))*/
gulp.src(['node_modules/animate.css/animate.css'])
.pipe(gulp.dest('vendor/animate'))
/* gulp.src(['node_modules/scrollreveal/dist/scrollreveal.js'])
.pipe(gulp.dest('vendor/scrollreveal'))*/
done()
})
// Optimizing Images
gulp.task('images', function(done) {
gulp.src('app/images/**/*.+(png|jpg|jpeg|gif|svg)')
// Caching images that ran through imagemin
.pipe(cache(imagemin({
interlaced: true,
})))
.pipe(gulp.dest('dist/images'));
done()
});
// Default task
/*gulp.task('default', ['sass', 'minify-css', 'minify-js', 'copy']);*/
gulp.task('default', gulp.series('sass', 'minify-css', 'minify-js', 'copy'));
// Configure the browserSync task
gulp.task('browserSync', function (done) {
browserSync.init({
server: {
baseDir: ''
},
port: process.env.PORT || 8080
});
done()
})
// Dev task with browserSync
//old:
/*
gulp.task('dev', ['browserSync', 'sass', 'minify-css', 'minify-js', 'images'], function () {
gulp.watch('scss/!*.scss', ['sass']);
gulp.watch('css/!*.css', ['minify-css']);
gulp.watch('js/!*.js', ['minify-js']);
// Reloads the browser whenever HTML or JS files change
gulp.watch('*.html', browserSync.reload);
gulp.watch('js/!**!/!*.js', browserSync.reload);
});*/
//new
gulp.task('watch', function(){
gulp.watch('app/scss/*.scss')
.on('change', function(path, stats) {
console.log('File ' + path + ' was changed');
}).on('unlink', function(path) {
console.log('File ' + path + ' was removed');
});
});
When converting to gulp 4, all Task arrays:
gulp.task('minify-css', ['sass'], function (done) {
should be using series:
gulp.task('minify-css', gulp.series('sass', function (done) {
final file:
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var cleanCSS = require('gulp-clean-css');
var rename = require("gulp-rename");
var uglify = require('gulp-uglify');
var cache = require('gulp-cache');
var imagemin = require('gulp-imagemin');
// Compiles SCSS files from /scss into /css
gulp.task('sass', function (done) {
gulp.src('app/scss/styles.scss')
.pipe(sass())
.pipe(gulp.dest('css'))
.pipe(browserSync.reload({
stream: true
}))
done()
});
// Minify compiled CSS
gulp.task('minify-css', gulp.series('sass', function (done) {
gulp.src('app/css/styles.css')
.pipe(cleanCSS({
compatibility: 'ie8'
}))
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('css'))
.pipe(browserSync.reload({
stream: true
}))
done()
}));
// Minify custom JS
gulp.task('minify-js', function (done) {
gulp.src('app/js/index.js')
.pipe(uglify())
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('js'))
.pipe(browserSync.reload({
stream: true
}))
done()
});
// Copy vendor files from /node_modules into /vendor
gulp.task('copy', function (done) {
gulp.src([
'node_modules/bootstrap/dist/**/*',
'!**/npm.js',
'!**/bootstrap-theme.*',
'!**/*.map'
])
.pipe(gulp.dest('vendor/bootstrap'))
gulp.src(['node_modules/jquery/dist/jquery.js', 'node_modules/jquery/dist/jquery.min.js'])
.pipe(gulp.dest('vendor/jquery'))
gulp.src(['node_modules/jquery-easing/*.js'])
.pipe(gulp.dest('vendor/jquery-easing'))
/*gulp.src(['node_modules/waypoints/lib/jquery.waypoints.js'])
.pipe(gulp.dest('vendor/waypoint'))*/
gulp.src(['node_modules/animate.css/animate.css'])
.pipe(gulp.dest('vendor/animate'))
/* gulp.src(['node_modules/scrollreveal/dist/scrollreveal.js'])
.pipe(gulp.dest('vendor/scrollreveal'))*/
done()
})
// Optimizing Images
gulp.task('images', function(done) {
gulp.src('app/images/**/*.+(png|jpg|jpeg|gif|svg)')
// Caching images that ran through imagemin
.pipe(cache(imagemin({
interlaced: true,
})))
.pipe(gulp.dest('dist/images'));
done()
});
// Default task
/*gulp.task('default', ['sass', 'minify-css', 'minify-js', 'copy']);*/
gulp.task('default', gulp.series('sass', 'minify-css', 'minify-js', 'copy'));
// Configure the browserSync task
gulp.task('browserSync', function (done) {
browserSync.init({
server: {
baseDir: ''
},
port: process.env.PORT || 8080
});
done()
})
// Dev task with browserSync
//old:
/*
gulp.task('dev', ['browserSync', 'sass', 'minify-css', 'minify-js', 'images'], function () {
gulp.watch('scss/!*.scss', ['sass']);
gulp.watch('css/!*.css', ['minify-css']);
gulp.watch('js/!*.js', ['minify-js']);
// Reloads the browser whenever HTML or JS files change
gulp.watch('*.html', browserSync.reload);
gulp.watch('js/!**!/!*.js', browserSync.reload);
});*/
//new
gulp.task('watch', function(){
gulp.watch('app/scss/*.scss')
.on('change', function(path, stats) {
console.log('File ' + path + ' was changed');
}).on('unlink', function(path) {
console.log('File ' + path + ' was removed');
});
});
watch task:
gulp.task('watch', function (done) {
gulp.watch('scss/*.scss', gulp.series('sass'));
gulp.watch('css/!*.css', gulp.series('minify-css'));
gulp.watch('js/!*.js', gulp.series('minify-js'));
// Reloads the browser whenever HTML or JS files change
gulp.watch('*.html', browserSync.reload);
gulp.watch('js/!**/!*.js', browserSync.reload);
return
});
I tried using function instead gulp.task() and it worked for me. I found this solution in a youtube video
// 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() {
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;

Gulp is taking ages to execute tasks

I'm trying to give Gulp a try for the first time and can't figure out why is taking so long in loading packages and running tasks, about 48 seconds every time. Not sure how many packages are the average, but I think I need all of them. I've been trying to improve the performance by following some examples but I'm stuck in the same place.
I'd really appreciate any piece of advice!
This is my gulpfile.js:
var gulp = require('gulp'),
runSequence = require('run-sequence'),
templateCache = require('gulp-angular-templatecache'),
sass = require('gulp-sass'),
autoprefixer = require('gulp-autoprefixer'),
rename = require("gulp-rename")
browserify = require('browserify'),
concat = require('gulp-concat'),
addStream = require('add-stream'),
source = require('vinyl-source-stream'),
buffer = require('vinyl-buffer'),
imagemin = require('gulp-imagemin'),
browserSync = require('browser-sync'),
reload = browserSync.reload,
ngAnnotate = require('gulp-ng-annotate'),
uglify = require('gulp-uglify'),
jshint = require('gulp-jshint'),
htmlmin = require('gulp-html-minifier'),
del = require('del');
function templates() {
return gulp.src('./app/views/**/*.html')
.pipe(templateCache({
module: 'portfolio'
}));
}
gulp.task('clean:dist', function() {
return del.sync('dist/assets/');
});
gulp.task('jshint', function() {
return gulp.src('./app/js/**/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'))
});
gulp.task('browserify', function() {
return browserify('./app/app.js')
.bundle()
.pipe(source('main.js'))
.pipe(buffer())
.pipe(ngAnnotate())
.pipe(addStream.obj(templates()))
.pipe(concat('main.js'))
.pipe(uglify())
.pipe(rename({ suffix: '.min' }))
.pipe(gulp.dest('./dist/assets/js/'))
});
gulp.task('sass', function() {
return gulp.src('./app/css/main.scss')
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
.pipe(autoprefixer())
.pipe(rename({ suffix: '.min' }))
.pipe(gulp.dest('./dist/assets/css'))
});
gulp.task('images', function() {
return gulp.src('./app/img/**/*.{png,jpg,gif,svg}')
.pipe(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))
.pipe(gulp.dest('./dist/assets/img'))
});
gulp.task('copyfonts', function() {
gulp.src('./app/css/fonts/**/*.*')
.pipe(gulp.dest('./dist/assets/fonts'));
});
gulp.task('copy-index-html', function() {
gulp.src('./app/index.html')
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(gulp.dest('./dist'));
});
gulp.task('serve', function() {
browserSync({
server: {
baseDir: './dist'
}
});
gulp.watch('app/js/**/*.js', ['browserify', reload]);
gulp.watch('app/css/**/*.scss', ['sass', reload]);
gulp.watch('app/views/**/*.html', [reload]);
});
gulp.task('bs-reload', function () {
browserSync.reload();
});
gulp.task('default', function(callback) {
runSequence('clean:dist', 'jshint', ['browserify', 'sass', 'images','copy-index-html','copyfonts'], 'serve', callback);
});
Gulp performance (image link)

Livereload of .html pages - Gulp

I have got this code so far, but it does not work.
var gulp = require('gulp'),
connect = require('gulp-connect');
gulp.task('webserver', function() {
connect.server({
livereload: true
});
});
gulp.task('default', ['webserver']);
You should specify file path to watch look this :
var gulp = require('gulp');
var connect = require('gulp-connect');
gulp.task('connect', function() {
connect.server({
root: 'app',
livereload: true
});
});
gulp.task('html', function () {
gulp.src('./app/*.html')
.pipe(connect.reload());
});
gulp.task('watch', function () {
gulp.watch(['./app/*.html'], ['html']);
});
gulp.task('default', ['connect', 'watch']);

gulp-connect doesn't work on gulp watch

I've just started to learn gulp and I'm trying to use gulp-connect https://www.npmjs.com/package/gulp-connect.
This is my files structure
And it's my gulpfile.js file
var gulp = require('gulp'),
concatCss = require('gulp-concat-css'),
minifyCss = require('gulp-minify-css'),
rename = require('gulp-rename'),
notify = require('gulp-notify'),
autoprefixer = require('gulp-autoprefixer'),
livereload = require('gulp-livereload'),
connect = require('gulp-connect');
// server connect
gulp.task('connect', function() {
connect.server({
root: [__dirname],
livereload: true
});
});
// css
gulp.task('css', function () {
return gulp.src('css/*.css')
/*.pipe(notify('Done!'))*/
.pipe(autoprefixer({
browsers: ['> 1%', 'IE 7']
}))
.pipe(concatCss("style.css"))
.pipe(minifyCss())
.pipe(rename('style.min.css'))
.pipe(gulp.dest('dist/'))
.pipe(connect.reload());
});
//html
gulp.task('html', function(){
gulp.src('index.html')
.pipe(connect.reload());
});
// watch
gulp.task('watch', function () {
gulp.watch('css/*.css', ['css']);
gulp.watch('index.html', ['html']);
});
// default
gulp.task('default', ['connect', 'html', 'css', 'watch']);
I don't undestand why all works correctly when I use command gulp in node.js console, but if I try to use command gulp watch I get an error in browser console
http://localhost:8080/ net::ERR_CONNECTION_REFUSED
What did I do wrong?
You're not running 'connect' task when running 'watch'.
Reformat your tasks like this
gulp.task('watch:assets', function () {
gulp.watch('css/*.css', ['css']);
gulp.watch('index.html', ['html']);
});
gulp.task('default', ['connect', 'html', 'css', 'watch:assets']);
gulp.task('watch', ['connect', 'watch:assets']);
Go back to terminal and run
gulp watch