Question

我刚刚开始使用Gulp。我的gulpfile.js如下：

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

// include gulp plugins
var concat = require('gulp-concat');
var sass   = require('gulp-ruby-sass');
var brsync = require('browser-sync').create();

// make one js file
gulp.task('scripts', function() {
    return gulp.src('src/app/js/*.js')
        .pipe(concat('main.js'))
        .pipe(gulp.dest('build/js/'));
});

// turn scripts into one file and reload browser
gulp.task('scripts-watch', ['scripts'], brsync.reload());

// convert sass to css
gulp.task('sass', function() {
    return sass('src/app/scss/main.scss', {style: 'expanded'})
        .on('error', function(err) {
            console.error('something went wrong with sass processing!', err.message);
        })
        .pipe(gulp.dest('build/css'))
        .pipe(brsync.stream());
});

// copy over index file to build directory
gulp.task('html', function() {
    return gulp.src('src/app/index.html')
            .pipe(gulp.dest('build/'));
});

// reload browser when html in src changes
gulp.task('html-watch', ['html'], brsync.reload());

gulp.task('serve',['scripts', 'sass', 'html'], function() {
    brsync.init({
        server: "./build"
    });

    gulp.watch('src/app/js/*.js', ['scripts-watch']);
    gulp.watch('src/app/index.html', ['html-watch']);
    gulp.watch('src/app/scss/*.scss', ['sass']);
});

gulp.task('default', ['serve']);

我只是按照BrowserSync网站here上列出的方法进行操作。但它并不适合我。当我更改JS文件时，我的脚本会更新，但浏览器不会重新加载！

Answer 1

尝试使用代理：

gulp.task('serve',['scripts', 'sass', 'html'], function() {
  browserSync.init(null, {
    proxy: "http://localhost:3000",
      files: ['src/app/**/*'],
      browser: "google chrome",
      port: 7000
  });

  gulp.watch('src/app/js/*.js', ['scripts-watch']);
  gulp.watch('src/app/index.html', ['html-watch']);
  gulp.watch('src/app/scss/*.scss', ['sass']);
});

gulp.task('default', ['serve']);

我也在使用var browserSync = require('browser-sync');而不是var browserSync = require('browser-sync').create();。

BrowserSync和Gulp。无法重新加载以适用于JS / HTML

1 个答案: