Question

我创建了这个gulpfile，在我开始处理项目时起作用。上周我没有参与这个项目，现在我意识到当我运行命令'gulp watch'时，BrowserSync不再创建服务器了。

<mvcSiteMapNode url="~/Form.aspx" title="Form Editor" roles="ItemBank User" 
    visibilityProvider="MvcSiteMapProvider.TrimEmptyGroupingNodesVisibilityProvider, MvcSiteMapProvider" />

命令行说

var gulp = require('gulp');
var sass = require('gulp-sass'); // do sass
var jade = require('gulp-jade'); // do jade
var autoprefixer = require('gulp-autoprefixer'); // autoprefix css
var browserSync = require('browser-sync').create(); // browserSync

gulp.task('styles', function(){
   gulp.src('app/scss/styles.sass')
   .pipe(sass({ style: 'expanded' }))
   .pipe(autoprefixer('last 2 version'))
   .pipe(gulp.dest('app/css'))
   .pipe(browserSync.reload({
      stream: true
   }))
});

gulp.task('jade', function(){
    gulp.src('app/index.jade')
   .pipe(jade({pretty: true}))
   .pipe(gulp.dest('app/'))
   .pipe(browserSync.reload({
      stream: true
   }))
});

gulp.task('browserSync', function() {
  browserSync.init({
    server: {
      baseDir: 'app'
    },
  })
});

gulp.task('watch', ['browserSync', 'styles', 'jade'], function() {
   gulp.watch('app/scss/**/*.sass', ['styles']);
   gulp.watch('app/_jadefiles/**/*.jade', ['jade']);
   gulp.watch('app/index.jade', ['jade']);
   gulp.watch('app/js/**/*.js', browserSync.reload);
   gulp.watch('app/*.html', browserSync.reload);
});

关于如何修复它的任何想法？

Answer 1

将你的gulp.watch任务移动到browsersync任务中，然后看看我的exmaple应该没问题。

// Browser-sync task
gulp.task('serve', ['sass', 'compress'], function() {
    browserSync.init({
        server: {
            baseDir: "./"
        }
    });

  gulp.watch('src/*.js', ['compress']);
  gulp.watch('**/*.scss', ['sass']);
  gulp.watch("index.html").on("change", reload);

});
gulp.task('watch', ['serve']);

因此，在您的情况下，您应将baseDir替换为app baseDir: "./app" or "app"以及内部gulp.watch资产目录路径。

Gulp BrowserSync不会创建服务器

1 个答案: