Question

我是新手，我有一些很大的问题，我希望这些问题非常简单（这意味着当我听到答案时，我可能会有一个额头砸的时刻）......

我的gulpfile有许多重复的单向复制任务，然后我在watch命令中看到这些单独的任务，但是我几乎可以肯定我这样做的方式是完全没有效率的。

此外，我注意到一些有趣的行为，syncHtmlRootDir任务的复制命令完全按照我的意愿工作（它将根据需要删除文件），但我的其他单向复制任务都不会删除已删除的文件，而且我'我猜它是一个路径问题，但我很难过。

gulpfile.js

var gulp        = require('gulp');
var browserSync = require('browser-sync').create();
var sass        = require('gulp-sass');
var minifyCss   = require('gulp-minify-css')
var uglify        = require('gulp-uglify');
var newer       = require('gulp-newer');
var path        = require('path');
var del         = require('del');


function handleError (error) {
  console.log(error.toString())
  this.emit('end')
}


//setup browerSync to serve from both src and dist directories.
gulp.task('browserSync', function() {
  browserSync.init({
    server: {
      baseDir: ["./", "src"] //  ./ signifies root of folder, allows to load files from dist and src folders.
    },
  })
});


//one way sync of root folder
gulp.task('syncHtmlRootDir', function(done) {
  return gulp.src(['src/*.html'])
  .pipe(newer('dist/'))
  .pipe(gulp.dest('dist/'))
  .pipe(browserSync.reload({
    stream: true
  }))
});


//one way sync of app folder
gulp.task('syncHtmlAppDir', function(done) {
  return gulp.src(['src/app/**/*'])
  .pipe(newer('dist/app/'))
  .pipe(gulp.dest('dist/app/'))
  .pipe(browserSync.reload({
    stream: true
  }))
});

//one way sync of image folder
gulp.task('syncImgDir', function(done) {
  return gulp.src(['src/assets/img/**/*'])
  .pipe(newer('dist/assets/img/'))
  .pipe(gulp.dest('dist/assets/img/'))
  .pipe(browserSync.reload({
    stream: true
  }))
});


//copy and compile SCSS code
gulp.task('compileSass', function() {
  return gulp.src('src/assets/css/**/*.scss')
  .pipe(sass())
  .on('error', handleError)
  .pipe(minifyCss()) 
  .pipe(gulp.dest('dist/assets/css'))
  .pipe(browserSync.reload({
    stream: true
  }))
});


//minify JS
gulp.task('uglifyJS', function() {
  gulp.src('src/assets/js/**/*.js')
  .pipe(uglify())
  .on('error', handleError)
  .pipe(gulp.dest('dist/assets/js'))
  .pipe(browserSync.reload({
    stream: true
  }))
});



//watch tasks
gulp.task('watch', ['browserSync'], function() {
  var rootDir = gulp.watch('src/*.html', ['syncHtmlRootDir']);
  rootDir.on('change', function(ev) {
    if(ev.type === 'deleted') {
      del(path.relative('./', ev.path).replace('src','dist'));
    }
  }); 

  var appDir = gulp.watch('src/app/**/*', ['syncHtmlAppDir']);
  appDir.on('change', function(ev) {
    if(ev.type === 'deleted') {
      del(path.relative('./', ev.path).replace('src/app/','dist/app/'));
    }
  }); 

  var imgDir = gulp.watch('src/assets/img/**/*', ['syncImgDir']);
  imgDir.on('change', function(ev) {
    if(ev.type === 'deleted') {
      del(path.relative('./', ev.path).replace('src/assets/img/','dist/assets/img/'));
    }
  });

  var jsDir = gulp.watch('src/assets/js/**/*', ['uglifyJS']);
  jsDir.on('change', function(ev) {
    if(ev.type === 'deleted') {
      del(path.relative('./', ev.path).replace('src/assets/js/','dist/assets/js/'));
    }
  });

  var cssDir = gulp.watch('src/assets/css/**/*', ['compileSass']);
  cssDir.on('change', function(ev) {
    if(ev.type === 'deleted') {
      del(path.relative('./', ev.path).replace('src/assets/css/','dist/assets/css/'));
    }
  });  

});

所以我1）希望将重复的复制任务组合成更少的任务2）让删除文件功能适用于所有复制任务，3）优化我的监视任务功能以减少重复。

p.s。我还注意到，如果我将新文件添加到监视文件夹，它将不会“识别”它们，直到我重新启动监视命令，所以我的同步方法并不完全是防弹的。 = /

您的想法非常感谢。谢谢！

优化gulp watch任务

0 个答案: