browser-sync gulp config

Question

我正在尝试改进我的Gulp配置以包含浏览器同步。我目前正在使用local.domain.com为我正在使用的每个网站（WordPress网站）使用MAMP Pro。

我想让browser-sync使用当前的设置工作（观看我的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

我不会为你编写代码，相反，我会告诉你我喜欢做什么。我在一个单独的任务中运行浏览器同步，只需查看构建文件以进行更改。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;