gulp - 将 BrowserSync 添加到 gulpfile.js

Question

我在 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 添加到这个文件中。此处的示例仅包含 sass 插件。我需要添加以下内容

• Uglify & concat JS 和 CSS 文件。
• BrowserSync 来更新我的 html 文件。

我该如何实现上述内容？

Answer 1

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