Develop Reference

BrowserSync Not Loading

Very new to BrowserSync. I'm trying to find out how to get it going haha.
My main file that stores everything is called 'gulpwork'.
Inside it I have 4 folders; two to convert Pug ('src') to HTML ('dist') and two to convert SASS ('sass') to CSS ('css').
I've managed to get BrowserSync to run however I'm getting the 'Cannot GET /' message so I know it probably has something to do with file directory.
I would like to have both Pug and SASS synced.
EDIT: It only works if I have both my Pug and HTML file outside their respected folders directly inside my root and it only works if the HTML file is named index.html. How can I get it to work in its respected folders and without having to change the name to index?
Here is my gulpfile.js code:
JS:
var gulp = require('gulp');
var pug = require('gulp-pug');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
gulp.task('browserSync', ['sass', 'pug'], function() {
browserSync.init({
server: {
baseDir: './'
}
})
});
gulp.task('pug', function() {
gulp.src('./src/*.pug')
.pipe(pug({
pretty: true
}))
.pipe(gulp.dest('./dist'))
});
gulp.task('sass', function() {
return gulp.src('./sass/*.sass')
.pipe(sass())
.pipe(gulp.dest('./css'))
.pipe(browserSync.reload({stream: true}))
});
gulp.task('watch', ['browserSync'], function() {
gulp.watch('./src/*.pug', ['pug']);
gulp.watch('./sass/*.sass', ['sass']);
gulp.watch('./dist/*.html').on('change', browserSync.reload);
});
gulp.task('default', ['sass', 'pug', 'watch']);

Figured it out. BrowserSync looks for an 'index.html' file to start up and we get the 'cannot GET /' error because it's looking for something it doesn't see. So wherever our pug/html files are located, we must tell the pug function + the watch function where they are and then run BrowserSync. After it's run, you will still see the error however it's really working. All you have to do is link to the file so in my browser after localhost:3000 I would type the location of my file, so it would be 'localhost:3000/dist/about.html' After that, BrowserSync works. :)
var gulp = require('gulp');
var pug = require('gulp-pug');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
gulp.task('browserSync', ['sass', 'pug'], function() {
browserSync.init({
server: {
baseDir: './'
}
})
});
gulp.task('pug', function() {
gulp.src('./src/*.pug')
.pipe(pug({
pretty: true
}))
.pipe(gulp.dest('./dist'));
});
gulp.task('sass', function() {
return gulp.src('./sass/*.sass')
.pipe(sass())
.pipe(gulp.dest('./css'))
.pipe(browserSync.reload({stream: true}));
});
gulp.task('watch', ['browserSync'], function() {
gulp.watch('./src/*.pug', ['pug']);
gulp.watch('./sass/*.sass', ['sass']);
gulp.watch('./dist/*.html').on('change', browserSync.reload);
});
gulp.task('default', ['sass', 'pug', 'watch']);

gulp.task('browser-sync', function() {
browserSync.init({
watch: true, // <-- Adding this line solved my reload problem
server: {
baseDir: './'
},
port: 8080 // <-- If you have problems with port 3000 try changing it like this
});
});

BrowserSync refreshing before injection (Gulp)

I have my gulpfile:
var gulp = require('gulp');
var sass = require('gulp-sass');
var watch = require('gulp-watch');
var sourcemaps = require('gulp-sourcemaps');
var fileinclude = require('gulp-file-include');
var browserify = require('browserify');
var rename = require('gulp-rename');
var streamify = require('gulp-streamify'); // required for uglify
var uglify = require('gulp-uglify'); // minify JS
var source = require('vinyl-source-stream'); // required to dest() for browserify
var browserSync = require('browser-sync').create();
var localSettings = require('./gulp/localConfig.js');
gulp.task('sass', function () {
return gulp.src('./assets/sass/main.scss')
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError)) // .on('error', sass.logError) prevents gulp from crashing when saving a typo or syntax error
.pipe(sourcemaps.write())
.pipe(gulp.dest('./assets/sass'))
.pipe(browserSync.stream()); // causes injection of styles on save
});
gulp.task('compileHTML', function() {
return gulp.src(['static/src/*.html'])
.pipe(fileinclude({
prefix: '##',
basepath: '#root'
}))
.pipe(gulp.dest('./static/compiled'))
.pipe(browserSync.stream()); // causes injection of html changes on save
});
// Static Server for browsersync
gulp.task('sync', ['sass'], function() {
browserSync.init({
startPath: "static/compiled/index.html",
open: localSettings.openBrowserSyncServerOnBuild,
server: {
baseDir: "./",
}
});
});
gulp.task('watch', function() {
gulp.watch('./assets/sass/**/*.scss', ['sass']);
gulp.watch(['./static/src/**/*.html', '!partials', '!components'], ['compileHTML']);
gulp.watch('./assets/js/**/*.js', ['javascript']);
});
gulp.task('javascript', function() {
var bundleStream = browserify('./assets/js/main.js').bundle();
bundleStream
.pipe(source('main.js'))
.pipe(rename('bundle.js'))
.pipe(gulp.dest('./assets/js/'))
.pipe(browserSync.stream());
})
// Default Task
gulp.task('default', ['compileHTML', 'javascript', 'sass', 'watch', 'sync']);
Mostly everything with my build works great, however I am having one issue with my compileHTML task. When any modifications are made to my html, it is compiled and injected into the page with BrowserSync. The problem is that BrowserSync is injecting the markup into the page AFTER it reloads, so that I have to manually refresh or save the file again.
Although I am doing the exact same thing with my SASS task, I have no problems with that task. Why do my styles inject into the page before the reload, but the HTML does not?
Just for testing, I tried adding a setTimout surrounding the BrowserSync injection, but it did not affect the timing of the injection other than adding a delay.

I would try to follow the example at gulp-reload docs. Their example is:
// create a task that ensures the `js` task is complete before
// reloading browsers
gulp.task('js-watch', ['js'], function (done) {
browserSync.reload();
done();
});
So you try :
gulp.watch(['./static/src/**/*.html', '!partials', '!components'], ['compileHTML'],
function (done) {
browserSync.reload();
done();
});
And remove the pipe browserSync.stream() in your 'complieHTML' task.
[I might first try as a very simple attempt changing from stream() to reload() in that task before the changes above.]

How to debug Express app launched by nodemon via Gulpfile in WebStorm 10?

I've got an Express app that runs via Gulpfile config.
gulpfile.js
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var prefix = require('gulp-autoprefixer');
var browserSync = require('browser-sync');
var nodemon = require('gulp-nodemon');
var reload = browserSync.reload;
// we'd need a slight delay to reload browsers
// connected to browser-sync after restarting nodemon
var BROWSER_SYNC_RELOAD_DELAY = 500;
gulp.task('nodemon', function (cb) {
var called = false;
return nodemon({
// nodemon our expressjs server
script: './bin/www',
// watch core server file(s) that require server restart on change
watch: ['app.js']
})
.on('start', function onStart() {
// ensure start only got called once
if (!called) { cb(); }
called = true;
})
.on('restart', function onRestart() {
// reload connected browsers after a slight delay
setTimeout(function reload() {
reload({
stream: false
});
}, BROWSER_SYNC_RELOAD_DELAY);
});
});
gulp.task('browser-sync', ['nodemon'], function () {
// for more browser-sync config options: http://www.browsersync.io/docs/options/
browserSync({
// informs browser-sync to proxy our expressjs app which would run at the following location
proxy: 'http://localhost:3000',
// informs browser-sync to use the following port for the proxied app
// notice that the default port is 3000, which would clash with our expressjs
port: 4000,
// open the proxied app in chrome
browser: ['google-chrome']
});
});
gulp.task('js', function () {
return gulp.src('public/**/*.js')
// do stuff to JavaScript files
//.pipe(uglify())
//.pipe(gulp.dest('...'));
});
gulp.task('sass', function () {
return gulp.src('./public/scss/*.scss')
.pipe(sass({outputStyle: 'compressed', sourceComments: 'map'}, {errLogToConsole: true}))
.pipe(prefix("last 2 versions", "> 1%", "ie 8", "Android 2", "Firefox ESR"))
.pipe(gulp.dest('./public/stylesheets'))
.pipe(reload({stream:true}));
});
gulp.task('css', function () {
return gulp.src('public/**/*.css')
.pipe(reload({ stream: true }));
})
gulp.task('bs-reload', function () {
reload();
});
gulp.task('default', ['browser-sync'], function () {
gulp.watch('public/**/*.js', ['js', reload()]);
gulp.watch('public/scss/*.scss', ['sass']);
gulp.watch('public/**/*.html', ['bs-reload']);
})
How can I start debugging this application in Webstorm? I've tried 'Edit Configuration' panel, setting up NodeJS configuration and Gulpfile configuration, but still no luck.
I just don't understand how to actually implement this kind of debug process.
Any help would be appreciated. Thanks.

Turns out you have to set bin/www in JavaScript file setting and everything will be working as supposed to.

Cannot stop Gulp with Ctrl+C when using gulp-nodemon & gulp.watch together

When I run gulp without the node task, it works fine and processes client file as expected, If I run gulp node it processes server file as expected. However if I run both gulp it processes both client and server file as expected, however, it won't let me quit by pressing 'Ctrl + C' (Tried it on windows 10 & Mac El Capitan). Is there something I'm doing wrong here?
'use strict';
var gulp = require('gulp');
var connect = require('gulp-connect');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var nodemon = require('gulp-nodemon');
var config = {
port: 9005,
devBaseUrl: 'http://localhost',
paths: {
html: './src/*.html',
dist: './dist',
js: './src/**/*.js',
images: './src/images/*',
mainJs: './src/main.js',
css: [
'node_modules/bootstrap/dist/css/bootstrap.min.css',
'node_modules/bootstrap/dist/css/bootstrap-theme.min.css'
]
}
};
gulp.task('connect', function () {
connect.server({
root: ['dist'],
port: config.port,
base: config.devBaseUrl,
livereload: true
});
});
gulp.task('html', function () {
gulp.src(config.paths.html)
.pipe(gulp.dest(config.paths.dist))
});
gulp.task('js', function () {
browserify(config.paths.mainJs)
.bundle()
.on('error', console.error.bind(console))
.pipe(source('bundle.js'))
.pipe(gulp.dest(config.paths.dist + '/scripts'))
.pipe(connect.reload())
});
gulp.task('node', function () {
nodemon({
script: 'server/index.js',
ext: 'js',
env: {
PORT: 8000
},
ignore: ['node_modules/**','src/**','dist/**']
})
.on('restart', function () {
console.log('Restarting node server...');
})
});
gulp.task('watch', function () {
gulp.watch(config.paths.js, ['js']);
});
gulp.task('default', ['html', 'js', 'connect', 'node', 'watch']);

Right at the top you have
var monitorCtrlC = require('monitorctrlc');
and inside of the watch task you have
monitorCtrlC();
Which seems to be this library
This function will prevent sending of SIGINT signal when Ctrl+C is
pressed. Instead, the specified (or default) callback will be invoked.

I had a similar issue before this is what you're looking for :
process.on('SIGINT', function() {
setTimeout(function() {
gutil.log(gutil.colors.red('Successfully closed ' + process.pid));
process.exit(1);
}, 500);
});
Just add this code to your gulp file. It will watch the ctrl + C and properly terminate the process. You can put some other code in the timeout also if desired.

The SIGINT solution did not work for me, probably because I'm also using gulp-nodemon but this worked:
var monitor = $.nodemon(...)
// Make sure we can exit on Ctrl+C
process.once('SIGINT', function() {
monitor.once('exit', function() {
console.log('Closing gulp');
process.exit();
});
});
monitor.once('quit', function() {
console.log('Closing gulp');
process.exit();
});
Got it from here.

just in case it helps someone else, I deleted the node_modules and did npm install which fixed the issue for me...

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.