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.

Reload browsersync when js files change

There are two things with my gulpfile.js.
1: I want to reload browser when js files changed. Sass and html files are working correctly but, when js files change, no action in browser.
2: I just wonder about this topic: Which modules should I use for dynamic html files. Pug/jade or gulp-inject-partials.
Here is my gulpfile.js
var gulp = require('gulp'),
sass = require('gulp-sass'),
browserSync = require('browser-sync'),
reload = browserSync.reload(),
autoprefixer = require('gulp-autoprefixer'),
browserify = require('gulp-browserify'),
clean = require('gulp-clean'),
concat = require('gulp-concat'),
merge = require('merge-stream'),
newer = require('gulp-newer'),
imagemin = require('gulp-imagemin'),
injectPartials = require('gulp-inject-partials'),
pug = require('gulp-pug');
var sourcePath = {
sassSource: 'src/scss/*.scss',
htmlSource: 'src/*.html',
htmlPartialsSource: 'src/partial/*.html',
jsSource: 'src/js/**',
imgSource: 'src/img/**',
pugSource: 'src/views/*.pug'
}
var appPath = {
root: 'app/',
css: 'app/css',
js: 'app/js',
img: 'app/img'
}
gulp.task('clean-html', function() {
return gulp.src(appPath.root + '/*.html', {read: false, force: true})
.pipe(clean());
});
gulp.task('clean-script', function() {
return gulp.src(appPath.js + '/*.js', {read: false, force: true})
.pipe(clean());
});
gulp.task('script', ['clean-script'], function() {
return gulp.src(sourcePath.jsSource)
.pipe(concat('main.js'))
.pipe(browserify())
.pipe(gulp.dest(appPath.js))
});
gulp.task('html', function() {
return gulp.src(sourcePath.htmlSource)
.pipe(injectPartials())
.pipe(gulp.dest(appPath.root))
});
gulp.task('sass', function() {
var bootstrapCSS = gulp.src('./node_modules/bootstrap/dist/css/bootstrap.css'),
sassFiles;
sassFiles = gulp.src(sourcePath.sassSource)
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
return merge(bootstrapCSS, sassFiles)
.pipe(concat('app.css'))
.pipe(gulp.dest(appPath.css));
});
gulp.task('images', function() {
return gulp.src(sourcePath.imgSource)
.pipe(newer(appPath.img))
.pipe(imagemin())
.pipe(gulp.dest(appPath.img));
});
gulp.task('serve', function() {
browserSync.init([appPath.css + '/*.css', appPath.root + '/*.html', appPath.js + '/*.js'], {
server:{
baseDir: appPath.root
}
})
});
gulp.task('watch', ['serve', 'sass', 'clean-html', 'script', 'clean-script', 'images', 'html'], function() {
gulp.watch([sourcePath.sassSource], ['sass']);
gulp.watch([sourcePath.jsSource], ['script']);
gulp.watch([sourcePath.imgSource], ['images']);
gulp.watch([sourcePath.htmlSource, sourcePath.htmlPartialsSource], ['html']);
});
gulp.task('default', ['watch']);

I found a solution. I changed watch & server task.
gulp.task('watch', function () {
gulp.watch(sourcePath.sassSource, ['sass']);
gulp.watch(['src/view/**/*', sourcePath.pugSource], ['view']);
gulp.watch(sourcePath.jsSource, ['script']);
gulp.watch(sourcePath.imgSource, ['images']);
// init server
browserSync.init({
server: {
proxy: "local.build",
baseDir: appPath.root
}
});
gulp.watch([appPath.root + '**'], browserSync.reload);
});
gulp.task('default', ['watch']);

I was able to edit the gulp.task('serve') to accomplish this:
var reload = browserSync.reload;
gulp.task('serve', function () {
// Serve files from the root of this project
browserSync.init({
server: {
baseDir: "./"
}
});
gulp.watch("*.html").on("change", reload);
gulp.watch("./_assets/css/*.css").on("change", reload);
gulp.watch("./_assets/js/*.js").on("change", reload);
});

Gulp: How to concatenate files after they have compiled?

My goal is to compile and minify a few CSS and JS files, and one HTML file into a new HTML file which should have this kind of structure:
<script>
... compiled JS files ...
</script>
<style>
... minified CSS files ...
</style>
<html file>
This is my file structure:
This is my gulpfile:
const gulp = require('gulp');
const plumber = require('gulp-plumber');
var rename = require('gulp-rename');
var csslint = require('gulp-csslint');
var cssComb = require('gulp-csscomb');
var cleanCss = require('gulp-clean-css');
var jshint = require('gulp-jshint'); // removed
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var minifyHtml = require('gulp-minify-html');
const babel = require('gulp-babel');
const inject = require('gulp-inject-string');
const gulpMerge = require('gulp-merge');
const del = require('del');
const runSequence = require('gulp-sequence');
gulp.task('clean', function () {
return del([
'dist/**/*',
]);
});
gulp.task('css', function () {
gulp.src(['src/**/*.css'])
.pipe(plumber())
.pipe(cssComb())
.pipe(csslint())
.pipe(csslint.formatter())
.pipe(concat('bundle.css'))
.pipe(gulp.dest('dist/'))
.pipe(rename({
suffix: '.min'
}))
.pipe(cleanCss())
.pipe(gulp.dest('dist/'))
});
gulp.task('js', function () {
gulp.src(['src/js/**/*.js'])
.pipe(concat('bundle.js'))
.pipe(babel({
presets: 'env'
}))
.pipe(plumber({
handleError: function (err) {
console.log(err);
this.emit('end');
}
}))
.pipe(gulp.dest('dist/'))
.pipe(rename({
suffix: '.min'
}))
.pipe(uglify())
.pipe(gulp.dest('dist/'))
});
gulp.task('html', function () {
gulp.src(['src/html/**/*.html'])
.pipe(plumber({
handleError: function (err) {
console.log(err);
this.emit('end');
}
}))
.pipe(rename({
suffix: '.min'
}))
.pipe(minifyHtml())
.pipe(gulp.dest('dist/'))
});
gulp.task('concatenateFiles', function() {
return gulpMerge(
gulp.src('dist/bundle.css')
.pipe(inject.wrap("\n<style>\n", "\n</style>\n")),
gulp.src('dist/bundle.js')
.pipe(inject.wrap("\n<script>\n", "\n</script>\n\n")),
gulp.src('src/html/player.html')
)
.pipe(concat('widget.html'))
.pipe(gulp.dest('dist/'));
});
gulp.task('concatenateFilesMinified', function() {
return gulpMerge(
gulp.src('dist/bundle.min.css')
.pipe(inject.wrap('<style>', '</style>')),
gulp.src('dist/bundle.min.js')
.pipe(inject.wrap('<script>', '</script>')),
gulp.src('dist/player.min.html')
)
.pipe(concat('widget.min.html'))
.pipe(gulp.dest('dist/'));
});
const js = 'src/**/*.js';
const css = 'src/**/*.css';
const html = 'src/**/*.html';
const all = [js, css, html];
gulp.task('default', ['clean', 'js', 'css', 'html'], function () {
gulp.watch(js, ['js']);
gulp.watch(css, ['css']);
gulp.watch(html, ['html']);
setTimeout(function() {
runSequence(['concatenateFiles', 'concatenateFilesMinified']);
}, 2000);
});
I know this is a bad approach, especially if you look at the setTimeout(), but I'm just so lost at this point (and this is my first gulpfile).
I've also tried this:
gulp.task('default', ['clean', 'js', 'css', 'html', 'concatenateFiles', 'concatenateFilesMinified'], function () {
gulp.watch(js, ['js']);
gulp.watch(css, ['css']);
gulp.watch(html, ['html']);
});
But the problem is that all dependency tasks are executed in parallel, so the 'concatenateFiles' and 'concatenateFilesMinified' are started before their dependencies (eg JS, CSS and HTML) are ready.
Furthermore, gulp.watch() would only work for js, css and html tasks.
How do I do this properly?
TLDR:
I want to:
build CSS, JS and HTML files from src folder (1 file for each type)
concatenate those three files into one file (wrapping JS into <script>, CSS into <style>) into dist/widget.html
minify the file from step 2. into dist/widget.min.html
I want these 3 things to happen when I run gulp default.
Furthermore, I also want files from step 2. and 3. to be refreshed every time I make changes to files in src/ folder

runSequence should work with tasks, which are returning something. Add 'return' for js, html, concatenateFiles, concatenateFilesMinified

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'));
});

Gulp error with yeoman webapp generator using gulp-jade

I have a hard time integrating jade with yeoman's gulp webapp generator.
The watch task is already working as expected but once I try to build the project I get the following error:
stream.js:94
throw er; // Unhandled stream error in pipe.
^
TypeError: path must be a string
I assume it is because I changed the html task to return gulp.src('.tmp/*.html') (it was 'app/*.html' originally, which runs without an error but of course ignores my jade templates).
My gulpfile:
'use strict';
// generated on 2014-04-17 using generator-gulp-webapp 0.0.7
var gulp = require('gulp'),
jade = require('gulp-jade');
// load plugins
var $ = require('gulp-load-plugins')();
gulp.task('styles', function () {
return gulp.src('app/styles/main.sass')
.pipe($.rubySass({
style: 'expanded',
compass: true,
loadPath: 'app/bower_components'
}))
.pipe($.autoprefixer('> 5%', 'last 3 versions', 'ff >= 20', 'ie 9'))
.pipe(gulp.dest('.tmp/styles'))
.pipe($.size());
});
gulp.task('templates', function() {
var YOUR_LOCALS = {};
return gulp.src('app/*.jade')
.pipe(jade({
locals: YOUR_LOCALS,
pretty: true
}))
.pipe(gulp.dest('.tmp'))
.pipe($.size());
});
gulp.task('scripts', function () {
return gulp.src('app/scripts/**/*.js')
.pipe($.jshint())
.pipe($.jshint.reporter($.jshintStylish))
.pipe($.size());
});
gulp.task('html', ['templates', 'styles', 'scripts'], function () {
var jsFilter = $.filter('**/*.js');
var cssFilter = $.filter('**/*.css');
return gulp.src('.tmp/*.html')
.pipe($.useref.assets())
.pipe(jsFilter)
.pipe($.uglify())
.pipe(jsFilter.restore())
.pipe(cssFilter)
.pipe($.csso())
.pipe(cssFilter.restore())
.pipe($.useref.restore())
.pipe($.useref())
.pipe(gulp.dest('dist'))
.pipe($.size());
});
gulp.task('images', function () {
return gulp.src('app/images/**/*')
.pipe($.cache($.imagemin({
optimizationLevel: 3,
progressive: true,
interlaced: true
})))
.pipe(gulp.dest('dist/images'))
.pipe($.size());
});
gulp.task('fonts', function () {
return $.bowerFiles()
.pipe($.filter('**/*.{eot,svg,ttf,woff}'))
.pipe($.flatten())
.pipe(gulp.dest('dist/styles/fonts'))
.pipe($.size());
});
gulp.task('clean', function () {
return gulp.src(['.tmp', 'dist'], { read: false }).pipe($.clean());
});
gulp.task('build', ['html', 'images', 'fonts']);
gulp.task('default', ['clean'], function () {
gulp.start('build');
});
gulp.task('connect', function () {
var connect = require('connect');
var app = connect()
.use(require('connect-livereload')({ port: 35729 }))
.use(connect.static('app'))
.use(connect.static('.tmp'))
.use(connect.directory('app'));
require('http').createServer(app)
.listen(9000)
.on('listening', function () {
console.log('Started connect web server on http://localhost:9000');
});
});
gulp.task('serve', ['connect', 'styles', 'templates'], function () {
require('opn')('http://localhost:9000');
});
// inject bower components
gulp.task('wiredep', function () {
var wiredep = require('wiredep').stream;
gulp.src('app/styles/*.sass')
.pipe(wiredep({
directory: 'app/bower_components'
}))
.pipe(gulp.dest('app/styles'));
gulp.src('app/*.html')
.pipe(wiredep({
directory: 'app/bower_components'
}))
.pipe(gulp.dest('app'));
});
gulp.task('watch', ['connect', 'serve'], function () {
var server = $.livereload();
// watch for changes
gulp.watch([
'app/*.html',
'app/**/*.jade',
'.tmp/styles/**/*.css',
'app/scripts/**/*.js',
'app/images/**/*'
]).on('change', function (file) {
server.changed(file.path);
});
gulp.watch('app/**/*.jade', ['templates']);
gulp.watch('app/styles/**/*.sass', ['styles']);
gulp.watch('app/scripts/**/*.js', ['scripts']);
gulp.watch('app/images/**/*', ['images']);
gulp.watch('bower.json', ['wiredep']);
});
Any suggestions?

Apparently the error came from gulp-useref having problems with my build blocks.
Changing all blocks to use {app,.tmp} as it's search path fixed the behaviour, e.g.:
// build:js({app,.tmp}) scripts/vendor/modernizr.js
script(src='bower_components/modernizr/modernizr.js')
// endbuild

I encountered the same problem.
To fix your wiredep task, add this after the gulp.src('app/*.html') block:
gulp.src('app/*.jade')
.pipe(wiredep({
directory: 'app/bower_components'
}))
.pipe(gulp.dest('app'));
This will update the // bower:js ... // endbower blocks in your .jade files when your bower.json changes, triggered by the watch:
gulp.watch('bower.json', ['wiredep']);
at the end of your gulpfile.
Eg.
When I add "jquery": "~1.11.0" as a dependencies in my bower.json (and save).
In my /app/layout.jade file, this:
body
// bower:js
// endbower
Gets replaced with:
body
// bower:js
script(src='bower_components/jquery/dist/jquery.js')
// endbower
If you want to use build:js without adding ({app,.tmp}) to all of your blocks, in your html task, add both app and .tmp to the source.
Your .js and .css are in the app directory, so when you changed the source to .tmp/*.html instead of app/*.html, your two $.filters didn't find any files.
To work around this, make the gulp.src() an array containing both paths.
Replace:
gulp.task('html', ['templates', 'styles', 'scripts'], function () {
var jsFilter = $.filter('**/*.js');
var cssFilter = $.filter('**/*.css');
return gulp.src('.tmp/*.html')
...
With:
gulp.task('html', ['templates', 'styles', 'scripts'], function () {
var jsFilter = $.filter('**/*.js');
var cssFilter = $.filter('**/*.css');
return gulp.src(['app/*.html', '.tmp/*.html'])
...