Browsersync在哪里创建两个实例?

时间:2016-01-29 18:38:45

标签: javascript html css gulp

我的gulp文件如下。我的Watch任务中有两个实例?我怎样才能这样做所以我可以捆绑所有代码文件(包括CSS,JS和HTML)以便在保存时注入和重新加载,而不是单独检查,观察和重新注入它们?我想知道如何优化我当前的设置!任何帮助表示赞赏!

var gulp = require('gulp'), //Task runner
    uglify = require('gulp-uglify'), //Minimizies JS
    sass = require('gulp-ruby-sass'),
    imagemin = require('gulp-imagemin'),
    browserSync = require('browser-sync'),
    reload      = browserSync.reload;

//Error look-out
function errorLog(error){
  console.error.bind(error);
  this.emit('end');
}

// Scripts
gulp.task('scripts', function(){
  gulp.src('src/js/*.js')
    .pipe(uglify())
    .on('error', errorLog)
    .pipe(gulp.dest('build/js'))
});

// Jobs Scripts
gulp.task('jobs-scripts', function(){
  gulp.src('src/js/*.js')
    .pipe(uglify())
    .on('error', errorLog)
    .pipe(gulp.dest('jobs/build/js'))
    .pipe(browserSync.stream())
});

// Styles
gulp.task('styles', function(){
  return sass('src/css/*.sass',{
    style: 'compressed'
  })
  .on('error', errorLog)
  .pipe(gulp.dest('build/css'))
  .pipe(browserSync.stream())
});

//Jobs Styles
gulp.task('jobs-styles', function(){
  return sass('jobs/src/css/*.sass',{
    style: 'compressed'
  })
  .on('error', errorLog)
  .pipe(gulp.dest('jobs/build/css'))
  .pipe(browserSync.stream())
});

// Images
gulp.task('imagemin', function(){
  gulp.src('src/img/*')
  .pipe(imagemin())
  .pipe(gulp.dest('build/img'))
});

// Jobs Images
gulp.task('jobs-imagemin', function(){
  gulp.src('jobs/src/img/*')
  .pipe(imagemin())
  .pipe(gulp.dest('jobs/build/img'))
});

// Static server
gulp.task('browser-sync', function() {
     browserSync.init({
          server: {
                baseDir: "./"
          }
     });
});

// Watch
gulp.task('watch', function(){
  gulp.watch('src/js/*.js', ['scripts', browserSync.reload]);
  gulp.watch('src/js/*.js', ['jobs-scripts', browserSync.reload]);
  gulp.watch('src/css/*.sass', ['styles', browserSync.reload]);
  gulp.watch('jobs/src/css/*.sass', ['jobs-styles', browserSync.reload]);
  gulp.watch(['*.html', 'jobs/*.html'], ['browser-sync', browserSync.reload]);
});

//Run task
gulp.task('default', ['browser-sync', 'scripts', 'styles', 'jobs-styles', 'jobs-scripts', 'jobs-imagemin', 'imagemin', 'watch']);

0 个答案:

没有答案