错误您尝试启动 Browsersync 两次

Question

我正在尝试在我的 gulp 文件中设置 browsersync，但一直收到此错误“[错误] 您尝试启动 Browsersync 两次！”。

我的 gulpfile.js 文件如下所示。

var gulp = require('gulp');
var sass = require('gulp-sass');                    // Compiles SASS
var minifyCss = require('gulp-minify-css');         // Minifys CSS
var concat = require('gulp-concat');                // Joins multipul files into one
var rename = require('gulp-rename');                // Renames files
var uglify = require('gulp-uglify');                // Minifys JS
var browserSync = require('browser-sync');          // Refreshes browser on SCSS save
var reload      = browserSync.reload;

var scss_src = ['developer/sass/**/*.scss'];           // Set SCSS location
var js_src = ['developer/js/**/*.js'];                 // Set JS location

// Browser sync
gulp.task('browser-sync', function() {
    var files = [
        scss_src    
    ];

    // Initialize browsersync
    browserSync.init(files, {
        proxy : 'localhost:8888',
        notify : false
    });
});

// SCSS tasks
gulp.task('scss', function() {
    gulp.src(scss_src)                              // Reads all SCSS files 
        .pipe(sass().on('error', sass.logError))    // Compiles SASS and logs errors
        .pipe(minifyCss())                          // Minifys the CSS files
        .pipe(concat('style.css'))                  // Merges all the CSS files into one
        .pipe(rename({                              // Renames the merged CSS file
            basename : 'style',                     // The file name
            extname : '.css'                        // The file extension
        }))
        .pipe(gulp.dest('./'))                      // Writes the renamed file to a destination
        .pipe(reload({stream:true}))                // Reload the browser

});

//JS tasks
gulp.task('js', function() {
    gulp.src(js_src)
        .pipe(uglify())
        .pipe(rename({
            basename : 'main',
            extname : '.min.js'
        }))
        .pipe(gulp.dest('./assets/js/'));
});

// Watch task
gulp.task('default', function() {
    gulp.watch(scss_src, ['browser-sync']);
    gulp.watch(scss_src, ['scss']);
    gulp.watch(js_src, ['js']);
});

所有任务运行，除浏览器同步位外，一切正常。任何帮助都会很棒。

Answer 1

问题是，您将 browser-sync 任务与 gulp.watch 合并了。这导致运行ning browser-sync 并且每次 scss_src.

都有变化

仅在启动时移除 browser-sync 观察者和运行任务一次：

// Watch task
gulp.task('default', ['browser-sync'], function() {
   gulp.watch(scss_src, ['scss']);
   gulp.watch(js_src, ['js']);
});

错误您尝试启动 Browsersync 两次

Error You tried to start Browsersync twice

gulp

browser-sync

gulp-browser-sync