Develop Reference

Gulp concat and minify with a watch task

I'm trying to setup a some Gulp tasks. I want to concatenate some JS files, minify them to create 1 JS file, but I want this done each time a change has been made in the original JS files but I can't seem to get the 'watch' task running properly
This is my Gulpfile.js
gulp.task('minify', ['watch', 'scripts'], function(){
gulp.src('themes/corp-fluid/js/dist/**/*.js')
.pipe(minify({
ext:{
src:'-debug.js',
min:'.js'
},
ignoreFiles: ['-min.js']
}))
.pipe(gulp.dest('themes/corp-fluid/js/dist'));
});
gulp.task('scripts', function(){
return gulp.src(['themes/corp-fluid/js/slick.js', 'themes/corp-fluid/js/functions.js'])
.pipe(concat('main.js'))
.pipe(gulp.dest('themes/corp-fluid/js/dist'));
});
gulp.task('watch', function(){
gulp.watch('themes/corp-fluid/js/**/*.js');
});

A couple of things. You need to call something in your
'watch' task, so
gulp.task('watch', function(){
gulp.watch('themes/corp-fluid/js/**/*.js', ['minify']);
});
and simplify the first line of your 'minify' task to
gulp.task('minify', ['scripts'], function(){
you don't need to call the 'watch' task again there. And finally you would be running the whole thing with
gulp watch

Gulpfile with sass, js concat, minify, and watch task.
You need change proxy domain name to yor domain name in browser-sync task, and change array of files in concat_js task.
var gulp = require('gulp')
var browserSync = require('browser-sync')
var sass = require('gulp-sass')
var concat = require('gulp-concat');
var minify = require('gulp-minify');
//Sass
gulp.task('sass', function () {
return gulp.src('app/sass/**/*.scss')
.pipe(sass())
// pipe(gulp.dest('app/css'))
.pipe(gulp.dest('app/css/'))
});
//browser reload
gulp.task('browser-sync', function () {
browserSync({
notify: false,
proxy: "http://front-end" //Your domain name
});
});
//concat
gulp.task('concat_js', function() {
//An array of files is required for the correct order of contact
return gulp.src(['app/js/_helpers.js',
'app/js/_cookie_notice.js']) //file array need for
.pipe(concat('all.js'))
.pipe(minify({
ext:{
src:'',
min:'.min.js'
},
noSource: true}))
.pipe(gulp.dest('app/js/'));
});
//watch
gulp.task('watch', ['browser-sync', 'sass'], function () {
gulp.watch('app/sass/**/*.scss', ['sass']);
gulp.watch('app/js/*.js', ['concat_js']);
gulp.watch('app/**/*.*', browserSync.reload);
});
gulp.task('default', ['watch', 'sass', 'concat_js']);
Note: An array of files in task concat_js is required for the correct order of file contact.

Why would Browsersync live reload for one compilation task but not another?

I have a gulpfile running to compile Sass, CoffeeScript, and live reload both through Browsersync:
var gulp = require('gulp');
var plumber = require('gulp-plumber');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var cssmin = require('gulp-cssmin');
var coffee = require('gulp-coffee');
var uglify = require('gulp-uglify');
var browserSync = require('browser-sync');
gulp.task('sass', function() {
return gulp.src('./src/scss/**/*.scss')
.pipe(plumber())
.pipe(sass({
style: 'expanded',
precision: 10
}))
.pipe(autoprefixer({browsers: ['> 1%', 'last 2 versions', 'Firefox ESR']}))
.pipe(cssmin())
.pipe(gulp.dest('./dist'))
.pipe(browserSync.stream());
});
gulp.task('coffee', function() {
return gulp.src('./src/coffee/**/*.coffee')
.pipe(plumber())
.pipe(coffee())
.pipe(uglify())
.pipe(gulp.dest('./dist'))
.pipe(browserSync.stream());
});
gulp.task('serve', function() {
browserSync.init({
proxy: 'http://mamp-site.dev'
});
gulp.watch('./src/scss/**/*.scss', ['sass']);
gulp.watch('./src/coffee/**/*.coffee', ['coffee']);
});
Browsersync successfully reloads my compiled JS every time I make a change, but won't reload my compiled CSS. I know placing browserSync.stream() after gulp.dest() is correct, because Browsersync says it only cares about your CSS when it's finished compiling. I also verified that my Sass is compiling.
Why would Browsersync work for my 'coffee' task but not my 'sass' task? This is my first go at gulp, so I'm hoping it's something simple.
EDIT: watching 'sass' only within the 'serve' task works, but not with both 'sass' and 'coffee'

I don't know why your sass is not reloading, but you should not be using browserSync.stream for your javascript. Perhaps the streams are getting mixed up. Your watch should be
gulp.watch('./src/coffee/**/*.coffee', ['coffee-watch']);
and there should be
gulp.task('coffee-watch', ['coffee'], function (done) {
browserSync.reload();
done();
});
Remove .pipe(browserSync.stream()); from your coffee task.

How to tell gulp.watch to wait until necessary tasks will not be finished before running new cycle?

I have an issue with gulp.watch.
TLDR:
How to tell gulp.watch to wait until necessary tasks will not be finished before running new cycle?
Reasons:
I have three tasks: clean, build, and watch.
Task clean deletes directory, task build produces files in the same directory (clean is dependency for build).
Task watch runs gulp.watch on directory and then it runs build (that runs clean).
But sometimes watch task runs new build before previous build is finished and an error occurs: build continues write to directory and clean tries to remove directory (of course, ENOTEMPTY error happens).
This issue happens when I run gulp watch command.
My Gulpfile.js:
var gulp = require('gulp');
var ts = require('gulp-typescript');
var tslint = require('gulp-tslint');
var rename = require('gulp-rename');
var del = require('del');
var tsProject = ts.createProject('tsconfig.json');
var tsSources = ['app/**/*.ts', 'app/**/*.tsx'];
gulp.task('clean', function() {
return del(['built']);
});
gulp.task('build', ['clean'], function() {
return gulp.src(tsSources)
.pipe(ts(tsProject)).js
.pipe(rename({extname: '.js'}))
.pipe(gulp.dest('built'));
});
gulp.task('tslint', ['clean'], function() {
return gulp.src(tsSources)
.pipe(tslint())
.pipe(tslint.report('msbuild', {
emitError: false,
summarizeFailureOutput: false
}));
});
gulp.task('watch', ['build', 'tslint'], function() {
return gulp.watch(tsProject.config.filesGlob, ['build', 'tslint']);
});
gulp.task('default', ['build', 'tslint']);

For cleaning the gulp use following code:-
gulp.task('clean', function() {
del.sync([
path.join(__dirname, builtPath, '**/*.js'),
], {
force: true
});
});

Gulp 4 & BrowserSync: Style Injection?

I'm attempting to use browser-sync with Gulp 4, but bs is not preserving state, and instead does a full refresh. This is not very useful. It seems bs no longer supports true injection. I filed an issue on GH if you want to contribute.
Here is the pertinent code:
// styles:dev task
gulp.task('styles:dev', function() {
return gulp.src(config.src)
.pipe(sourcemaps.init())
.pipe(postcss(config.postcss.dev))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(config.dest.dev))
.pipe(browserSync.stream());
});
// browserSync task
gulp.task('browserSync', function(cb) {
browserSync.init(config, cb);
});
// Watch task:
gulp.task('watch:styles', function() {
return gulp.watch(config.paths.css,
gulp.series('styles:dev'));
});
gulp.task('watch', gulp.parallel('watch:styles'));
// default task
gulp.task('default',
gulp.series('clean:dev',
gulp.parallel('copy:dev', 'styles:dev'), 'browserSync', 'watch')
);
Thanks in advance.

Fixed. Here's where I went wrong:
The browser-sync constructor takes an options object, which can include a files array. Most of the tutorials I've read, including the gulpfile for Google's very own Web Starter Kit, do not include this. As it turns out, this is required for style injection to preserve state.
Furthermore, do not pass .stream() or .reload() as the final pipe in your styles task. It is not needed, and will short circuit style injection, forcing a full refresh.
Finally, the browserSync process must not be terminated, and watch and browserSync tasks must execute in parallel in order for live style injection to take place.
Hope this helps anybody facing this issue.
I also closed the corresponding github issue, and posted my gulpfile

Almost 3 years later Gulp 4 now looks a little bit different, see https://gulpjs.com/docs/en/getting-started/creating-tasks
To have a complete Gulp 4 kickstart example, see https://gist.github.com/leymannx/8f6a75e8ad5055276a71d2901813726e
// Requires Gulp v4.
// $ npm uninstall --global gulp gulp-cli
// $ rm /usr/local/share/man/man1/gulp.1
// $ npm install --global gulp-cli
// $ npm install
const { src, dest, watch, series, parallel } = require('gulp');
const browsersync = require('browser-sync').create();
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const sourcemaps = require('gulp-sourcemaps');
const plumber = require('gulp-plumber');
const sasslint = require('gulp-sass-lint');
const cache = require('gulp-cached');
// Compile CSS from Sass.
function buildStyles() {
return src('scss/ix_experience.scss')
.pipe(plumber()) // Global error listener.
.pipe(sourcemaps.init())
.pipe(sass({ outputStyle: 'compressed' }))
.pipe(autoprefixer(['last 15 versions', '> 1%', 'ie 8', 'ie 7']))
.pipe(sourcemaps.write())
.pipe(dest('css/'))
.pipe(browsersync.reload({ stream: true }));
}
// Watch changes on all *.scss files, lint them and
// trigger buildStyles() at the end.
function watchFiles() {
watch(
['scss/*.scss', 'scss/**/*.scss'],
{ events: 'all', ignoreInitial: false },
series(sassLint, buildStyles)
);
}
// Init BrowserSync.
function browserSync(done) {
browsersync.init({
proxy: 'blog.localhost', // Change this value to match your local URL.
socket: {
domain: 'localhost:3000'
}
});
done();
}
// Init Sass linter.
function sassLint() {
return src(['scss/*.scss', 'scss/**/*.scss'])
.pipe(cache('sasslint'))
.pipe(sasslint({
configFile: '.sass-lint.yml'
}))
.pipe(sasslint.format())
.pipe(sasslint.failOnError());
}
// Export commands.
exports.default = parallel(browserSync, watchFiles); // $ gulp
exports.sass = buildStyles; // $ gulp sass
exports.watch = watchFiles; // $ gulp watch
exports.build = series(buildStyles); // $ gulp build

gulp.watch() not running subsequent task

Running into a bizarre bug when trying to make modular gulp tasks by splitting them into separate files. The following should execute the task css, but does not:
File: watch.js
var gulp = require('gulp');
var plugins = require('gulp-load-plugins')();
gulp.task('watch', function () {
plugins.watch('assets/styl/**/*.styl', ['css']); // PROBLEM
});
Declaring ['css'] in plugins.watch() should technically run the following task next:
File: css.js
var gulp = require('gulp');
var plugins = require('gulp-load-plugins')();
gulp.task('css', function () {
return gulp.src('assets/styl/*.styl')
.pipe(plugins.stylus())
.pipe(gulp.dest('/assets/css'));
});
File: gulpfile.js
var gulp = require('gulp');
var requireDir = require('require-dir');
requireDir('./gulp/tasks', { recurse: true });
gulp.task('develop', ['css', 'watch']);
Folder structure
- gulp/
- tasks/
- css.js
- watch.js
- gulpfile.js
Expected behavior
gulp develop should run tasks css and watch (it does). On file changes, watch should detect them (it does) and then run the css task (it's does not).
One solution
Not terribly fond of this solution as gulp.start() is being deprecated in the next release, but this does fix it:
File: watch.js
plugins.watch('assets/styl/**/*.styl', function() {
gulp.start('css');
});

Either use gulp's builtin watch with this syntax:
gulp.task('watch', function () {
gulp.watch('assets/styl/**/*.styl', ['css']);
});
Or gulp-watch plugin with this syntax:
gulp.task('watch', function () {
plugins.watch('assets/styl/**/*.styl', function (files, cb) {
gulp.start('css', cb);
});
});
There's also probably a typo in your gulp.dest path. Change it to relative:
.pipe(gulp.dest('assets/css'));

I am using Gulp 4, where gulp.start() is deprecated
So here's the solution
gulp.task('watch', gulp.series('some-task-name', function () {
browserSync.init({
server: {
baseDir: config.distFolder + ''
}
});
var watcher = gulp.watch([
'./src/views/*.html',
'./src/index.html',
'./src/assets/css/*.css',
'./src/**/*.js'],
gulp.series('some-task-name'));
watcher.on('change', async function (path, stats) {
console.log('you changed the code');
browserSync.notify("Compiling, please wait!");
browserSync.reload();
})
}));
Now, whenever there is a change in my code, my "some-task-name" gets executed and then the browser page is reloaded. I don't need to delay my browser-sync at all.