将BrowserSync添加到gulpfile.js

时间:2017-08-13 18:35:15

标签: gulp gulp-watch gulp-browser-sync

我在gulpfile.js文件中有以下代码

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']);
});

我想将browserSync添加到此文件中。示例here仅包含sass插件。我需要添加以下内容

  • Uglify&汇总JS和CSS文件。
  • BrowserSync更新我的html文件。

如何实施上述内容?

1 个答案:

答案 0 :(得分:0)

在您希望发生的地方的任务中添加.pipe(browserSync.stream())

这应该是最后一次行动。

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());
});