gulp自动化构建

const { src, dest, watch, series, parallel } = require('gulp')
const loadPlugins = require('gulp-load-plugins') //gulp里的插件一块require
const plugins = loadPlugins()
const browsersync = require('browser-sync') //浏览器实时刷新
const bs = browsersync.create()
const del = require('del')

const data = {
  menus: [
    {
      name: 'Home',
      icon: 'aperture',
      link: 'index.html'
    },
    {
      name: 'About',
      link: 'about.html'
    },
    {
      name: 'Contact',
      link: '#',
      children: [
        {
          name: 'Twitter',
          link: 'https://twitter.com'
        },
        {
          name: 'About',
          link: 'https://github.com'
        }
      ]
    }
  ],
  pkg: require('./package.json'),
  date: new Date()
}


const scripts = () => {
  return src('src/assets/scripts/*.js', { base: 'src' })
    .pipe(plugins.babel({ presets: ['@babel/preset-env'] })) //转为es5
    // .pipe(plugins.uglify()) //压缩js
    .pipe(dest('temp'))
}


const styles = () => {
  return src('src/assets/styles/*.scss', { base: 'src' })
    .pipe(plugins.sass()) //sass转为css。以下划线_开头的文件会被默认为是主文件的依赖文件,不会被编译执行。 sass({outputStyle: 'expanded'})括号完全展开
    .pipe(dest('temp'))
}


const pages = () => {
  return src('src/*.html')
    .pipe(plugins.swig({ data, defaults: { cache: false } })) //对使用模版引擎的模版文件进行转译。// 防止模板缓存导致页面不能及时更新
    .pipe(dest('temp'))
}


const images = () => {
  return src('src/assets/images/**', { base: 'src' })
    .pipe(plugins.imagemin({
      progressive: true// 无损压缩JPG图片
      // svgoPlugins: [{removeViewBox: false}], // 不移除svg的viewbox属性
      // use: [pngquant()] // 使用pngquant插件进行深度压缩
    }))
    .pipe(dest('dist'))
}


const fonts = () => {
  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/scripts/*.js', scripts) //监听js文件变化
  watch('src/assets/styles/*.scss', styles) //监听样式文件变化
  watch('src/*.html', pages) //监听html文件变化
  // watch('src/assets/images/**', images) //监听图片变化
  // watch('src/assets/fonts/**', fonts) //监听字体变化
  // watch('public/**', extra) //监听public里文件变化
  watch(['src/assets/images/**', 'src/assets/fonts/**', 'public/**']).on('change', () => {
    bs.reload()
  }) //不构建文件，文件有变化直接刷新浏览器
  bs.init({
    notify: false,
    // port: 2080,//默认端口号 3000
    open: false,
    files: 'temp/**', //监听指定位置文件变化时刷新加载
    server: {
      baseDir: ['temp', 'src', 'public'], //src\public减少开发阶段的文件构建，dist下没有到src、public中寻找
      routes: {
        '/node_modules': 'node_modules' //路由映射
      }
    }
  })
}

const useref = () => { //生产阶段再压缩；不能边读边写文件，所以增加temp目录
  return src('temp/**', { base: 'temp' })
    .pipe(plugins.useref({ searchPath: ['temp', '.'] }))
    .pipe(plugins.if(/\.js$/, plugins.uglify()))//压缩js
    .pipe(plugins.if(/\.css$/, plugins.cleanCss()))//压缩css
    .pipe(plugins.if(/\.html$/, plugins.htmlmin({
      removeComments: true,//清除HTML注释
      collapseWhitespace: true,//压缩HTML
      collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
      removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
      removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
      removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
      minifyJS: true,//压缩页面JS
      minifyCSS: true//压缩页面CSS
    })))
    .pipe(dest('dist'))
}

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

const compile = parallel(scripts, styles, pages)
const develop = series(compile, serve)
const build = series(clean, parallel(images, fonts, extra, series(compile, useref)))


module.exports = {
  clean,
  develop,
  build
}