-1

I have integrated the gulp build with my angular application development. Each time when a js,html,css changes I am compiling the files as single and running the app.

in previous it was fine. when I add more js file I am getting delayed to reload the web page by brower-sync. But I understood each time gulp is compiling all files are single even if that's not updated.

my question is:

  1. how to compile only updated files and run the brower-sync ? here is my gulp code :

gulp.task('js', function() { gulp.src(scripts) .pipe(sourcemaps.init()) .pipe(concat('scripts.js')) .pipe(annotate()) .pipe(uglify()) .pipe(sourcemaps.write()) .pipe(gulp.dest('./dist/js')) .pipe(browserSync.reload({ stream: true })); });

my full gulp code is here

3gwebtrain
  • 14,640
  • 25
  • 121
  • 247

1 Answers1

-1

Use gulp-changed.

var changed = require('gulp-changed');

gulp.task('js', function() {
    gulp.src(scripts)
        .pipe(changed('./dist/js'))
        .pipe(sourcemaps.init())
        .pipe(concat('scripts.js'))
        .pipe(annotate())
        .pipe(uglify())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('./dist/js'))
        .pipe(browserSync.reload({
            stream: true
        }));
});
lofihelsinki
  • 2,491
  • 2
  • 23
  • 35
  • It may help when we compress the files with their own names. when we concat as single file it won't help. – 3gwebtrain May 24 '17 at 12:50
  • 1
    Since you `concat` before other tasks, doesn't it need to compile the whole `scripts.js` every time there are changes in any of the source files? Maybe move `annotate` and `uglify` before the `concat` ? – lofihelsinki May 24 '17 at 12:55