runsequence is the code below is not quite working?
var gulp = require('gulp');
var del = require('del');
var browserify = require('gulp-browserify');
var concat = require('gulp-concat');
var runSequence = require('run-sequence');
var nodemon = require('gulp-nodemon');
gulp.task('clean', function(cb) {
console.log('YOLO1');
del(['build/*'], cb);
});
gulp.task('copy', function() {
console.log('YOLO2')
return gulp.src('client/www/index.html')
.pipe(gulp.dest('build'));
});
gulp.task('browserify', function() {
console.log('YOLO3')
return gulp.src('client/index.js')
.pipe(browserify({transform: 'reactify'}))
.pipe(concat('app.js'))
.pipe(gulp.dest('build'));
});
gulp.task('build', function(cb) {
console.log('YOLO4')
runSequence('clean', 'browserify', 'copy', cb);
});
gulp.task('default', ['build'], function() {
gulp.watch('client/*/*', ['build']);
nodemon({ script: './bin/www', ignore: ['gulpfile.js', 'build', 'client', 'dist'] });
});
Current Output:
YOLO4,
YOLO1
DESIRED Output:
YOLO4,
YOLO1,
YOLO3,
YOLO2
I am not sure why runSequence is only executing the first task and unable to execute the rest? any ideas?
del does not take a callback, but returns synchronously: (see first sample in https://github.com/gulpjs/gulp/blob/master/docs/recipes/delete-files-folder.md)
gulp.task('clean', function() {
console.log('YOLO1');
return del(['build/*']);
});
Related
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/
How should I form my 'build' task in my gulpfile.js? Right now I have only set a runSequence on all my current tasks, which destination is the src folder and not distribution.
Should I write secondary tasks like for example sass-dist , 'js-dist' etc..?
var gulp = require('gulp'),
sass = require('gulp-sass'),
plumber = require('gulp-plumber'),
gutil = require('gulp-util'),
pug = require('gulp-pug'),
browserSync = require('browser-sync').create(),
useref = require('gulp-useref'),
uglify = require('gulp-uglify'),
gulpIf = require('gulp-if'),
cssnano = require('gulp-cssnano'),
imagemin = require('gulp-imagemin'),
cache = require('gulp-cache'),
del = require('del'),
runSequence = require('run-sequence');
function handleError(err) {
gutil.beep();
console.log(err.toString());
this.emit('end');
}
gulp.task('sass', function () {
return gulp.src('src/scss/**/*.scss')
.pipe(plumber({
errorHandler: handleError
}))
.pipe(sass()) // Using gulp-sass
.pipe(gulp.dest('src/css'))
.pipe(browserSync.reload({
stream: true
}));
});
gulp.task('views', function buildHTML() {
return gulp.src('src/views/*.pug')
.pipe(pug({}))
.pipe(gulp.dest('src/'))
});
gulp.task('watch', ['browserSync', 'views', 'sass'], function () {
gulp.watch('src/scss/**/*.scss', ['sass']);
gulp.watch('src/views/**/*.pug', ['views']);
// Reloads the browser whenever HTML or JS files change
gulp.watch('src/views/**/*.pug', browserSync.reload);
gulp.watch('src/*.html', browserSync.reload);
gulp.watch('src/js/**/*.js', browserSync.reload);
});
gulp.task('browserSync', function () {
browserSync.init({
server: {
baseDir: 'src'
},
});
});
gulp.task('useref', function () {
return gulp.src('src/*.html')
.pipe(useref())
.pipe(gulpIf('*.js', uglify()))
// Minifies only if it's a CSS file
.pipe(gulpIf('*.css', cssnano()))
.pipe(gulp.dest('dist'));
});
gulp.task('images', function () {
return gulp.src('src/img/**/*.+(png|jpg|jpeg|gif|svg)')
// Caching images that ran through imagemin
.pipe(cache(imagemin({
interlaced: true
})))
.pipe(gulp.dest('dist/images'));
});
gulp.task('fonts', function () {
return gulp.src('src/fonts/**/*')
.pipe(gulp.dest('dist/fonts'));
});
gulp.task('clean:dist', function () {
return del.sync('dist');
});
gulp.task('build', function (callback) {
console.log('Building project...')
runSequence('clean:dist', ['views', 'sass', 'useref', 'images', 'fonts'],
callback
);
});
gulp.task('default', function (callback) {
runSequence(['views', 'sass', 'browserSync', 'watch'],
callback
);
});
Dir list view:
Yes. You must write all tasks
var gulp = require('gulp'),
watch = require('gulp-watch'),
autoprefixer = require('gulp-autoprefixer'),
jshint = require('gulp-jshint'),
stylish = require('jshint-stylish'),
sass = require('gulp-sass'),
rename = require("gulp-rename"),
minifyCss = require('gulp-minify-css'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
concat = require('gulp-concat'),
plumber = require('gulp-plumber'),
concatCss = require('gulp-concat-css'),
jade = require('gulp-jade');
// Jade
gulp.task('jade', function(){
gulp.src('app/*.jade')
.pipe(jade({pretty: true}))
.pipe(gulp.dest('./dist/'));
});
//Sass to dist
gulp.task('sass-dist', function () {
return gulp.src('app/sass/**/*.scss')
.pipe(gulp.dest('dist/sass/'));
});
// compiled sass
gulp.task('sass', function () {
return gulp.src('app/sass/**/*.scss')
.pipe(plumber())
.pipe(sass())
.pipe(autoprefixer({
browsers: ['last 10 versions'],
cascade: false
}))
.pipe(gulp.dest('dist/css/'))
.pipe(minifyCss())
.pipe(rename({suffix: ".min",}))
.pipe(gulp.dest('dist/css/'));
});
// Merge all css files in one
gulp.task('css', function(){
return gulp.src('app/css/*.css')
.pipe(concatCss("all-pluging.css"))
.pipe(minifyCss())
.pipe(gulp.dest('dist/css'));
});
// minify images
gulp.task('images', function(){
return gulp.src('app/images/**/*.*')
.pipe(imagemin())
.pipe(gulp.dest('dist/images'));
});
gulp.task('images-content', function(){
return gulp.src('app/assets/images/**/*.*')
.pipe(imagemin())
.pipe(gulp.dest('dist/assets/images'));
});
gulp.task('jshint', function(){
return gulp.src('app/js/*.js')
.pipe(jshint())
.pipe(jshint.reporter(stylish))
});
// Merged all js files in one
gulp.task('concat', function() {
return gulp.src(['app/js/jquery/*.js','app/js/lib/*.js'])
.pipe(uglify())
.pipe(concat('all-plugins.js'))
.pipe(rename("all-plugins.min.js"))
.pipe(gulp.dest('dist/js/'));
});
gulp.task('js',function(){
gulp.src('app/js/main.js')
.pipe(plumber())
.pipe(gulp.dest('dist/js/'))
.pipe(uglify())
.pipe(rename("main.min.js"))
.pipe(gulp.dest('dist/js/'));
});
gulp.task('watch', function(){
gulp.watch('app/*.jade',['jade']);
gulp.watch('app/sass/*.scss', ['sass-dist','fonts','sass'] );
gulp.watch('app/assets/images/**/*.*', ["images-content"]);
gulp.watch('app/images/*.*', ["images"]);
gulp.watch("app/css/**/*.css", ["css"]);
gulp.watch('app/js/**/*.js', ["jshint", "concat", "js"]);
});
// Default
gulp.task('default', ['jade',"sass-dist","sass",'css','fonts',"jshint",'concat','js','images','images-content', "watch"]);
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
I used gulp with broswersync, to watch any front end changes. But in the same time I'm using node.js so I need nodemon to restart server if I changed anything on the server side. Not sure I'm doing it right, below is my gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
var nodemon = require('gulp-nodemon');
gulp.task('serve', function() {
browserSync.init({
server: "./public"
});
gulp.watch(['./public/*.html', './public/js/*.js']).on('change', reload);
});
gulp.task('sass', function () {
return gulp.src('./public/sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./public/css'))
.pipe(reload({stream: true}));
});
gulp.task('sass:watch', function () {
gulp.watch('./public/sass/**/*.scss', ['sass'])
});
// our gulp-nodemon task
gulp.task('nodemon', function (cb) {
var started = false;
return nodemon({
script: './bin/www',
ext: 'js',
ignore: ['public/*'],
env: {
'NODE_ENV': 'development',
'DEBUG': 'appname:*'
}
}).on('start', function () {
if (!started) {
cb();
started = true;
}
})
.on('crash', function() {
console.log('nodemon.crash');
})
.on('restart', function() {
console.log('nodemon.restart');
})
.once('quit', function () {
process.exit();
});
});
gulp.task('default', ['serve','sass','sass:watch','nodemon']);
I run gulp but it has error of
Error: listen EADDRINUSE :::3000
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.