gulpfile.js
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
gulp.task('serve')
// Static Server + watching scss/html files
gulp.task('serve', function() {
browserSync.init({
server: "./public"
});
gulp.watch('./public/**/*.html').on('change', reload); // worked
gulp.watch('./public/**/*.js').on('change', reload); // doesn't work
});
gulp.task('sass', function () {
return gulp.src('./public/sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./public/css'))
.pipe(reload({stream: true}));
});
gulp.task('sass:watch', function () {
gulp.watch('./public/sass/**/*.scss', ['sass'])
});
gulp.task('default', ['serve','sass', 'sass:watch']);
With above gulp setup, my broswersnyc works fine when I make changes to my html and sass files but it doesn't work for javascript files.
This is my folder structure:
Does it have to do with AngularJS? Because my app.js
(which is within my public
folder) consists of AngularJS controllers.
If you move your app.js to "public/js" folder it will work fine
gulp.watch('./public/**/*.js').on('change', reload); // doesn't work
because in the pervious snippet you're watching the js files in the child folders of the public dir.
you might use this line instead, it might work
gulp.watch(['./public/**/*.js', './public/*.js']).on('change', reload);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With