浏览器同步 gulp 配置

Question

我正在尝试改进我的 Gulp 配置以包括浏览器同步。我目前对我正在处理的每个站点（WordPress 站点）使用 MAMP Pro，并使用 local.domain.com。

我想让browser-sync 使用此当前设置工作（使用 watch 时监视我的 SASS 文件并缩小 CSS）。

我似乎无法弄清楚如何让浏览器同步以使用我的 MAMP Pro 设置中的域。

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

// Include Our Plugins
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var cssnano = require('gulp-cssnano');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var uglifycss = require('gulp-uglifycss');

// Lint Task
gulp.task('lint', function() {
    return gulp.src('js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

// Compile Our Sass
gulp.task('sass', function() {
    return gulp.src('lib/themes/domain/styles/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('lib/themes/domain/'));
});

// Concatenate & Minify JS
gulp.task('scripts', function() {
    return gulp.src('js/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('dist'))
        .pipe(rename('all.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('dist'));
});





gulp.task('uglify', function () {
  gulp.src('lib/themes/domain/style.css')
    .pipe(uglifycss({
      "max-line-len": 80
    }))
    .pipe(gulp.dest('lib/themes/domain/'));
});




// Watch Files For Changes
gulp.task('watch', function() {
    gulp.watch('js/*.js', ['lint', 'sass', 'scripts', 'uglify']);
    gulp.watch('lib/themes/domain/styles/*/*.scss', ['sass']);
    gulp.watch('lib/themes/domain/styles/*.scss', ['sass']);
    gulp.watch('lib/themes/domain/style.css', ['uglify']);
});

// Default Task
gulp.task('default', ['lint', 'sass', 'uglify', 'scripts', 'watch']);

Answer 1

我不会为您编写代码，而是会向您展示我喜欢如何编写代码。我在一个单独的任务中运行我的浏览器同步，只需观察你的构建文件的变化。

var browserSync = require('browser-sync').create();
var urlPath = "your-url.com";

gulp.task('browser-sync', function (cb) {
    browserSync.init({
        proxy: urlPath,
    }, function() {
        gulp.watch("Views/**/*.cshtml").on("change", browserSync.reload);
        gulp.watch('Assets/build/scripts/**/*.js').on('change', browserSync.reload);
        gulp.watch('Assets/build/styles/**/*.css').on('change', function () {
            gulp.src('Assets/build/styles/**/*.css')
            .pipe(browserSync.stream());
        });  
        cb();
    });
});