tarayıcı-sync gulp config

Question

Gulp yapılandırmamı tarayıcı senkronizasyonu içerecek şekilde geliştirmeye çalışıyorum. Şu anda üzerinde çalıştığım her site için local.domain.com kullanarak MAMP Pro'yu kullanıyorum (WordPress siteleri).

Bu geçerli kurulumu kullanarak çalışmak için browser-sync almak istiyorum (SASS dosyalarımı izler ve saat kullanırken CSS'yi küçültür).

MAMP Pro kurulumumdaki etki alanını kullanarak tarayıcı senkronizasyonunu nasıl çalıştıracağımı göremiyorum.

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

Kodu yazmayacağım, bunun yerine nasıl yapmayı sevdiğimi göstereceğim. Tarayıcım senkronizasyonumu ayrı bir görevde çalıştırıyorum, sadece değişiklik yapmak için yapı dosyalarınızı izleyin.

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