gulp打包的配置文件

const {src,dest,parallel,series,watch}=require('gulp')

const loadPlugins=require('gulp-load-plugins')
const plugin=loadPlugins()//实现自动下载依赖
// const plugin.sass=require('gulp-sass')
// //js转换还要下这两个依赖@babel/core @babel/preset-env
// const plugin.bebel=require('gulp-babel')
// const plugin.swig=require('gulp-swig')
// const plugin.img=require('gulp-imagemin')
const delDist =require('del')
const browserSync=require('browser-sync')
const { use } = require('browser-sync')
//创建一个开发服务器
const bs=browserSync.create()

const style=()=>{
  return src('src/assets/styles/*.scss',{base:'src'}) //以src为基础目录,保持原有目录结构输出
  // 转换scss文件,会忽略_开头的文件
  .pipe(plugin.sass())  //转换css文件
  .pipe(dest('temp'))
  //或者使用以流的方式推进浏览器也行
  .pipe(bs.reload({stream:true}))
}

const script=()=>{
  return src('src/assets/scripts/*.js',{base:'src'}) 
  .pipe(plugin.babel({presets:['@babel/preset-env']})) 
  .pipe(dest('temp'))
  .pipe(bs.reload({stream:true}))
}

const html=()=>{
  return src('src/**/*.html',{base:'src'}) 
  .pipe(plugin.swig({cache:false})) //传入要模板引擎要
  .pipe(dest('temp'))
  .pipe(bs.reload({stream:true}))
}

const image=()=>{
  return src('src/assets/images/**',{base:'src'}) 
  .pipe(plugin.imagemin()) //图片压缩
  .pipe(dest('dist'))
}

const font=()=>{
  return src('src/assets/fonts/**',{base:'src'}) 
  .pipe(plugin.imagemin()) //图片压缩
  .pipe(dest('dist'))
}

const extra=()=>{//处理src之外的其余文件
  return src('public/**',{base:'public'})
    .pipe(dest('dist'))
}

const clean=()=>{
  return delDist(['dist','temp'])
}

const useref=()=>{
  return src('temp/*.html')
  .pipe(plugin.useref({searchPath:['dist','.']}))
  //压缩html,css,和js gulp-htmlmin gulp-uglify gulp-clean-css
  //读取流中不止一种文件,gulp-if可以用来判断是哪种文件的流
  .pipe(plugin.if(/\.js$/g,plugin.uglify()))
  .pipe(plugin.if(/\.css$/g,plugin.cleanCss()))
  .pipe(plugin.if(/\.html$/g,plugin.htmlmin({
    collapseWhitespace:true,//折叠空白字符
    minifyCss:true,//压缩内部的css
    minifyJs:true
  })))
  .pipe(dest('dist'))//如果写入和读取都是dist,会产生冲突,需要区分
}

const serve=()=>{
  //第一个参数是监控对应的路径,当这个路径下的文件产生变化时,自动触发对应的任务
  watch('src/assets/styles/*.scss',style)
  watch('src/assets/scripts/*.js',script)
  watch('src/**/*.html',html)
  // 开发时,热更新检测并压缩这些文件,开销很大,没有必要
  // watch('src/assets/images/**',image)
  // watch('src/assets/fonts/**',font)
  // watch('public/**',extra)
  watch(
    [
      'src/assets/images/**',
      'src/assets/fonts/**',
      'public/**'
    ],//这些文件更新后,触发对这个文件的重新请求
    bs.reload
  )

  bs.init({
    notify:false,//页面上的打开时出现的小提示的关闭
    port:3459,//指定端口
    open:true,//自动打开浏览器
    // files:'dist/**',//哪些文件修改会自动更新
    //或者使用以流的方式推进浏览器也行
    server:{
      baseDir:['temp','src','public'], //指定网页文件资源地址,从前往后一次找
      routes:{//查找文件时,替换目录地址,开发时设置就行
        '/node_modules':'node_modules'
      }
    }
  })
}


const compile=parallel(style,script,html)

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

const develop=series(compile,serve)
module.exports={
  clean,
  build,
  develop,
}