Gulp Concat + Browserync restarting

Question

I'm using gulp concat and browserync. When I run gulp, it starts browserync and concatenates and reloads all js files found in modules. The problem is that it only does the concatenation of js files once, so I need to stop running gulp and run it again so I can see any changes reflected to js files. I only see the gulp notify task after stoping and restarting gulp too. How do I setup gulp so that always bundles and compiles the js and then runs browersync?

Here is my gulpfile

var gulp = require('gulp');
var concat = require('gulp-concat');
var browserSync = require('browser-sync').create();
var notify = require('gulp-notify');


// default 
gulp.task('default', ['browserSync', 'scripts'], function (){
// Reloads the browser whenever HTML or JS files change
gulp.watch('app/*.html', browserSync.reload); 
gulp.watch('app/modules/**/*.js', browserSync.reload);
});

gulp.task('scripts', function() {
return gulp.src('app/modules/**/**.js')
  .pipe(concat('main.js'))
  .pipe(gulp.dest('app/build/js'))
  .pipe(notify({ message: 'Scripts in modules have been bundled!' }));
});

//start browsersync
gulp.task('browserSync', function() {
browserSync.init({
server: {
  baseDir: 'app'
},
})
})

timolawl · Accepted Answer · 2016-04-13T18:17:54.180

1

Try this:

// watch 
gulp.task('watch', ['browserSync', 'scripts'], function (){
    // Reloads the browser whenever HTML or JS files change
    gulp.watch('app/*.html', browserSync.reload); 
    gulp.watch('app/modules/**/*.js', ['scripts']);
});

gulp.task('scripts', function() {
   return gulp.src('app/modules/**/**.js')
      .pipe(concat('main.js'))
      .pipe(gulp.dest('app/build/js'))
      .pipe(notify({ message: 'Scripts in modules have been bundled!' }))
      .pipe(browserSync.reload({
          stream: true
      }));
});

gulp.task('default', ['watch', 'scripts']);

edited Apr 13 '16 at 18:17

answered Apr 13 '16 at 17:38

timolawl

5,434
13
29

This works although I needed to add an additional ` ) ` after ` stream: true ` . For some reason gulp notify doesn't work now, but it isn't crucial. The build works now without having to restart gulp, thanks! – M1lls Apr 13 '16 at 18:16
Ah. I missed a closing parenthesis at the end of the notify pipe. Try adding that and see if that works. That should fix it. – timolawl Apr 13 '16 at 18:19
that worked, thank you ```.pipe(notify({ message: 'Scripts in modules have been bundled!' })) .pipe(browserSync.reload({ stream: true })); ``` – M1lls Apr 13 '16 at 18:22

score 0 · Answer 2 · answered Apr 13 '16 at 17:38

0

I'm not sure but could you try to put

gulp.watch('app/modules/**/*.js', ['scripts']);

under task "default"

As I understand your gulp didn't watch your files and run the script

P.S. I'm not expert in gulp if it doesn't work out I'm sorry.

answered Apr 13 '16 at 17:38

Whai Kung

56
4

Gulp Concat + Browserync restarting

2 Answers2