gulp del报错

1、按照正常的文件管道流的方式,很容易在工程化中如下配置：

gulp.task('sass',function() {})
gulp.task('html',function() {})   
gulp.task("clean",function(){
   del(".tmp/**/*");
});
gulp.task("default",["clean","html","sass"]);

这是我们正常的书写方式！可以运行的结果却出现第一次不报错，第二次报错了:

在找问题之前首先要明白：gulp是基于文件数据流(Stream)操作，而且任务是异步执行的，更关键的是：函数本身已经执行完毕了，但是文件删除操作可能仍在进行。也就是可能其他的任务先于del任务执行了，而导致文件没有找到报错！

所以del会找不到文件是因为：del函数在执行完毕后(还没操作删除文件),这个时候已经有一个类似叫数据流(Stream)的文件映射,当它开始要删除的时候,因为是异步，有一个文件被删除或者修改了,这个时候文件映射就找不到了，所以就会提示报错！所以我们要保证不出错的条件是，执行del的时候，在删除完文件后才执行其他任务！

机智的你肯定会看下gulp官网，然后想到让任务同步而非异步进行，而且让任务先于html和sass执行，所以改动一下，就有：

gulp.task('sass',["clean"],function() {})
gulp.task('html',["clean"],function() {})   
gulp.task("clean",function(){
   return del(".tmp/**/*");
});
gulp.task("default",["clean","html","sass"]);

原理很简单：html，sass两个任务依赖clean,而且是要在clean完全执行完毕后才执行(同步非异步)。

到这里就可以吗？想想不对啊！以后要是imagemin、script等任务，那不是要写很多个clean,这样难维护,且不利于阅读,是否有个插件能让任务按照一定的顺序执行呢，这个时候run-sequence就是用来干这个的，刚刚好，所以我们修改优化我们gulpfile.js,如下：

var gulp = require("gulp");
var sass = require("gulp-ruby-sass");
var imagemin = require("gulp-imagemin");
var sourcemaps = require("gulp-sourcemaps");
var pngquant = require('imagemin-pngquant');
var browserSync = require('browser-sync').create();
var reload      = browserSync.reload;
var filter      = require('gulp-filter');
var watch=require("gulp-watch");
var cache = require('gulp-cached');
var plumber = require('gulp-plumber');
var notify = require('gulp-notify');
var del=require("del");
var rename = require('gulp-rename');
var fileInclude =require("gulp-file-include");
var wrench=require("wrench");
var autoPrefixer=require("gulp-autoprefixer");
var cleanCSS=require("gulp-clean-css");
var gulpUtil = require('gulp-util');
var runSequence = require('run-sequence');


function errorHanding(title) {
  'use strict';
  return function(err) {
    gulpUtil.log("错误异常——执行任务"+gulpUtil.colors.magenta('[' + title + ']:\n'),err.message);
    this.emit('end');//不让卡住文档流
  };
};
gulp.task('sass',function() {  
    return sass('src/**/*.scss',{ sourcemap: true})
        .pipe(cache("cached"))
        .on('error',errorHanding("sass"))
        .pipe(sourcemaps.write('maps', {
              includeContent: false,
              sourceRoot: 'source'
         }))
        .pipe(gulp.dest(".tmp"))
        .pipe(browserSync.reload({stream:true}));
});
gulp.task('html',function() {  
    gulp.src(['src/**/*.html','!src/**/_*.html'])
        .pipe(fileInclude({
            prefix: '@@',
            basepath: '@file'
        }))
        .on('error',errorHanding("html-build"))
        .pipe(cache())
        .pipe(gulp.dest(".tmp/"))
        .pipe(browserSync.reload({stream:true}));
});

gulp.task("clean",function(){
  return del(".tmp/**/*");
});

gulp.task("default",function(){
   runSequence("clean",["html","sass"])
});

del错误 bug分析就如上述一样,只要对于任务的同步和异步了解后，然后根据实际场景修改执行顺序,问题就迎刃而解了！