Gulp - 《前端学习笔记》

高效，易用
编写gulpfile.js

基本使用

//gulp入口文件
//4.0以后导出函数成员
//标记任务已完成
exports.foo = (done) => {
  console.log("foo task")
  done() //标识任务完成
}
exports.default = (done) => {
  console.log('defaule task')
  done()
}

组合任务 ```javascript //组合任务 //并行任务和串行任务 const { series, parallel } = require(“gulp”) const task1 = (done) => { console.log(“task1 working~”) done() } const task2 = (done) => { setTimeout(() => {
```
  console.log("task2 working")
  done()
```
}, 1000) } const task3 = (done) => { setTimeout(() => {
```
  console.log("task3 working")
  done()
```
}, 1000) } exports.foo = series(task1, task2, task3) //依次执行这些任务 exports.bar = parallel(task1, task2, task3) //并行，同时执行


- 异步任务
```javascript
//异步任务
// 1.回调函数，调用done,错误优先，多个任务执行，后续任务不会工作
exports.callback = (done) => {
    console.log("callback task~")
    done()
}
exports.callback_error = (done) => {
    console.log("callback task~")
    done(new Error("task failed")) //执行失败
}
//2.promise
exports.promise = () => {
    console.log("promise task")
    return Promise.resolve()
}
exports.promise_error = () => {
    console.log("promise task")
    return Promise.reject()
}
//3.async await
const timeout = (time) => {
    return new Promise((resolve) => {
        setTimeout(resolve, time)
    })
}
exports.async = async () => {
    await timeout(1000)
    console.log("async task")
}
//4.stream方式最常见，构建系统大多数在处理文件
const fs = require("fs")
exports.stream = () => {
    const readStream = fs.createReadStream("package.json")
    const writeStream = fs.createWriteStream("temp.txt")
    readStream.pipe(writeStream) //复制文件到
    return readStream  //结束的时机是readStream end的时候 有end事件
}
//原理
// exports.stream = (done) => {
//     const readStream = fs.createReadStream("package.json")
//     const writeStream = fs.createWriteStream("temp.txt")
//     readStream.pipe(writeStream) //复制文件到
//     // return readStream  //结束的时机是readStream end的时候 有end事件
//     //原理是监听end时机
//     readStream.on("end", () => {
//         done()
//     })
// }

构建过程核心工作原理后文使用gulp提供的方法
- 大多数将文件读取 -》转换-》另一个位置 ```javascript const fs = require(“fs”) const { Transform } = require(“stream”)

exports.default = () => { // 定义读取文件流，写入文件流 const readStream = fs.createReadStream(“./nomailze.css”) const writeStream = fs.createWriteStream(“nomailze.min.css”) //转换文件，此处是压缩 const transform = new Transform({ //转换过程 transform: (chunk, encoding, callback) => { //核心转换过程 //chunk文件流读取到的文件内容（Buffer） const input = chunk.toString() const output = input.replace(/\s+/g, “”).replace(/\/*.+?*\//g, “”) callback(null, output) //错误优先 }, }) //读取到的文件流导入写入文件流 readStream.pipe(transform).pipe(writeStream) return readStream }


- Gulp文件操作API
- 以及常规过程见下代码块
```javascript
// Gulp文件操作API + 插件使用
//通过src方法创建读取流，在通过gulp插件加工，然后dest方法创建写入流
//强大与可以使用通配符
const { src, dest } = require("gulp")
const cleanCss = require("gulp-clean-css")
const rename = require("gulp-rename")
exports.default = () => {
    return src("src/*.css")
        .pipe(cleanCss())
        .pipe(rename({ extname: ".min.css" })) //重命名扩展名
        .pipe(dest("dist"))
}

Gulp构建案例
Gulp自动载入插件
- gulp-load-plugins
热更新开发服务器
- borwser-sync 模块
  - 支持代码修改过后自动热更新到浏览器当中
useref会对文件进行整合
文件压缩
- 分别压缩HTML,CSS,JavaScript
- css,js由useref生成。
构建流程整理

```javascript const { src, dest, parallel, series, watch } = require(“gulp”) const del = require(“del”) const browserSync = require(“browser-sync”) const loadPlugins = require(“gulp-load-plugins”) const { use } = require(“browser-sync”) const plugins = loadPlugins() const bs = browserSync.create() //创建服务器 const data = { 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(), } //自定义clean任务 const clean = () => { return del([“dist”, “temp”]) } //编译样式 const style = () => { //样式编译 return src(“src/assets/styles/*.scss”, { base: “src” }) //base指定原始目录

  .pipe(plugins.sass({ outputStyle: "expanded" }))
  .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"] })) //转换es6新特性
  .pipe(dest("temp"))
  .pipe(bs.reload({ stream: true }))

} //编译页面 const page = () => { //src任意子目录下的html 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()).pipe(dest(“dist”)) } //处理public const extra = () => { return src(“public/*”, { base: “public” }).pipe(dest(“dist”)) } //整合js css 压缩 const useref = () => { return src(“temp/.html”, { base: “temp” })

  .pipe(plugins.useref({ searchPath: ["temp", "."] }))
  .pipe(plugins.if(/\.js$/, plugins.uglify())) //分别处理不同文件
  .pipe(plugins.if(/\.css$/, plugins.cleanCss())) //分别处理不同文件
  .pipe(plugins.if(/\.html$/, plugins.htmlmin({ collapseWhitespace: true, minifyCSS: true, minifyJS: true }))) //分别处理不同文件
  .pipe(dest("dist"))

} //启动服务器 const serve = () => { //修改文件。执行相应任务修改dist 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: {
          //优先于baseDir
          "/node_modules": "node_modules",
      },
  },

}) } //组合任务 const compile = parallel(style, script, page) const build = series(clean, parallel(series(compile, useref), extra, image, font)) //自动清除dist下的文件 const develop = series(compile, serve) module.exports = { clean, build, develop, }

```