Gulp에서 작동하도록 browsersync를 시도하는 중

Question

Gulp에서 Browsersync를 사용할 수 없습니다. 표준 JointsWP 빌드 (워드 프레스/파운데이션 매시업)를 설치했지만 다음 gulpfile은 browsersync를 전혀 시작하지 않습니다.

MAMP를 사용 중이며 사이트가 정상적으로 작동합니다.

몇 가지 제한된 꿀꺽 꿀꺽 소리 지식을 시도했습니다. 사전에 감사합니다. BS와 하나없이 하나 ...

I - 그것은 꿀꺽 지식의 나의 부족 .... gulpfile의 정밀한 점검에

, 2 개 기능이 있었다 사실

// Grab our gulp packages 
var gulp = require('gulp'), 
gutil = require('gulp-util'), 
sass = require('gulp-sass'), 
cssnano = require('gulp-cssnano'), 
autoprefixer = require('gulp-autoprefixer'), 
sourcemaps = require('gulp-sourcemaps'), 
jshint = require('gulp-jshint'), 
stylish = require('jshint-stylish'), 
uglify = require('gulp-uglify'), 
concat = require('gulp-concat'), 
rename = require('gulp-rename'), 
plumber = require('gulp-plumber'), 
bower = require('gulp-bower'), 
babel = require('gulp-babel'), 
browserSync = require('browser-sync').create(); 

// Compile Sass, Autoprefix and minify 
gulp.task('styles', function() { 
return gulp.src('./assets/scss/**/*.scss') 
    .pipe(plumber(function(error) { 
     gutil.log(gutil.colors.red(error.message)); 
     this.emit('end'); 
    })) 
    .pipe(sourcemaps.init()) // Start Sourcemaps 
    .pipe(sass()) 
    .pipe(autoprefixer({ 
     browsers: ['last 2 versions'], 
     cascade: false 
    })) 
    .pipe(gulp.dest('./assets/css/')) 
    .pipe(rename({suffix: '.min'})) 
    .pipe(cssnano()) 
    .pipe(sourcemaps.write('.')) // Creates sourcemaps for minified 
styles 
    .pipe(gulp.dest('./assets/css/')) 
}); 

// JSHint, concat, and minify JavaScript 
gulp.task('site-js', function() { 
return gulp.src([ 

     // Grab your custom scripts 
     './assets/js/scripts/*.js' 

]) 
.pipe(plumber()) 
.pipe(sourcemaps.init()) 
.pipe(jshint()) 
.pipe(jshint.reporter('jshint-stylish')) 
.pipe(concat('scripts.js')) 
.pipe(gulp.dest('./assets/js')) 
.pipe(rename({suffix: '.min'})) 
.pipe(uglify()) 
.pipe(sourcemaps.write('.')) // Creates sourcemap for minified JS 
.pipe(gulp.dest('./assets/js')) 
});  

// JSHint, concat, and minify Foundation JavaScript 
gulp.task('foundation-js', function() { 
return gulp.src([ 

     // Foundation core - needed if you want to use any of the 
components below 
     './vendor/foundation-sites/js/foundation.core.js', 
     './vendor/foundation-sites/js/foundation.util.*.js', 

     // Pick the components you need in your project 
     './vendor/foundation-sites/js/foundation.abide.js', 
     './vendor/foundation-sites/js/foundation.accordion.js', 
     './vendor/foundation-sites/js/foundation.accordionMenu.js', 
     './vendor/foundation-sites/js/foundation.drilldown.js', 
     './vendor/foundation-sites/js/foundation.dropdown.js', 
     './vendor/foundation-sites/js/foundation.dropdownMenu.js', 
     './vendor/foundation-sites/js/foundation.equalizer.js', 
     './vendor/foundation-sites/js/foundation.interchange.js', 
     './vendor/foundation-sites/js/foundation.magellan.js', 
     './vendor/foundation-sites/js/foundation.offcanvas.js', 
     './vendor/foundation-sites/js/foundation.orbit.js', 
     './vendor/foundation-sites/js/foundation.responsiveMenu.js', 
     './vendor/foundation-sites/js/foundation.responsiveToggle.js', 
     './vendor/foundation-sites/js/foundation.reveal.js', 
     './vendor/foundation-sites/js/foundation.slider.js', 
     './vendor/foundation-sites/js/foundation.sticky.js', 
     './vendor/foundation-sites/js/foundation.tabs.js', 
     './vendor/foundation-sites/js/foundation.toggler.js', 
     './vendor/foundation-sites/js/foundation.tooltip.js', 
]) 
.pipe(babel({ 
    presets: ['es2015'], 
    compact: true 
})) 
.pipe(sourcemaps.init()) 
.pipe(concat('foundation.js')) 
.pipe(gulp.dest('./assets/js')) 
.pipe(rename({suffix: '.min'})) 
.pipe(uglify()) 
.pipe(sourcemaps.write('.')) // Creates sourcemap for minified 
Foundation JS 
.pipe(gulp.dest('./assets/js')) 
}); 

// Update Foundation with Bower and save to /vendor 
gulp.task('bower', function() { 
return bower({ cmd: 'update'}) 
.pipe(gulp.dest('vendor/')) 
}); 

// Browser-Sync watch files and inject changes 
gulp.task('browsersync', function() { 
// Watch files 
var files = [ 
    './assets/css/*.css', 
    './assets/js/*.js', 
    '**/*.php', 
    'assets/images/**/*.{png,jpg,gif,svg,webp}', 
]; 

browserSync.init(files, { 
    // Replace with URL of your local site 
    proxy: "s18.dev", 
}); 

gulp.watch('./assets/scss/**/*.scss', ['styles']); 
gulp.watch('./assets/js/scripts/*.js', ['site-js']).on('change', 
browserSync.reload); 

}); 

// Watch files for changes (without Browser-Sync) 
gulp.task('watch', function() { 

    // Watch .scss files 
    gulp.watch('./assets/scss/**/*.scss', ['styles']); 

    // Watch site-js files 
    gulp.watch('./assets/js/scripts/*.js', ['site-js']); 

    // Watch foundation-js files 
    gulp.watch('./vendor/foundation-sites/js/*.js', ['foundation-js']); 

}); 

// Run styles, site-js and foundation-js 
gulp.task('default', function() { 
    gulp.start('styles', 'site-js', 'foundation-js'); 
}); 

Answer 1

했다 'gulp browsersync'를 실행하는 것이 트릭을 실행하는 반면 기쁨이없는 'gulp watch'를 실행하고있었습니다.

bonza.