Gulp文件与browsersync集成

Question

我一直在试图弄清楚如何让我当前的gulpfile与browserync一起工作，我迷失在树林里。

我按照本教程设置了我的gulp文件。

我遇到的问题是当我尝试将browsersync与我的gulp文件集成时。 我试图找出如何使我的当前gulpfile使用SASS + CSS注入和重新加载的功能，这些功能列在browsersnyc + gulp.js的文档中，但没有运气。

这是我目前设置的gulpfile。 在这一点上，我真的不确定如何让browsernyc与我运行gulpfile的方式一起工作。 似乎没有什么工作。 如何以正确的方式配置？

谢谢

// refferance gulp
var gulp = require('gulp');

// refferance packages installed
var concat = require('gulp-concat');
var cssmin = require('gulp-minify-css');
var rename = require('gulp-rename');
var scss = require('gulp-sass');
var uglify = require('gulp-uglify');
var browserSync = require('browser-sync').create();

// build server
gulp.task('serve',['build'], function(event){
    browserSync({
        server: {
            baseDir:'./'
        }
    });
    // watch 
    gulp.watch(".//scss/*.scss", ['sass']);
    gulp.watch(".//*.html").on('change', browserSync.reload);
});


// set up default task we can use this later to run all of our tasks
gulp.task('default', function(){
    // our default task runs `scripts`, `styles` and `watch` when we enter `gulp` in command line.
    //  Only use this task once we have set up all our other tasks
    // gulp.task('default',['scripts','styles','watch']);
});


// scripts task
gulp.task('scripts', function(){
    // fetch all files in the .js extension in the /src/js directory
    return gulp.src('./src/js/*.js')
    // concatinate files and save as app.js
    .pipe(concat('app.js'))
    // save app.js in dest directory
    .pipe(gulp.dest('./dest/js/'))
    .pipe(uglify())
    // minfiy file and rename to app.min.js
    .pipe(rename({
        suffix: '.min'
    }))
    // save in dest directory
    .pipe(gulp.dest('./dest/js'));
});


// styles task
gulp.task('styles', function(){
     // fetch all files with scss extension in /src/scss directory
    return gulp.src('./src/scss/*.scss')
    // compile scss
    .pipe(scss())
    // output css in css dest directory
    .pipe(gulp.dest('./dest/css/'))
    // minify css
    .pipe(cssmin())
    // rename as styles.min.css
    .pipe(rename({
        suffix: '.min'
    }))
    // save in same directory
    .pipe(gulp.dest('./dest/css'))

    // once css compiles reload browser??
    .pipe(browserSync.stream());
});

// serve up changes??
gulp.task('default', ['serve']);

gulp.watch('./src/js/*.js', ['scripts']);
gulp.watch('./src/sass/*.scss', ['styles']);

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

Answer 1

据我所知，您只执行scss任务以更改Sass并且不重新加载browsersync。 尝试将监视语句合并为一个。 您可以观看一组文件模式，只需将scss和html结合起来即可。

您的服务器不会使用browsersync启动。 如果要在更改时自动重新启动，请尝试使用nodemon。 browsersync仅将您现有的节点进程代理到系统上的另一个端口。

此外，您必须在系统上安装browsersync ：

npm install -g browser-sync

Answer 2

function watchFiles(isDev) {
   if (isDev) {
       gulp.watch([config.sass], ['styles', browserSync.reload]);
       gulp.watch([config.client + '**/*', '!' + config.sass], browserSync.reload)
           .on('change', function(event) { changeEvent(event); });
   }
   else {
       gulp.watch([config.sass, config.js, config.html], ['build', browserSync.reload])
           .on('change', function(event) { changeEvent(event); });
   }
}

以上是我如何观看文件，并在更改时使用browserSync重新加载浏览器的示例。