1

I have the following code in gulpfile.js file

var gulp = require('gulp'),
    uglify = require('gulp-uglify'),
    sass = require('gulp-sass'),
    concat = require('gulp-concat');

gulp.task('sass', function(){
    gulp.src('assets/src/css/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('assets/dist/css'));
});

gulp.task('scripts', function(){
    gulp.src('assets/src/js/*.js')
        .pipe(concat('main.js'))
        .pipe(uglify())
        .pipe(gulp.dest('assets/dist/js'));
});

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

gulp.task('watch', function(){
    gulp.watch('src/css/*.scss', ['sass']);
    gulp.watch('src/js/*.js', ['scripts']);
});

I want to add browserSync to this file. The example here is containing just the sass plugin. I need to add the following

  • Uglify & concat the JS and CSS files.
  • BrowserSync to update my html files.

How can I implement the above?

Ashan
  • 18,898
  • 4
  • 47
  • 67
ronjacob
  • 169
  • 1
  • 7
  • Welcome to Stack Overflow! I have corrected the grammatical errors and typos in the question for better readability. I have also ask the question in point form so that it would be easier to answer. Good luck! – Ashan Aug 13 '17 at 20:41

1 Answers1

0

Add .pipe(browserSync.stream()) in the task in the place you would like it to take place.

This should probably be the last action. 

gulp.task('scripts', function(){
    gulp.src('assets/src/js/*.js')
        .pipe(concat('main.js'))
        .pipe(uglify())
        .pipe(gulp.dest('assets/dist/js'))
        .pipe(browserSync.stream());
});
Milk
  • 2,469
  • 5
  • 31
  • 54