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分析就如上述一样,只要对于任务的同步和异步了解后,然后根据实际场景修改执行顺序,问题就迎刃而解了!
上一篇: 28岁,生日快乐!
下一篇: vue-cli 脚手架注意事项