We Keep Coding

Converting gulpfile.js to v4

I have upgraded Gulp to version 4 and I am receiving errors when doing gulp build because my gulpfile.js is outdated. I need help changing the syntax on my gulpfile.js from Gulp v3 to Gulp v4. Your help would be greatly appreciated.
var gulp = require('gulp');
var sass = require('gulp-sass');
var uglify = require('gulp-uglify');
var gulpIf = require('gulp-if');
var gutil = require("gulp-util");
var useref = require('gulp-useref');
var runSequence = require('run-sequence');
var del = require('del');
var cssnano = require('gulp-cssnano');
var imagemin = require('gulp-imagemin');
var webpackStream = require("webpack-stream");
var webpack = require("webpack");
var webpackConfig = require("./webpack.config.js");
var injectVersion = require('gulp-inject-version');
gulp.task('sass', function(){
return gulp.src('src/scss/log.scss')
.pipe(sass())
.pipe(gulp.dest('src/css'))
});
gulp.task('images', function(){
return gulp.src('src/images/*.+(png|jpg|gif|svg)')
.pipe(imagemin())
.pipe(gulp.dest('dist/images'))
});
gulp.task('webpack', function(){
return gulp.src('src/main.js')
.pipe(webpackStream( webpackConfig ))
.pipe(injectVersion())
.pipe(gulp.dest('src/js/'));
});
gulp.task('useref', function(){
return gulp.src('src/*.html')
.pipe(useref())
.pipe(gulpIf('*.js', uglify()))
.pipe(gulpIf('*.css', cssnano()))
.pipe(gulp.dest('dist'))
});
gulp.task('move:js', function(){
return gulp.src([
'src/js/config.js.example',
'src/js/worker.online.js',
'src/js/worker.queue.js'
])
.pipe(gulp.dest('dist/js'))
});
gulp.task('clean:dist', function() {
return del.sync('dist');
});
gulp.task('watch', ['sass', 'webpack'], function(){
gulp.watch('src/scss/*', ['sass']);
gulp.watch('src/components/**/*.vue', ['webpack']);
gulp.watch('src/*.js', ['webpack']);
});
gulp.task('build', function (callback) {
runSequence('clean:dist',
['webpack', 'sass', 'images'],
'useref',
'move:js',
callback
)
});
gulp.task('default', ['webpack-dev-server', 'watch']);
............................................................

In vertion 4, The way you define dependent task has been changed. Here is the smaple.
// V3
gulp.task('default', ['del'], function() {
// default task code here
});
// v4
gulp.task('default', gulp.series('del', function() {
// default task code here
}));
//v3
gulp.task('default', ['scripts', 'styles'], function() {...});
// v4
gulp.task('default', gulp.parallel('scripts', 'styles'));
More info:
https://www.liquidlight.co.uk/blog/how-do-i-update-to-gulp-4/
https://fettblog.eu/gulp-4-parallel-and-series/

browser-sync is not reloading my browser after making changes to the html

const gulp = require('gulp');
const sass = require('gulp-sass');
const nunjucks = require('gulp-nunjucks');
const autoprefixer = require('gulp-autoprefixer');
const cssnano = require('gulp-cssnano');
const imagemin = require('gulp-imagemin');
const browserSync = require('browser-sync').create();
const uglify = require('gulp-uglify');
const plumber = require('gulp-plumber');
var config = {
bootstrapDir: './node_modules/bootstrap-sass',
uploadDir: './upload'
};
gulp.task('css', function () {
gulp.src('./css/*')
.pipe(plumber())
.pipe(sass())
.pipe(autoprefixer())
.pipe(cssnano())
.pipe(gulp.dest(config.uploadDir + '/css'))
.pipe(browserSync.reload({
stream: true
}));
});
gulp.task('fonts', function () {
gulp.src(config.bootstrapDir + '/assets/fonts/**/*')
.pipe(gulp.dest(config.uploadDir + '/fonts'));
});
gulp.task('js', function () {
gulp.src('./js/*')
.pipe(plumber())
.pipe(uglify())
.pipe(gulp.dest(config.uploadDir + '/js'));
});
gulp.task('images', function () {
gulp.src('./images/**/*')
.pipe(plumber())
.pipe(imagemin())
.pipe(gulp.dest(config.uploadDir + '/images'));
});
// This is the code for the template(html) task
gulp.task('templates', function () {
gulp.src('./templates/*.html')
.pipe(plumber())
.pipe(nunjucks.compile({
appName: 'Gulp' //Global variable
}))
.pipe(gulp.dest(config.uploadDir));
});
gulp.task('browserSync', function() {
browserSync.init({
server: {
baseDir: config.uploadDir
}
});
});
//This is my watch task
gulp.task('watch',['browserSync', 'css', 'templates'], function() {
gulp.watch('./css/*', ['css']);
gulp.watch('./templates/*.html', ['templates', browserSync.reload]);
})
//gulp.task('default', ['css', 'fonts', 'js', 'images', 'templates', 'browserSync']);
enter code here
When i run gulp watch any changes made to the css files causes the browser to reload , but if i make a change to my html file, i will need to refresh the browser before i can see the changes
I get to see the changes in my uploadDir "(./upload)" folder but can;t figure out why i have to refresh the page to see the changes live

gulp-ruby-sass Error: must provide pattern

This is my directory structure:
I set up my workstation, and I set up my Gulp File to work on my folder format, but it is not working properly.
This is my Gulp File:
var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
imagemin = require('gulp-imagemin'),
changed = require('gulp-changed'),
browserSync = require('browser-sync'),
livereload = require('gulp-livereload'),
gp_concat = require('gulp-concat'),
gp_rename = require('gulp-rename'),
gp_uglify = require('gulp-uglify'),
watch = require('gulp-watch');
gulp.task('sass', function () {
gulp.src('./app/template/css/style_v1.scss')
.pipe(sass())
.on('error', function (err) { console.log(err.message); })
.pipe(gulp.dest('./dist/css'))
.pipe(livereload());
});
gulp.task('compress', function() {
gulp.src('./app/*.js')
.pipe(gp_concat('concat.js'))
.pipe(gulp.dest('dist'))
.pipe(gp_rename('script.min.js'))
.pipe(gp_uglify())
.pipe(gulp.dest('./dist/js'));
});
gulp.task('jpg', function() {
gulp.src('./template/img/**/*.*')
.pipe(changed('./dist/img/'))
.pipe(imagemin({
progressive: true
}))
.pipe(gulp.dest('./dist/img/'));
});
gulp.task('browser-sync', function() {
browserSync.init(['./dist/css/**', 'index.php'], {
server: {
baseDir: './',
index: 'index.php'
}
});
});
gulp.task('watch', ['sass', 'browser-sync','compress'], function () {
return watch('./app/template/css/style_v1.scss', function () {
gulp.src('./app/template/css/style_v1.scss')
.pipe(gulp.dest('build'));
});
});
When I run gulp watch it returns this:
(node:6668) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
[08:42:23] Using gulpfile /var/www/html/evandro/sistema_metas/gulpfile.js
[08:42:23] Starting 'sass'...
[08:42:23] 'sass' errored after 7.09 ms
[08:42:23] Error: must provide pattern
What is the problem?
I have another code, the CSS Watch does not work, just watch HTML, What can it be?

gulp-ruby-sass works differently from other gulp plugins. You don't pass it to .pipe(). If you take a look at the documentation it says the following:
Use gulp-ruby-sass instead of gulp.src to compile Sass files.
That means you have to use it like this:
var sass = require('gulp-ruby-sass');
gulp.task('sass', function () {
return sass('./app/template/css/style_v1.scss')
.on('error', function (err) { console.log(err.message); })
.pipe(gulp.dest('./dist/css'))
.pipe(livereload());
});
Alternatively you can use the gulp-sass plugin instead of gulp-ruby-sass. It doesn't use the Ruby implementation of SASS, but rather the C implementation (libsass). It allows you to use .pipe() as you normally would for most other gulp plugins:
var sass = require('gulp-sass');
gulp.task('sass', function () {
return gulp.src('./app/template/css/style_v1.scss')
.pipe(sass())
.on('error', function (err) { console.log(err.message); })
.pipe(gulp.dest('./dist/css'))
.pipe(livereload());
});

Gulp + Browserify task not working (no output)

I have the following task on my gulpfile.js
gulp.task('default', ['browserify'])
gulp.task('browserify', function () {
return browserify('./public/js/x.js')
.bundle()
.pipe(source('y.js'))
.pipe(gulp.dest('./public/dist/js'))
})
But after running $ gulp it gives no output. Am I missing something?

I am not sure what your browserify is but I'm gonna assume it's not the deprecated gulp-browserify.
This should work. I tested it:
var gulp = require('gulp');
var browserify = require('browserify');
var source = require('vinyl-source-stream'); // MAKE SURE THIS IS THERE
gulp.task('default', ['browserify'])
gulp.task('browserify', function() {
return browserify('./public/js/x.js').bundle() // .bundle is a browserify function
.pipe(source('y.js')) // Pass to output using vinyl-source-stream
.pipe(gulp.dest('./public/dist/js'));
});
Since my code looks exactly as yours, can you make sure you have vinyl installed?
npm install --save vinyl-source-stream
and if you haven't already:
npm install --save gulp browserify
npm install -g gulp

I'm now maintaining a repository which collecting all the gulp tasks I use in daily work.
This is the browserify task code
var gulp = require('gulp')
var gulpif = require('gulp-if')
var browserify = require('browserify')
var gutil = require('gulp-util')
var through2 = require('through2')
var watchify = require('watchify')
var assign = require('object-assign')
var babelify = require('babelify')
var config = require('config').gulp
module.exports = function (is_dev) {
var options = {
paths: [config.src.js]
}
if (is_dev) {
options = assign({}, options, {
debug: true,
cache: {},
packageCache: {}
})
}
var bundler = function () {
return through2.obj(function (file, enc, next) {
var b = browserify(file.path, options)
.transform(babelify.configure({
presets: ['es2015', 'react'],
compact: false
}))
if (is_dev) {
b = watchify(b)
b.on('update', bundle)
b.pipeline.on('file', function (filename) {
gutil.log(gutil.colors.green('Bundled: '), filename)
})
}
return b.bundle(function (err, res) {
if(err) {
return next(err)
}
file.contents = res
next(null, file)
})
})
}
function bundle() {
is_dev ? gutil.log(gutil.colors.yellow('Bundling...')) : null
return gulp.src([
config.src.js + '/**/*.js',
'!' + config.src.js + '/lib/**/*.js'
])
.pipe(bundler())
.on('error', function(e) {
gutil.log(gutil.colors.red(e.message))
is_dev ? this.emit('end') : null
})
.pipe(gulp.dest(config.dist.js))
}
return bundle()
}

Gulp less and then minify task

I have to make 2 steps in gulp:
Make a .css file form less
Minify generated css files
This is my gulpfile:
var gulp = require('gulp'),
watch = require("gulp-watch"),
less = require('gulp-less'),
cssmin = require('gulp-cssmin'),
rename = require('gulp-rename');
gulp.task('watch-less', function () {
watch({glob: './*.less'}, function (files) { // watch any changes on coffee files
gulp.start('compile-less'); // run the compile task
});
watch({
glob: ['./*.css', '!./*.min.css']
}, function(files) {
gulp.start('minify-css'); // run the compile task
});
});
gulp.task('compile-less', function () {
gulp.src('./*.less') // path to your file
.pipe(less().on('error', function(err) {
console.log(err);
}))
.pipe(gulp.dest('./'));
});
gulp.task('minify-css', function() {
gulp.src([
'./*.css',
'!./*.min.css'
])
.pipe(cssmin().on('error', function(err) {
console.log(err);
}))
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('./'));
})
gulp.task('default', ['watch-less']);
When i start it only first step is done.
Help me please.

You should keep in mind that with gulp you could simply chain operations on a glob pattern.
Don't really sure why you need gulp.watch when you can use the built-in watcher, this plugin is useful on tricky situations and that's don't seems be the case here, but you can stick with it if you really want to.
Don't forget to return your stream so gulp knows when a task is finished.
I also generally wrap all my watchers inside one watch task, not need to separate them.
To me, your gulpfile should look like this:
var gulp = require('gulp'),
less = require('gulp-less'),
cssmin = require('gulp-cssmin'),
rename = require('gulp-rename');
gulp.task('watch', function () {
gulp.watch('./*.less', ['less']);
});
gulp.task('less', function () {
return gulp.src('./*.less')
.pipe(less().on('error', function (err) {
console.log(err);
}))
.pipe(cssmin().on('error', function(err) {
console.log(err);
}))
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('./'));
});
gulp.task('default', ['less', 'watch']);

There is no needing after time, convinient solution for me was:
var gulp = require('gulp'),
less = require('gulp-less'),
cssmin = require('gulp-cssmin'),
plumber = require('gulp-plumber'),
rename = require('gulp-rename');
gulp.task('watch', function () {
gulp.watch('./styles/*.less', ['less']);
});
gulp.task('less', function () {
gulp.src('./styles/*.less')
.pipe(plumber())
.pipe(less())
.pipe(gulp.dest('./styles/'))
.pipe(cssmin())
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('./styles'))
});
gulp.task('default', ['less', 'watch']);

Best of both worlds might be to add the gulp.watch to the default gulp.task and if you require browser-sync it will reload when you make any changes to the folders being watched as shown below:
var gulp = require('gulp'),
less = require('gulp-less'),
cssmin = require('gulp-cssmin'),
rename = require('gulp-rename'),
browser = require('browser-sync');
gulp.task('less', function() {
return gulp.src('./*.less')
.pipe(less().on('error', function(err) {
console.log(err);
}))
.pipe(cssmin().on('error', function(err) {
console.log(err);
}))
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('./'));
});
gulp.task('server', function() {
browser({
server: {
baseDir: './'
}
});
});
gulp.task('default', ['less', 'server'], function() {
gulp.watch('./*.less', ['less', browser.reload]);
});

This is the way I did it with sass. Kind of the same with less.
The difference with the previous answers is that I wanted one more step:
Get the sass
Transform it into a css and create the file
Get that file and minify it.
So the structure would be like this:
test.scss
test.css
test.min.css
var gulp = require("gulp"),
sass = require("gulp-sass"),
rename = require("gulp-rename");
var paths = {
webroot: "./wwwroot/"
};
paths.scss = paths.webroot + "css/**/*.scss";
gulp.task('sass', function() {
gulp.src(paths.scss)
.pipe(sass())
.pipe(gulp.dest(paths.webroot + "css"))
.pipe(cssmin())
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest(paths.webroot + "css"));
});
Added a new answer in case someone want the same thing as me.