browser-sync gulp config

Question

ブラウザ同期を含めるようにGulpの設定を改善しようとしています。私は現在、私が取り組んでいるサイト（WordPressサイト）ごとにlocal.domain.comを使って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

私はあなたのコードを書いていませんが、代わりに私はそれをやりたいと思います。私は別のタスクでブラウザ同期を実行します。単にビルドファイルで変更を監視してください。

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