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']);
});

除了browsersync位之外，所有任务都在运行，一切正常。任何帮助都会很棒。

Answer 1

问题是，您已将browser-sync任务与gulp.watch合并。每次browser-sync发生变化时，都会导致scss_src运行。

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

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

错误您尝试两次启动浏览器同步

1 个答案: