gulp任务顺序

task clean 在打包之前，先清空build文件夹

gulp.task('clean', d => {
    
  if (checkDir('./build')) {
    
    del(['build']);
    // gulp.src('./build/').pipe(clean());
  }
  d();
});

gulp.series('clean', 'font', gulp.parallel('image', 'hero'), done => {
    })

当直接运行gulp时，有时会报错ENOENT: no such file or directory, chmod ‘E:\Practice\myWorld\build\img\bg’

gulp

先运行gulp clean
在执行gulp时候 ，就没有问题

gulp clean
gulp

问题原因是gulp clean的还没有删除完build文件夹，就执行了下一个任务
所以解决办法就是在下一个任务中加 setTimeout

下一个任务font

gulp.task('font', done => {
    
  // settimeout build 还没有删除玩就看是 build  会出问题
  setTimeout(() => {
    
    gulp.src('./css/font/**').pipe(gulp.dest('build/css/font'));
    done();
  }, 2000);
});

文件目录

gulpfile.js

const gulp = require('gulp'),
  uglify = require('gulp-uglify'), // 压缩文件
  rename = require('gulp-rename'), // 重命名
  jshint = require('gulp-jshint'),
  minifyHtml = require('gulp-minify-html'),
  miniHtml = require('gulp-htmlmin'),
  minifyCss = require('gulp-minify-css'),
  imagemin = require('gulp-imagemin'),
  useref = require('gulp-useref'),
  csso = require('gulp-csso'),
  rev = require('gulp-rev'),
  revReplace = require('gulp-rev-replace'),
  filter = require('gulp-filter'),
  clean = require('gulp-clean'),
  fs = require('fs'),
  gulpIf = require('gulp-if'),
  gulpUtil = require('gulp-util'),
  babel = require('gulp-babel'),
  gulpZip = require('gulp-zip'),
  del = require('del'),
  $ = require('gulp-load-plugins')();
// gulp.task('js', function () {
    
//     return gulp.src('dist/js/*.js').pipe(uglify())
// })

// gulp.src('./node_modules/**/*.js').pipe(uglify()).pipe(gulp.dest('build'))

//js代码的处理
// gulp.task('vendor', function () {
    
//     return gulp.src('./node_modules/**')
//         .pipe(uglify())
//         .pipe(rename('index.min.js'))
//         .pipe(gulp.dest('build'))
// });
//js代码的处理
gulp.task('script', done => {
    
  gulp
    .src('./node_modules/jquery/dist/jquery.min.js')
    .pipe($.uglify())
    .pipe(rename('script.js'))
    .pipe(gulp.dest('build'));
  done();
});

// [20:08:56] The following tasks did not complete: default, script
// [20:08:56] Did you forget to signal async completion?
// gulp.task('css', function () {
    
//     gulp.src('')
// })

// gulp.task('html', function () {
    
//     gulp.src('./index.html')
//         .pipe(minifyHtml())
//         .pipe(gulp.dest('build'))
// })

gulp.task('html', done => {
    
  gulp
    .src('./index.html')
    .pipe(minifyHtml())
    .pipe(gulp.dest('build'));
  done();
});

gulp.task('css', done => {
    
  gulp
    .src('./index.css')
    .pipe(minifyCss())
    .pipe(gulp.dest('build'));
  done();
});

gulp.task('image', done => {
    
  gulp
    .src('./img/**')
    .pipe(
      imagemin({
    
        progressive: true,
        interlaced: true
      })
    )
    .pipe(gulp.dest('build/img'));
  done();
});

// hero
gulp.task('hero', done => {
    
  gulp.src('./resource/**').pipe(gulp.dest('build/resource'));
  done();
});

gulp.task('font', done => {
    
  // settimeout build 还没有删除玩就开始 build  会出问题
  setTimeout(() => {
    
    gulp.src('./css/font/**').pipe(gulp.dest('build/css/font'));
    done();
  }, 2000);
});

gulp.task('music', done => {
    
  gulp.src('./music/**').pipe(gulp.dest('build/music'));
  done();
});

const checkDir = path => {
    
  console.log(fs.existsSync(path));
  return fs.existsSync(path);
};

// gulp3 可以 gulp4 不可以
// gulp.task('default', ['script', 'html'], function () {
    
//     console.log('default')
// })
// gulp.task('default', gulp.series('script', 'html', 'image', done => done()))
gulp.task('clean', d => {
    
  if (checkDir('./build')) {
    
    del(['build']);
    // gulp.src('./build/').pipe(clean());
  }
  d();
});

// gulp.series 同步 gulp。parallel异步
gulp.task(
  'default',
  gulp.series('clean', 'font', gulp.parallel('image', 'hero'), done => {
    
    const jsFilter = filter('**/*.js', {
    
        restore: true
      }),
      cssFilter = filter('**/*.css', {
    
        restore: true
      }),
      // 第一个参数代表所有 第二个参数代表除了index.html
      indexHtmlFilter = filter(['**/*', '!index.html'], {
    
        restore: true
      });

    // pump

    gulp
      .src('index.html')
      .pipe($.useref()) /**找到注释 */
      .pipe(jsFilter) /**筛选js */
      .pipe(
        babel({
    
          presets: ['es2015'],
          compact: false
        })
      )
      .pipe(uglify()) /**压缩js */
      .on('error', err => {
    
        gulpUtil.log(gulpUtil.colors.red('Error'), err.toString());
      })
      .pipe(jsFilter.restore) /** 把js文件扔回流里 */
      .pipe(cssFilter)
      // .pipe(minifyCss())
      .pipe(csso())
      .pipe(cssFilter.restore)
      .pipe(indexHtmlFilter)
      .pipe(
        rev()
      ) /**前面的filter排除了index.html 然后再打版本号  gulp-rev 为静态文件随机添加hash值 */
      .pipe(indexHtmlFilter.restore)
      .pipe(revReplace()) /**更新index中的引用 */
      // .pipe(minifyHtml()) // 压缩后 js报错
      // .pipe(miniHtml({ removeComments: true }))
      .pipe(gulp.dest('build'));
    // gulp
    //   .src('build')
    //   .pipe(gulpZip('myWorld.zip'))
    //   .pipe(gulp.dest('build-zip'));
    done();
  })
);

console

PS E:\Practice\myWorld> gulp
[13:41:56] Using gulpfile E:\Practice\myWorld\gulpfile.js
[13:41:56] Starting 'default'...
[13:41:56] Starting 'clean'...
true
[13:41:56] Finished 'clean' after 6.39 ms
[13:41:56] Starting 'font'...
d
[13:41:56] Finished 'font' after 10 ms
[13:41:56] Starting 'image'...
[13:41:56] Finished 'image' after 3.97 ms
[13:41:56] Starting 'hero'...
[13:41:56] Finished 'hero' after 3.15 ms
[13:41:56] Starting '<anonymous>'...
[13:41:56] Finished '<anonymous>' after 6.04 ms
[13:41:56] Finished 'default' after 37 ms
events.js:174
      throw er; // Unhandled 'error' event
      ^

Error: ENOENT: no such file or directory, chmod 'E:\Practice\myWorld\build\img\bg'
Emitted 'error' event at:
    at Pumpify.EventEmitter.emit (domain.js:454:12)
    at Pumpify.onerror (E:\Practice\myWorld\node_modules\readable-stream\lib\_stream_readable.js:640:52)
    at Pumpify.emit (events.js:189:13)
    at Pumpify.EventEmitter.emit (domain.js:441:20)
    at Pumpify.Duplexify._destroy (E:\Practice\myWorld\node_modules\duplexify\index.js:191:15)
    at E:\Practice\myWorld\node_modules\duplexify\index.js:182:10
    at process._tickCallback (internal/process/next_tick.js:61:11)