gulp自动化构建

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


//每一个插件都需要手动引入,比较麻烦
// 通过gulp-load-plugins可以自动引入插件
//yarn add gulp-load-plugins --dev
const loadPlugins = require('gulp-load-plugins')
const plugins = loadPlugins()

//不需要手动加载
// const plugins.sass  = require('gulp-sass')
// const plugins.babel = require('gulp-babel')
// const plugins.swig = require('gulp-swig')
// const plugins.imagemin = require('gulp-imagemin')

const del = require('del')
const browerSync = require('brower-sync') //开发服务器
const bs = browerSync.create()

//yarn add del --dev  清除dist目录下
const clean = ()=>{
  return del(['dist'])
}

//


// 样式的编译任务
// yarn add gulp-sass --dev
const style = () => {
  return src('src/assets/styles/*.scss',{base:'src'})
    .pipe(plugins.sass())
    .pipe(dest('dist'))
}


//脚本的编译任务----------
// yarn add gulp-babel --dev
// yarn add @babel/core @babel/preset-env --dev
const script = () => {
  return src('src/assets/scripts/*.js',{base:'src'})
    .pipe(plugins.babel({presets:['@babel/preset-env']}))
    .pipe(dest('dist'))
}

// src/**/*.html 代表任意子目录下的html文件
const page = () => {
  return src('src/*.html',{base:'src'})
    .pipe(plugins.swig())
    .pipe(dest('dist'))
}


const image = () => {
  return src('src/assets/images/**',{base:'src'})
    .pipe(plugins.imagemin())
    .pipe(dest('dist'))
}

const font = () => {
  return src('src/assets/fonts/**',{base:'src'})
    .pipe(plugins.imagemin())
    .pipe(dest('dist'))
}

const extra = () => {
  return src('public/**',{base:'public'})
    .pipe(dest('dist'))
}

const serve = () => {
  watch('src/assets/styles/*.scss',style)
  watch('src/assets/scripts/*.js',script)
  watch('src/*.html',page)
  // 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:2090,   //指定使用端口号
    // open:false, 
    server:{
      baseDir:['dist','src','public'],
      routes:{
        '/node_modules':'node_modules'
      }
    }
  })
}
//开发阶段不需要编译图片,文字(图片文字只是压缩了不用编译,资源的变化另外讲)
const compile = parallel(style,script,page,)
//上线之前执行的任务
const build = series(clean,parallel(compile,image,font,extra))
const develop = series(compile,serve)
module.exports = {
  clean,
  build,
  develop
}