Grunt Gulp前端工程化工具的使用(二)

1.Gulp-的基本使用

// gulpfile.js  入口文件
exports.test = done => {
  console.log('gulp test-task');
  done()
}
exports.default = done => {
  console.log('gulp default');
  done()
}
//gulp 4.0 以前
const gulp = require('gulp')
gulp.task('bar', done => {
  console.log('bar 4.0');
  done()
})

2.Gulp-组合任务

gulp 组合任务
const {
  series,
  parallel
} = require('gulp')
​
const task1 = done => {
  console.log('task1 running');
  done()
}
const task2 = done => {
  console.log('task2 running');
  done()
​
}
const task3 = done => {
  console.log('task3 running');
  done()
}
exports.stasks = series(task1, task2, task3)
exports.ptasks = parallel(task1, task2, task3)

3.Gulp-异步任务

// Gulp  异步任务的三种方式(callback, Promise, async, stream)
exports.callback = done => {
  console.log('callback task')
  done()
}
exports.callback_error = done => {
  console.log('callback_error task')
  done(new Error('task error')) // 会阻断之后的进程
}
exports.promise = done => {
  console.log('promiser task')
  return Promise.resolve()
}
exports.promise_error = done => {
  console.log('promiser task')
  return Promise.reject(new Error('task_error'))
}
const timeout = time => {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, timeout);
  })
}
exports.sync = async () => {
  await timeout(1000)
  console.log('async task')
}
const fs = require('fs')
exports.stream = done => {
  const readStream = fs.createReadStream('package.json')
  const writeStream = fs.createWriteStream('temp.txt')
  readStream.pipe(writeStream)
  // return readStream  // gulp 自动监听 'end'事件
  readStream.on('end', () => {
    done()
  })
}

4.Gulp-构建过程核心原理

// 核心过程 读取文件 => 转换文件 => 写入文件  ( The streaming build system )
//  构建核心原理
const fs = require('fs')
const {
  Transform
} = require('stream')
const {
  ReadStream
} = require('tty')
​
exports.default = done => {
  const readStream = fs.createReadStream('package.json')
  const writeStream = fs.createWriteStream('temp1.json')
​
  const transform = new Transform({
    transform: (chunk, encoding, callback) => {
      const input = chunk.toString()
      const output = input.replace(/\s+/g, '').replace(//*.+?*//g, '')
      callback(null, output) // 第一个参数为 错误参数  无错误赋值 null
    }
  })
  readStream.pipe(transform).pipe(writeStream)
  return writeStream
}

5.Gulp文件操作API

// gulp 文件操作API
const { src, dest } = require('gulp')
const cleanCss = require('gulp-clean-css')
const rename = require('gulp-rename')
​
exports.default = () => {
  // return src('src/style.css').pipe(cleanCss()).pipe(rename({extname: '.main.css'})).pipe(dest('dist'))
  return src('src/*.css').pipe(cleanCss()).pipe(rename({extname: '.main.css'})).pipe(dest('dist/css'))
}

6.Gulp构建案例

const { src, dest, parallel, series, watch } = require('gulp')
​
const del = require('del') // 删除指定文件
const browserSync = require('browser-sync') // 开发服务器 - 热更新
​
const loadPlugins = require('gulp-load-plugins') // 自动加载插件
​
const plugins = loadPlugins()
const bs = browserSync.create()
​
const data = { // 配合swig
  menus: [
    {
      name: 'Home',
      icon: 'aperture',
      link: 'index.html'
    },
    {
      name: 'Features',
      link: 'features.html'
    },
    {
      name: 'About',
      link: 'about.html'
    },
    {
      name: 'Contact',
      link: '#',
      children: [
        {
          name: 'Twitter',
          link: 'https://twitter.com/w_zce'
        },
        {
          name: 'About',
          link: 'https://weibo.com/zceme'
        },
        {
          name: 'divider'
        },
        {
          name: 'About',
          link: 'https://github.com/zce'
        }
      ]
    }
  ],
  pkg: require('./package.json'),
  date: new Date() 
}
​
const clean = () => {
  return del(['dist', 'temp'])
}
​
const style = () => {
  return src('src/assets/styles/*.scss', { base: 'src' }) // base : src 指定保持src下的子目录
    .pipe(plugins.sass({ outputStyle: 'expanded' }))  // { outputStyle: 'expanded' } 指定代码展开 => color: red; }  => color:red; /n }
    .pipe(dest('temp'))
    .pipe(bs.reload({ stream: true }))
}
​
const script = () => {
  return src('src/assets/scripts/*.js', { base: 'src' })
    .pipe(plugins.babel({ presets: ['@babel/preset-env'] }))
    .pipe(dest('temp'))
    .pipe(bs.reload({ stream: true }))
}
​
const page = () => {
  return src('src/*.html', { base: 'src' })
    .pipe(plugins.swig({ data, defaults: { cache: false } })) // 防止模板缓存导致页面不能及时更新
    .pipe(dest('temp'))
    .pipe(bs.reload({ stream: true }))
}
​
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()) // 处理字体文件中的svg
    .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: 2080,
    // open: false, // 自动打开浏览器 
    // files: 'dist/**',
    server: {
      baseDir: ['temp', 'src', 'public'],
      routes: {
        '/node_modules': 'node_modules'
      } // 指定资源目录
    }
  })
}
​
const useref = () => { // 为生产环境指定路径
  return src('temp/*.html', { base: 'temp' })
    .pipe(plugins.useref({ searchPath: ['temp', '.'] }))
    // html js css
    .pipe(plugins.if(/.js$/, plugins.uglify()))  // if 为  gulp-if插件
    .pipe(plugins.if(/.css$/, plugins.cleanCss()))
    .pipe(plugins.if(/.html$/, plugins.htmlmin({
      collapseWhitespace: true, //空白换行符
      minifyCSS: true, // 压缩行内cdd
      minifyJS: true // 压缩行内js
    })))
    .pipe(dest('dist'))
}
​
const compile = parallel(style, script, page)
​
// 上线之前执行的任务
const build =  series(
  clean,
  parallel(
    series(compile, useref),
    image,
    font,
    extra
  )
)
​
const develop = series(compile, serve)
​
module.exports = {
  clean,
  build,
  develop
}
​