Develop Reference

Gulp watch task is not working when sass/js/html file is saved

I am trying to reload the browser when scss, HTML and js file is changed but when I run the gulp watch command it's not reloading the browser or can't see any css/js/html changes.
var gulp = require('gulp');
// Requires the gulp-sass plugin
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
gulp.task('sass', function() {
return gulp.src('app/scss/**/*.scss') // Gets all files ending with .scss in app/scss
.pipe(sass())
.pipe(gulp.dest('app/css'))
.pipe(browserSync.reload({
stream: true
}))
});
gulp.task('browserSync', function() {
browserSync.init({
server: {
baseDir: 'app'
},
})
})
gulp.task('watch', gulp.series(['browserSync', 'sass']), function() {
gulp.watch('app/scss/**/*.scss', gulp.series('sass'));
gulp.watch('app/*.html', browserSync.reload);
gulp.watch('app/js/**/*.js', browserSync.reload);
});

With respect to Mark's solution, just add .on('change', browserSync.relod) to the end of the desired watch if you want to see the live reload:
var gulp = require('gulp');
// Requires the gulp-sass plugin
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
gulp.task('sass', function () {
return gulp.src('app/scss/**/*.scss') // Gets all files ending with .scss in app/scss
.pipe(sass())
.pipe(gulp.dest('app/css'))
.pipe(browserSync.reload({
stream: true
}))
});
gulp.task('browserSync', function (done) {
browserSync.init({
server: {
baseDir: 'app'
},
});
done();
})
gulp.task('watch', gulp.series('browserSync', 'sass', function () {
gulp.watch('app/scss/**/*.scss', gulp.series('sass'));
gulp.watch('app/*.html', browserSync.reload);
gulp.watch('app/js/**/*.js', browserSync.reload);
gulp.watch('app/scss/**/*.scss').on('change', browserSync.reload);
gulp.watch('app/*.html').on('change', browserSync.reload);
gulp.watch('app/js/**/*.js').on('change', browserSync.reload);
}));

You need to make a couple of changes shown here:
gulp.task('browserSync', function(done) { // done added here
browserSync.init({
server: {
baseDir: 'app'
},
});
done(); // done() called here
})
// gulp.task('watch', gulp.series(['browserSync', 'sass']), function() {
gulp.task('watch', gulp.series('browserSync', 'sass', function () { // see note below
gulp.watch('app/scss/**/*.scss', gulp.series('sass'));
// gulp.watch('app/*.html', browserSync.reload);
gulp.watch("app/*.html", { events: 'all' }, function(cb) {
browserSync.reload();
cb();
});
gulp.watch('app/js/**/*.js', browserSync.reload);
})); // added a )
gulp.watch() takes 2 arguments, not 3. gulp.series() should include all the functions - including your anonymous function that contains the watch calls. And lose the array brackets.

Upgrade Gulp 3 to Gulp 4 no reloading BrowserSync

I am trying to upgrade from gulp 3.9 to gulp 4, at first seems everything is working fine but when I make changes (sass, pug or html files) it not reload with browsersync), I do know now if watch or jekyll is the cause of this problem.
I am using:
Gulp: 4.0.0
Gulp CLI: 2.0.1
Npm: 6.4.0
Node: 10.9.0
what can be happening?
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var cp = require('child_process');
var pug = require('gulp-pug');
var sass = require('gulp-sass');
var prefix = require('gulp-autoprefixer');
var minifycss = require('gulp-minify-css');
var bourbon = require('bourbon').includePaths;
var rename = require('gulp-rename');
// Message
var messages = {
jekyllBuild: '<span style="color: white">Running:</span> $ jekyll build'
};
// Paths
var paths = {
html: {
src: ['*.html', '_layouts/*.html', '_posts/*', '_includes/*'],
dest: '_includes'
},
pugFiles: {
src: '_jadefiles/*.jade',
dest: '_includes'
},
styles: {
all: 'assets/css/**',
src: 'assets/css/main.scss',
dest: ['assets/css', '_site/assets/css']
},
scripts: {
src: ['assets/js/**/*.js', 'js/*.js'],
dest: ['js', '_site/assets/js']
}
}
// Compile Pug|Jade files into .html
gulp.task('pug', function() {
return gulp.src(paths.pugFiles.src)
.pipe(pug())
.pipe(gulp.dest(paths.pugFiles.dest));
});
// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
return gulp.src(paths.styles.src)
.pipe(sass({
includePaths: [bourbon],
onError: browserSync.notify
}).on('error', sass.logError))
.pipe(gulp.dest(paths.styles.dest))
.pipe(prefix({
browsers: ['last 15 versions', '> 1%', 'ie 8', 'ie 7'],
cascade: true
}))
.pipe(rename({suffix: '.min', prefix : ''}))
.pipe(minifycss())
.pipe(browserSync.stream());
});
// Watch changes on files
gulp.task('watch', function() {
// gulp.watch(paths.scripts.src).on('change', browserSync.reload);
gulp.watch(paths.html.src, gulp.series('jekyll-rebuild'));
gulp.watch(paths.pugFiles.src, gulp.series('pug'));
gulp.watch(paths.styles.all, gulp.series('sass'));
gulp.watch(paths.html.dest).on('change', browserSync.reload);
});
// Build Jekyll
gulp.task('jekyll-build', function (done) {
browserSync.notify(messages.jekyllBuild);
var pl = process.platform === "win32" ? "jekyll.bat" : "jekyll";
return cp.spawn(pl, ['build'], {stdio: 'inherit'})
.on('close', done);
});
// Rebuild Jekyll site
gulp.task('jekyll-rebuild',
gulp.series('jekyll-build', function () {
browserSync.reload();
})
);
// Static Server
gulp.task('serve', function() {
browserSync.init({
server: {
baseDir: '_site'
}
});
});
gulp.task('default', gulp.series('serve', gulp.parallel('sass', 'pug', 'watch', 'jekyll-build')));

ES6 modules in Gulp

I'm trying to make the boilerplate for frontend development based on GULP. As you can see in the code I've added gulp-babel task, but unfortunately ES6 modules (import, export) aren't working. What should I add to my code to solve this problem?
I read that I should use webpack for these purposes, so what should I do to integrate GULP with webpack
Thank you!
/*JS For Development*/
gulp.task('js', function () {
return gulp.src([
'app/libs/jquery/dist/jquery.min.js',
'app/js/common.js',
])
.pipe(concat('scripts.js'))
.pipe(babel({
presets: ['env']
}))
.pipe(gulp.dest('app/js'))
.pipe(browserSync.reload({stream: true}));
});
gulp.task('browser-sync', function () {
browserSync({
server: {
baseDir: 'app'
},
notify: false,
// open: true,
// tunnel: "gulp-boilerplate"
// Demonstration page: http://gulp-boilerplate.localtunnel.me
})
});
/*Styles For Development*/
gulp.task('sass', function () {
return gulp.src('app/scss/**/*.scss')
.pipe(sass({outputStyle: 'expanded'}).on("error", notify.onError()))
.pipe(autoprefixer(['last 15 versions']))
.pipe(gulp.dest('app/css'))
.pipe(browserSync.reload({stream: true}));
});
gulp.task('imagemin', function () {
return gulp.src('app/img/**/*')
.pipe(cache(imagemin()))
.pipe(gulp.dest('dist/img'));
});
gulp.task('watch', ['sass', 'js', 'browser-sync'], function () {
gulp.watch('app/scss/**/*.scss', ['sass']);
gulp.watch(['libs/**/*.js', 'app/js/common.js'], ['js']);
gulp.watch('app/*.html', browserSync.reload);
});
gulp.task('build', ['removeDist', 'imagemin'], function () {
var buildHtml = gulp.src([
'app/*.html',
'app/.htaccess',
]).pipe(gulp.dest('dist'));
var buildCss = gulp.src([
'app/css/main.css'
])
.pipe(cleanCSS())
.pipe(gulp.dest('dist/css'));
var buildFonts = gulp.src([
'app/fonts/**/*'
]).pipe(gulp.dest('dist/fonts'));
var buildJs = gulp.src([
'app/js/scripts.js',
])
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
});
gulp.task('removeDist', function () {
return del.sync('dist');
});
gulp.task('clearCache', function () {
return cache.clearAll();
});
gulp.task('default', ['watch']);

Remove any import export, and put it all in a file called common.js. Gulp code:
const tpath = { publicJS:[
'src/public/javascripts/utils/common.js',
'src/public/javascripts/*.js']
}
If the utils import stuff, add that path should be first in the array. Code:
const concatJS = ()=> src(tpath.src.publicJS)
.pipe(babel())
.pipe(concat('index.js'))
.pipe(uglify())
.pipe(dest(tpath.dest.publicJS));
Then in the index.html or the pre rendered files add <script src='index.js'></script>

Gulp livereload from build folder

Everything is working fine, except that LiveReload is not watching for changes, and therefore it does not auto-reload the page.
What am I doing wrong?
Here is my Gulp file:
// Gulp.js configuration
var
// modules
gulp = require('gulp'),
newer = require('gulp-newer'),
imagemin = require('gulp-imagemin'),
pug = require('gulp-pug'),
htmlclean = require('gulp-htmlclean'),
concat = require('gulp-concat'),
deporder = require('gulp-deporder'),
stripdebug = require('gulp-strip-debug'),
uglify = require('gulp-uglify'),
sass = require('gulp-sass'),
postcss = require('gulp-postcss'),
assets = require('postcss-assets'),
autoprefixer = require('autoprefixer'),
mqpacker = require('css-mqpacker'),
cssnano = require('cssnano'),
browserSync = require('browser-sync').create(),
// development mode?
devBuild = (process.env.NODE_ENV !== 'production'),
// folders
folder = {
src: 'src/',
build: 'build/'
};
// image processing
gulp.task('images', function () {
var out = folder.build + 'images/';
return gulp.src(folder.src + 'images/**/*')
.pipe(newer(out))
.pipe(imagemin({
optimizationLevel: 5
}))
.pipe(gulp.dest(out));
});
// Pug processing
gulp.task('pug', function buildHTML() {
var out = folder.build
return gulp.src(folder.src + 'views/*.pug')
.pipe(pug({
pretty: true
}))
.pipe(gulp.dest(out))
});
// HTML processing
gulp.task('html', ['images'], function () {
var
out = folder.build + 'html/',
page = gulp.src(folder.src + 'html/**/*')
.pipe(newer(out));
// minify production code
if (!devBuild) {
page = page.pipe(htmlclean());
}
return page.pipe(gulp.dest(out));
});
// JavaScript processing
gulp.task('js', function () {
var jsbuild = gulp.src(folder.src + 'js/**/*')
.pipe(deporder())
.pipe(concat('main.js'));
if (!devBuild) {
jsbuild = jsbuild
.pipe(stripdebug())
.pipe(uglify());
}
return jsbuild.pipe(gulp.dest(folder.build + 'js/'));
});
// CSS processing
gulp.task('css', ['images'], function () {
var postCssOpts = [
assets({
loadPaths: ['images/']
}),
autoprefixer({
browsers: ['last 2 versions', '> 2%']
}),
mqpacker
];
if (!devBuild) {
postCssOpts.push(cssnano);
}
return gulp.src(folder.src + 'scss/styles.scss')
.pipe(sass({
outputStyle: 'nested',
imagePath: 'images/',
precision: 3,
errLogToConsole: true
}))
.pipe(postcss(postCssOpts))
.pipe(gulp.dest(folder.build + 'css/'));
});
gulp.task('browserSync', function () {
browserSync.init({
server: {
baseDir: folder.build
},
port: 3000
});
});
// run all tasks
gulp.task('run', ['pug', 'html', 'css', 'js']);
// watch for changes
gulp.task('watch', ['browserSync'], function () {
// image changes
gulp.watch(folder.src + 'images/**/*', ['images']);
// pug changes
gulp.watch(folder.src + 'views/**/*', ['pug'], browserSync.reload);
// html changes
gulp.watch(folder.src + 'html/**/*', ['html'], browserSync.reload);
// javascript changes
gulp.watch(folder.src + 'js/**/*', ['js'], browserSync.reload);
// css changes
gulp.watch(folder.src + 'scss/**/*', ['css'], browserSync.reload);
});
// default task
gulp.task('default', ['run', 'watch']);

A sample of our working watch gulp configuration is like:
var watch = require('gulp-watch');
watch('./src/**/*.html', function () {
browserSync.reload();
});

Getting gulp task to build two css files

I have a project using gulp to compile all my scss. Now I have a need for two separate builds. Currently my task builds out sites-bootstrap.css. I have another set of css files that is set up to build sites-life-bootstrap.css that will have minimal components in it. I just can't seem to get gulp to build that separate css file.
Below is my current working gulp file.js.
/* jshint node:true */
'use strict';
// generated on 2015-02-10 using generator-gulp-webapp 0.2.0
var gulp = require('gulp');
var fs = require('fs');
require('gulp-grunt')(gulp);
var runs = require('run-sequence');
var $ = require('gulp-load-plugins')();
//build the compile using assemble + grunt
//Note: Assemble's gulp task is very alpha - easier to do this
gulp.task('compile', function(){
gulp.run('grunt-compile');
});
gulp.task('styles', function () {
var sassPaths = ['./bower_components/bootstrap-sass-official/assets/stylesheets'];
return gulp.src('app/styles/sites-bootstrap.scss')
.pipe($.plumber())
.pipe($.sass({
style: 'expanded',
includePaths: sassPaths,
precision: 10
}))
.pipe($.autoprefixer({browsers: ['last 1 version']}))
.pipe($.replace('../bower_components/bootstrap-sass-official/assets/fonts/bootstrap','../fonts'))
.pipe(gulp.dest('dist/styles'));
});
gulp.task('jshint', function () {
return gulp.src('app/scripts/**/*.js')
.pipe($.jshint())
.pipe($.jshint.reporter('jshint-stylish'))
.pipe($.jshint.reporter('fail'));
});
gulp.task('html', ['styles'], function () {
var lazypipe = require('lazypipe');
var cssChannel = lazypipe()
.pipe($.csso);
var assets = $.useref.assets({searchPath: '{.tmp,app}'});
//all the build instructions are in build.html NOT in the hbs files
return gulp.src('app/useref/build.html')
.pipe(assets)
.pipe($.if('*.js', $.uglify()))
.pipe($.if('*.css', cssChannel()))
.pipe(assets.restore()) //do the asset replacement in the html files
.pipe($.useref())
.pipe(gulp.dest('dist'));
});
gulp.task('images', function () {
return gulp.src('app/images/**/*')
.pipe($.cache($.imagemin({
progressive: true,
interlaced: true
})))
.pipe(gulp.dest('dist/images'));
});
gulp.task('fonts', function () {
return gulp.src(require('main-bower-files')().concat('app/fonts/**/*'))
.pipe($.filter('**/*.{eot,svg,ttf,woff,woff2}'))
.pipe($.flatten())
.pipe(gulp.dest('dist/fonts'));
});
gulp.task('extras', function () {
return gulp.src([
'app/extras/*.*'
], {
dot: true
})
.pipe(gulp.dest('dist'));
});
/**
* clean out dist and .tmp
*/
gulp.task('clean', function (cb) {
var del = require('del');
del([
'./.tmp',
'./dist/*',
], cb);
});
gulp.task('connect', ['styles'], function () {
var serveStatic = require('serve-static');
var serveIndex = require('serve-index');
var app = require('connect')()
.use(require('connect-livereload')({port: 35729}))
.use(serveStatic('dist'))
.use(serveIndex('dist'));
require('http').createServer(app)
.listen(9000)
.on('listening', function () {
console.log('Started connect web server on http://localhost:9000');
});
});
gulp.task('cdn', function(){
var json = fs.readFileSync('gulp-aws.json');
var aws = JSON.parse(json);
var opts = aws.cdn;
// create a new publisher
var publisher = $.awspublish.create(opts);
var sourceFolder = ['./dist/styles','./dist/fonts','./dist/images'];
return gulp.src(sourceFolder)
// gulp-awspublish-router defines caching and other options (see above)
//.pipe(awspublishRouter(awsPubRouterOpts))
// publisher will add Content-Length, Content-Type and headers specified above
// if not specified it will set x-amz-acl to public-read by default
// i think the parallelization was causing it to miss some files
.pipe(publisher.publish())
// .pipe(publisher.publish(null, { force: true }))
// delete stuff that has been deleted locally
// can't do this because it will kill 1.9
//.pipe(publisher.sync())
// create a cache file to speed up consecutive uploads
.pipe(publisher.cache())
// print upload updates to console
.pipe($.awspublish.reporter());
});
gulp.task('serve', function (done) {
runs( ['build'], ['watch'], ['open'], done);
});
gulp.task('open', function(){
require('opn')('http://localhost:9000');
});
gulp.task('watch', ['connect'], function () {
$.livereload.listen();
// watch for changes
gulp.watch([
'dist/**/*.html',
'.tmp/styles/**/*.css',
'dist/scripts/**/*.js',
'dist/images/**/*'
]).on('change', $.livereload.changed);
gulp.watch('app/styles/**/*.scss', ['styles']);
gulp.watch('app/**/*.hbs', ['compile']);
});
gulp.task('reload', function(){
$.livereload.changed();
});
gulp.task('deploy', function(done) {
// return gulp.src('./dist/**/*')
// .pipe($.ghPages({origin: 'upstream'}));
console.error('DEPRECATED: Deployment to gh-pages is now handled by Travis CI.');
done();
});
gulp.task('build-report', function () {
return gulp.src('dist/**/*').pipe($.size({title: 'build', gzip: true}));
});
gulp.task('build', function (done) {
runs( ['clean'], ['jshint', 'html', 'images', 'fonts', 'extras'], 'compile', 'build-report', done);
});
gulp.task('default', ['clean'], function () {
gulp.start('build');
});
Here was one attempt at just adding multiple outputs to the styles task:
gulp.task('styles', function () {
var sassPaths = ['./bower_components/bootstrap-sass-official/assets/stylesheets'];
return gulp.src('app/styles/sites-bootstrap.scss', 'app/styles/sites-lite-bootstrap.scss')
.pipe($.plumber())
.pipe($.sass({
style: 'expanded',
includePaths: sassPaths,
precision: 10
}))
.pipe($.autoprefixer({browsers: ['last 1 version']}))
.pipe($.replace('../bower_components/bootstrap-sass-official/assets/fonts/bootstrap','../fonts'))
.pipe(gulp.dest('dist/styles'));
});