Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

gulp watch .js file doesn't work

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.

like image 962
Ning Sia Avatar asked Oct 18 '22 02:10

Ning Sia


1 Answers

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);
like image 171
Alaa Attya Mohamed Avatar answered Oct 27 '22 11:10

Alaa Attya Mohamed