Gulp自动化构建案例---重新规划构建过程

//clean任务
const clean = () =>{
  return del(['dist','temp'])
}

将style、script、page放到temp临时目录中

例如：

const style = () =>{
  return src('src/assets/styles/*scss',{base:'src'})
  .pipe(plugins.sass({outputStyle:'expanded'}))
  .pipe(dest('temp'))
  .pipe(bs.reload({stream:true}))
}
//script、page同理

修改serve任务

const serve = () => {
  //监视样式文件
  watch('src/assets/styles/*scss',style);
  //监视脚本文件
  watch('src/assets/scripts/*.js',script);
  //监视页面文件
  watch('src/*.html',page);
  // //监视图片文件
  // watch('src/assets/images/**',img);
  // //监视字体文件
  // watch('src/assets/font/**',font);
  // //监听额外任务文件
  // watch('public/**',extra);
  watch([
    'src/assets/images/**',
    'src/assets/font/**',
    'public/**'
  ],bs.reload)
  //监视构建后的文件
  bs.init({
    notify:false,
    port:2080,
    //open:false,
    //files:'dist/**',
    server:{
      baseDir:['temp','src','public'],
      routes:{
        '/node_module':'node_modules'
      }
    }
  })
}

修改useref任务

const useref = () => {
  return src('temp/*.html',{base:'dist'})
  .pipe(plugins.useref({searchPath:['dist','.']}))
  //html js css
  //指定转换流
  //压缩空白字符collapseWhitespace
  //minifyCSS:true,minifyJS:true，压缩html页面中的css和js
  .pipe(plugins.if(/\.js$/,plugins.uglify()))
  .pipe(plugins.if(/\.css$/,plugins.cleanCss()))
  .pipe(plugins.if(/\.html$/,plugins.htmlmin({
    collapseWhitespace:true,
    minifyCSS:true,
    minifyJS:true
  })))
  .pipe(dest('release'))
}

修改组合任务

const build = series(clean,parallel(series(compile,useref),img,font,extra));