浏览器同步gulp配置

Question

I am trying to improve my Gulp configuration to include browser sync. I currently use MAMP Pro using local.domain.com for each site I'm working on (WordPress sites).

I'd like to get browser-sync to work using this current setup (watches my SASS files and minifies CSS when using watch).

I cannot seem to work out how to get browser sync to work with using the domain in my MAMP Pro setup.

// 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

I wont write the code for you, instead I'll show you how I like to do it. I run my browser-sync in a separate task, simply watch your build files for changes.

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