手牵手🧑‍🤝‍🧑学习Gulp不用愁

快跑啊小卢_
1,415 阅读7分钟

「本文已参与好文召集令活动，点击查看：后端、大前端双赛道投稿，2万元奖池等你挑战！」

前言🤺

  • 最近在搭自己的组件库，里面想用Gulp单独对样式进行打包来实现按需引入🏇
  • 当然用Webpack配置插件也是可以做到的，就当是复习巩固一次Gulp吧
  • 关于Gulp和Webpack的区别可以参考我之前的文章：谈谈gulp和webpack？✔️
  • 由于本文比较基础，大佬可以直接绕道啦😊，本文意在记录巩固知识的过程和运用🙆‍♂️

动手🤹‍♂️

创建项目🧱

  • 在一切开始之前分别执行以下命令要先确保电脑安装好了node和npm
node --version
npm --version

mkdir gulpBegin
cd gulpBegin
echo test>gulpfile.js
  • 接下来我们就要在这个gulpfile.js文件中定义我们gulp的任务了

gulp依赖安装🏘️

  • 自动创建package.json文件一直回车即可（用于存储配置信息及版本号）
npm init
  • 安装gulp命令行命令
npm install -g gulp
  • 安装gulp并写入package.json文件的依赖
npm install --save-dev gulp
  • 此时目录应该是这样
glupBegin
├─ gulpfile.js #接下来运行的主文件
├─ node_modules
├─ package-lock.json
└─ package.json

gulp使用🛀

Gulp 允许你使用现有 JavaScript 知识来书写 gulpfile 文件，或者利用你所掌握的 gulpfile 经验来书写普通的 JavaScript 代码。虽然gulp 提供了一些实用工具来简化文件系统和命令行的操作，但是你所编写的其他代码都是纯 JavaScript 代码。

  • 按照官网所说的gulp是可以用JavaScript 代码来进行书写，我们来编写第一个任务

导出任务🥽

  • 定义构建任务的方式就是通过导出函数成员的方式定义
/* gulpfile.js */
function gulpFun() {
  console.log('hi gulp')
}
exports.default=gulpFun //导出一个默认任务 default成员
  • 在 gulpfile.js所在的目录的命令行执行gulp即可

image.png

  • 在最新的gulp当中,它取消了同步任务模式,约定我们的每个任务必须是异步任务，当我们的任务执行完成过后,我们需要通过调用回调函数去标识这个任务已经完成
  • 如果是具名任务则需要在命令行执行gulp+任务名称
/* gulpfile.js */
function gulpFun(cb) {
  console.log('hi gulp')
  cb()
}
exports.task1=gulpFun //导出一个task1成员

image.png

组合任务⚔️

  • 在面对有多个独立任务的情况下，gulp提供了两个强大的组合方法series() 和 parallel()
  • series()会让任务们依次执行
/* gulpfile.js */
const { series } = require('gulp');
function gulpFun(cb) {
  //任务1
  console.log('hi gulp')
  cb()
}
function gulpFun2(cb) {
  //任务2
  console.log('hi 小卢')
  cb()
}
exports.default=series(gulpFun,gulpFun2) //导出一个default成员

image.png

  • parallel()会让任务们同步执行
/* gulpfile.js */
const { parallel } = require('gulp');
function gulpFun(cb) {
  //任务1
  console.log('hi gulp')
  cb()
}
function gulpFun2(cb) {
  //任务2
  console.log('hi 小卢')
  cb()
}
exports.default=parallel(gulpFun,gulpFun2) //导出一个default成员

image.png

看到这里其实基本的gulp操作你已经学会了，但我们使用gulp的目的无非就是为了处理文件从而减少我们所浪费的时间，所以我们需要借助gulp的api来实现

gulp的API🍻

  • gulp的Api有挺多的但常用的也只有那几个，剩下的有用到就去文档找就可以了

image.png

  • 构建过程大多数情况下都是将文件读取出来进行一些操作转换再放到下一个地方进行加工最后再把处理好的文件写入到一个指定的地方
  • 这一整套流程就像一根管道一样是有顺序并且一步一步来的，所以在任务中我们可以使用.pipe(写入流),实现数据写入

src()

  • 创建一个流用于读取对象，你可以当做是这个文件的入口

dest()

  • 创建一个用于将对象写入到文件系统的流 举个例子
  • 在文件夹建立一个scss文件进行测试
/* gulpfile.js */
const { src,dest,series } = require('gulp');
function gulpFun(cb) {
  src('./styles/text.scss')
  .pipe(dest('./lib/styles'))
  cb()
}
exports.default=series(gulpFun)
  • 运行gulp后目录结构会变成如下所示
glupBegin
├─ gulpfile.js
├─ node_modules
├─ lib
│  └─ styles
│     └─ text.scss
├─ package-lock.json
├─ package.json
└─ styles
   └─ text.scss
  • 可以发现gulp在读取了styles/text.scss后再./lib/styles自动生成了文件，这就是读取和写入流

gulp插件配合🥂

  • 当然我们要处理文件可不仅仅只是像这样转移文件而已，我们需要对我们的文件进行转换比如说压缩css,压缩js、重命名、css背景图生成雪碧图等等，这时候就需要用到一些插件来辅助了。
  • 在gulp官网中可查的插件也有很多，如果有需要查找的可以访问官网
  • 接下来就介绍几个插件来配合构建我上文说的对css样式进行打包
  • 假设在styles目录中有三个scss文件
styles
├─ button.scss
├─ icon.scss
└─ index.scss
  • 在index.scss中import了上面两个scss的样式
/* index.scss */
@import "button";
@import "icon";
  • 接下来我们只需要打包index.scss就可以在别的地方引入这个打包后的文件
  • 我用到了这四个插件，这些都要在npm下载为了方便贴出来直接复制到package.json执行npm install就可以
"devDependencies": {
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^7.0.0",
    "gulp-clean-css": "^4.2.0",
    "gulp-rename": "^1.4.0",
    "gulp-sass": "^4.0.2"
  }
  • 在gulpfile.js编写以下代码
/* gulpfile.js */
const { src,dest,series } = require('gulp');
const cleanCSS = require('gulp-clean-css');
const sass = require('gulp-sass');
const rename = require('gulp-rename');
const autoprefixer = require('gulp-autoprefixer');

function gulpFun(cb) {
  src('./styles/index.scss')
  .pipe(sass()) //将sass转化成css
  .pipe(autoprefixer()) //根据浏览器的不同版本自动处理浏览器的前缀，实现css浏览器的兼容
  .pipe(cleanCSS()) //压缩css文件，减小文件大小
  .pipe(rename('xl-ui.css'))  //给文件重命名
  .pipe(dest('./lib/styles')) //写入这个目录
  cb()
}
exports.default=series(gulpFun)
  • 运行gulp打包后可以在./lib/styles看到xl-ui.css文件
  • 简单的来说就是把你需要处理的文件用src()读取然后通过引入的各种插件来进行处理通过pipe来进行管道连接，让一整个流程按照顺序执行，我们只需要把它每个步骤需要做的事情给它规范好了我们之后就不需要做重复的繁琐的操作了
  • 接下来除了打包index.scss后我还想把每个单独组件的scss进行打包怎么办呢？
  • 打包一个是这么做，打包二三个也是这么做，我们只需要把他要做的任务给规定好就可以了
  • 创建一个component.json文件来存储我们要打包的文件
/* component.json */
{
  "button": "./styles/button.scss",
  "icon": "./styles/icon.scss"
}
  • 在gulpfile.js编写以下代码
/* gulpfile.js */
const { src,dest,series } = require('gulp');
const cleanCSS = require('gulp-clean-css');
const sass = require('gulp-sass');
const rename = require('gulp-rename');
const autoprefixer = require('gulp-autoprefixer');
const components = require('./component.json')

function gulpFun(cb) {
  src('./styles/index.scss')
  .pipe(sass()) //将sass转化成css
  .pipe(autoprefixer()) //根据浏览器的不同版本自动处理浏览器的前缀，实现css浏览器的兼容
  .pipe(cleanCSS()) //压缩css文件，减小文件大小
  .pipe(rename('xl-ui.css'))  //给文件重命名
  .pipe(dest('./lib/styles')) //写入这个目录
  cb()
}
// 打包单独的css文件
function gulpFun2(cb) {
  Object.keys(components).forEach(compName => {
    src(`./styles/${compName}.scss`)  //遍历json文件中要转化的scss文件
      .pipe(sass()) //将sass转化成css
      .pipe(autoprefixer()) //根据浏览器的不同版本自动处理浏览器的前缀，实现css浏览器的兼容
      .pipe(cleanCSS()) //压缩css文件，减小文件大小
      .pipe(rename(`${compName}.css`))  //给文件重命名
      .pipe(dest('./lib/styles')); //写入这个目录
  })
  cb()
}
exports.default=series(gulpFun,gulpFun2)
  • 运行gulp打包后可以在./lib/styles看到xl-ui.css文件和分开打包的css文件
glupBegin
├─ node_modules
├─ component.json
├─ gulpfile.js
├─ lib
│  └─ styles
│     ├─ button.css
│     ├─ icon.css
│     └─ xl-ui.css
├─ package-lock.json
├─ package.json
└─ styles
   ├─ button.scss
   ├─ icon.scss
   └─ index.scss
  • 我们打开打包后lib文件夹中的css文件发现确实每个都单独进行了压缩打包并且重命名
  • 这样我们的文件就处理好了！是不是很方便！在我们规定好一系列需要做的事情的任务后，下次我们有需要打包的文件就直接执行一句简单的gulp命令即可

image.png

写在最后👋

  • 本文上面说的只是用gulp对样式进行打包，如果对于多种模块化的js互相引用的时候还是用webpack来处理吧，毕竟webpack侧重模块化打包，会把所有的文件都统一处理成js文件
  • 对于gulp的细节也还有很多如果感兴趣的话可以去官网文档查查看，相信聪明的你一下就能看懂
  • 如果您觉得这篇文章有帮助到您的的话不妨点赞支持一下哟~~😛

往期精彩🌅

Webpack的基本配置和打包与介绍（一）⚡️

Webpack的基本配置和打包与介绍（二）📦

谈谈gulp和webpack？✔️

为了方便，我改了别人的轮子😅

avatar
文章
阅读
粉丝
相关推荐
一文读懂 UnoCSS：手牵手入门教程
1.4k阅读
 · 
27点赞
Monorepo基于gulp+rollup打包简析
910阅读
 · 
10点赞
对于gulp，我还是想学习一下
423阅读
 · 
25点赞
Gulp 插件了解下
330阅读
 · 
6点赞
Gulp入门使用
1.7k阅读
 · 
30点赞