Gulp案例

样式编译

yarn add gulp-sass sass --dev

const { src, dest } = require('gulp')
const sass = require('gulp-sass')(require('sass'))

const style = () => {
  // base: 'src' 标记文件路径，用于生成的文件也是这个路径
  return src('src/assets/styles/*.scss', { base: 'src' })
    // 展开模式，输出的css后括号在单独一行
    // 同时会把_前缀的scss合并到main里面
    .pipe(sass({ outputStyle: 'expanded' }))
    .pipe(dest('dist'))
}

脚本编译

yarn add gulp-babel @babel/core @babel/preset-env --dev

const babel = require('gulp-babel')

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

页面模板编译

yarn add gulp-swig --dev

const swig = require('gulp-swig')

const page = () => {
  return src('src/*.html', { base: 'src' })
    .pipe(plugins.swig({ data, defaults: { cache: false }}))// 防止模板缓存导致页面不能及时更新
    .pipe(dest('dist'))
}

图片字体压缩

yarn add gulp-imagemin@7.1.0 --dev(8.0需要使用import导入)

const imagemin = require('gulp-imagemin')

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

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

其他文件 & 文件清理

yarn add del --dev

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

const compile = parallel(style, script, page, image, font)
// 先清除，然后移动其他文件 和 编译同步进行
const build = series(clean, parallel(compile, extra))

自动加载插件

yarn add gulp-load-plugins --dev

// 自动会把gulp-去除， 如果是gulp-sass-xxx，会变成sass-Xxx
const loadPlugins = require('gulp-load-plugins')
const plugins = loadPlugins()

// sass-> plugins.sass(require('sass'))
// babel->plugins.babel
// swig->plugins.swig
// imagemin->plugins.imagemin

可以整体替换名字

开发服务器

yarn add browser-sync --dev

const browserSync = require('browser-sync')
const bs = browserSync.create()

const serve = () => {
  bs.init({
    notify: false,
    port: 2080,
    // open: false,
    files: 'dist/**', // 监听文件夹
    server: {
      // 启动哪个文件夹
      baseDir: ['dist'],
      // 使用本地的node_modules
      routes: {
        '/node_modules': 'node_modules'
      }
    }
  })
}

监听源码

1. 通过watch来监听

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)
   /*省略*/
}

2. image、font、extra开发过程中没有必要重新编译。 可以通过拆分开发和发布任务来处理。 develop只是编译必须的，同时监听变化。

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({
     /*省略*/
    server: {
      // public
      baseDir: ['dist', 'src', 'public'],
      // 使用本地的node_modules
      routes: {
        '/node_modules': 'node_modules'
      }
    }
  })
}

// const compile = parallel(style, script, page, image, font)
// const build = series(clean, parallel(compile, extra))
const compile = parallel(style, script, page)
const build = series(clean, parallel(compile, image, font, extra))
const develop = series(compile, serve)

3. image、font、extra开发过程中如果发生了变化， 怎么调试呢？bs.reload

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里面files来作为监听文件夹变化。
也可以在每个任务结束后，通过bs.reload来监听

const script = () => {
  return src('src/assets/scripts/*.js', { base: 'src' })
    .pipe(plugins.babel({ presets: ['@babel/preset-env'] }))
    .pipe(dest('dist'))
    // 以流的方式像浏览器推 
    // .pipe(bs.reload({stream: true}))
}

userref文件处理

1. 安装userref：yarn add gulp-useref --dev
2. 安装压缩插件(html js css)yarn add gulp-htmlmin gulp-uglify gulp-clean-css --dev
3. 安装判断操作yarn add gulp-if --dev

const useref = () => {
  // 注释去掉， 同时把多个文件合并一起vendor.css
  return src('dist/*.html', { base: 'dist' })
    // 一般从生成目录里面找， 常用的放前面
    .pipe(plugins.useref({ searchPath: ['dist', '.'] }))
    // html js css
    .pipe(plugins.if(/\.js$/, plugins.uglify()))
    .pipe(plugins.if(/\.css$/, plugins.cleanCss()))
    .pipe(plugins.if(/\.html$/, plugins.htmlmin({
      // 去除空白符
      collapseWhitespace: true,
      // 压缩样式
      minifyCSS: true,
      // 压缩JS
      minifyJS: true
    })))
    // 都是dist的时候，可能会出现读写冲突
    .pipe(dest('dist'))
}

针对读写冲突的问题，我们可以写入文件的时候，先写入一个临时文件夹，最终useref输出到dist文件夹