Develop Reference

Browsersync works only on second save

I never encountered this issue before cause I worked with one-page websites. But now I have several pages, and when I created third file in 'build' folder, browsersync started to work not as expected.
Basically, browsersync now makes changes in browser only on second save. You can see this behavior on video: https://youtu.be/lNFEDZMBiQY
Here's my gulp setup:
// Gulp.js configuration
var
// modules
gulp = require('gulp'),
sass = require('gulp-sass'),
pug = require('gulp-pug'),
concat = require('gulp-concat'),
//uglify = require('gulp-uglify'),
browserSync = require('browser-sync').create()
// browserSync
gulp.task('browserSync', function() {
browserSync.init({
server: {
baseDir: 'build',
directory: true
},
notify: false
})
})
// pug to html
gulp.task('pug', function buildHTML() {
return gulp.src('src/pug/*.pug')
.pipe(pug())
.pipe(gulp.dest('build/'))
.pipe(browserSync.reload({
stream: true
}))
});
// scss to css
gulp.task('sass', function(){
return gulp.src('src/scss/style.scss')
.pipe(sass()) // Converts Sass to CSS with gulp-sass
.pipe(gulp.dest('build/css'))
.pipe(browserSync.reload({
stream: true
}))
});
// js concat and minify
gulp.task('scripts', function() {
return gulp.src(['src/js/jquery-3.0.0.min.js', 'src/js/jquery-migrate-1.4.1.min.js', 'src/js/swiper.min.js', 'src/js/jquery.photoswipe-global.js', 'src/js/custom.js'])
.pipe(concat('main.min.js'))
//.pipe(uglify())
.pipe(gulp.dest('build/js/'));
});
// watcher
gulp.task('watch', ['browserSync', 'sass', 'pug', 'scripts'], function(){
gulp.watch('src/scss/**/*.scss', ['sass']);
gulp.watch('src/pug/**/*.pug', ['pug']);
gulp.watch('src/js/**/*.js', ['scripts']);
// Other watchers
})
gulp.task('default', ['watch']);
Maybe, there's an error in this setup? How I can fix this issue?

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

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.

Task 'sass' is not in your Gulpfile - ERROR

Following is the code I am facing this error please help me solve this, i would be really graced to get clear answer ___
Everything runs smooth but except if I save the file, following error occurs
ERROR : Task 'sass' is not in your gulpfile
// require gulp
var gulp = require('gulp');
// require other packages
var concat = require('gulp-concat'),
cssmin = require('gulp-minify-css'),
rename = require("gulp-rename"),
sass = require('gulp-sass'),
browserSync = require('browser-sync'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
autoprefix = require('gulp-autoprefixer');
changed = require('gulp-changed'),
// scripts task
gulp.task('scripts', function() {
return gulp.src('./src/js/*.js')
.pipe(concat('app.js'))
.pipe(gulp.dest('./dist/js/'))
.pipe(uglify())
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('./dist/js/'));
});
// styles task and autoprefix
gulp.task('styles', function() {
gulp.src(['./src/sass/*.scss'])
.pipe(autoprefix('last 2 versions'))
.pipe(sass())
.pipe(concat('styles.css'))
.pipe(cssmin())
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('./dist/css/'));
});
// browser sync
gulp.task('browser-sync', ['styles'], function() {
browserSync({
server: {
baseDir: ''
},
notify: false
});
gulp.watch("./src/sass/*.scss", ['scss']);
gulp.watch("*.html").on('change', browserSync.reload);
});
// watch task
gulp.task('watch', function() {
gulp.watch('./src/js/*.js', ['scripts']);
gulp.watch('./src/sass/*.scss', ['styles']);
});
// image minification
gulp.task('imagemin', function() {
var imgSrc = './src/img/**/*',
imgDst = './dist/img';
gulp.src(imgSrc)
.pipe(changed(imgDst))
.pipe(imagemin())
.pipe(gulp.dest(imgDst));
});
gulp.task('default', ['scripts', 'styles', 'browser-sync', 'imagemin', 'watch']);

You do not have, indeed, defined "sass" task nor "scss" task thats marked as dependable under "browser-sync" file.
Try Replacing:
gulp.watch("./src/sass/*.scss", ['scss']);
with
gulp.watch("./src/sass/*.scss", ['styles']);

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.