Question

我正在尝试创建一个基本的gulp构建过程模板，该模板以包含html，sass，javascript和图像文件的app文件夹开头，并将这些文件构建到公用文件夹中。我正在使用gulp来查看app文件夹以进行更改，然后自动将构建过程刷新到公用文件夹。

我使用浏览器同步来提供公用文件夹并监视更改，但在更改公用文件夹时似乎不会自动重新加载。如果我手动刷新浏览器，则会反映出更改。

感谢您的帮助，请参阅下面的gulp文件：

//BASIC GULP FILE SETUP
//-------------------------------------------------------------

//Include Gulp
var gulp             = require('gulp');

//General Plugins
var browserSync      = require('browser-sync').create();
var reload           = browserSync.reload;
var del              = require('del');
var watch            = require('gulp-watch');
var runSequence      = require('run-sequence');

//CSS Plugins
var sass             = require('gulp-sass');
var autoprefixer     = require('gulp-autoprefixer');
var csso             = require('gulp-csso');

//JS Plugins
var concat           = require('gulp-concat');
var uglify           = require('gulp-uglify');

//HTML Plugins
var minifyHTML       = require('gulp-minify-html');

//IMG Plugins


//-------------------------------------------------------------
//TASKS
//-------------------------------------------------------------

//Clean Public Folder
gulp.task('clean', function() {
    del(['public/**/*']);
});

//CSS Tasks
gulp.task('sass', function () {
  return gulp.src('app/sass/**/*.scss')
    .pipe(sass())
    .pipe(autoprefixer())
    .pipe(csso())
    .pipe(gulp.dest('public/css'));

});

//HTML Tasks
gulp.task('html', function () {
  return gulp.src(['./app/**/*.html'], {
            base: 'app'
        })
    .pipe(minifyHTML())
    .pipe(gulp.dest('public'))
    ;
});

//Image Tasks
gulp.task('image', function () {
  return gulp.src('app/img/**/*.{png,jpg,jpeg,gif,svg}')
    .pipe(gulp.dest('public/images'));

});

//JS Tasks
gulp.task('js', function () {
  return gulp.src('app/js/**/*.js')
    .pipe(concat('main.js'))
    .pipe(uglify())
    .pipe(gulp.dest('public/js'));

});


// Watch files for changes
gulp.task('watch', function() {
    // Watch HTML files
    gulp.watch('./app/*.html', ['html'], browserSync.reload);
    // Watch Sass files
    gulp.watch('./app/sass/**/*.scss', ['sass'], browserSync.reload);
    // Watch JS files
    gulp.watch('./app/js/**/*', ['js'], browserSync.reload);
    // Watch image files
    gulp.watch('./app/img/*', ['image'], browserSync.reload);
});

gulp.task('browser-sync', ['watch'], function() {
    browserSync.init({
        server: {
            baseDir: "./public"
        }
    });
});


gulp.task('defualt');
gulp.task('build', [], function(callback) {
  runSequence('clean',
              'sass',
              'html',
              'js',
              'image');
});

Answer 1

我在论坛和浏览器同步文档中做了一些更多的讨论。在我的服务任务中，我需要向Public目录添加一个watch函数，每次检测到更改时都会手动调用reload。所以我的'browser-sync'任务，现在改名为'serve'，需要看起来像这样：

location /git {
  return 301 https://$server_name$request_uri;
}

我确信有一种方法可以使用浏览器同步的流来完成此操作，但是在文档中找到的这种手动重新加载方法已经成功了。

Answer 2

尝试传入init函数中的files对象，以便它知道要查找的内容。不需要不同的watch任务，Browsersync会为您完成所有这些任务。

gulp.task('browser-sync', ['watch'], function() {
  browserSync.init({
      server: {
          baseDir: "./public"
      },
      files: [
        '**/*.css',
        '**/*.js',
        '**/*.html'
        // etc...
      ]
  });
});

设置BrowserSync以使用构建过程并监视更改

2 个答案: