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

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

前言🤺

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

动手🤹‍♂️

建立项目🧱

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

node --version
npm --version
复制代码

若是上述未安装能够参考Node.js安装及环境配置
在本地空文件夹gulpBegin中建立一个gulpfile.js空的js文件

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 代码。html

按照官网所说的gulp是能够用JavaScript 代码来进行书写，咱们来编写第一个任务

导出任务🥽

定义构建任务的方式就是经过导出函数成员的方式定义

/* gulpfile.js */
function gulpFun() {
  console.log('hi gulp')
}
exports.default=gulpFun //导出一个默认任务 default成员
复制代码

在 gulpfile.js所在的目录的命令行执行gulp便可

在最新的gulp当中,它取消了同步任务模式,约定咱们的每一个任务必须是异步任务，当咱们的任务执行完成事后,咱们须要经过调用回调函数去标识这个任务已经完成
若是是具名任务则须要在命令行执行gulp+任务名称

/* gulpfile.js */
function gulpFun(cb) {
  console.log('hi gulp')
  cb()
}
exports.task1=gulpFun //导出一个task1成员
复制代码

组合任务⚔️

在面对有多个独立任务的状况下，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成员
复制代码

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成员
复制代码

看到这里其实基本的gulp操做你已经学会了，但咱们使用gulp的目的无非就是为了处理文件从而减小咱们所浪费的时间，因此咱们须要借助gulp的api来实现前端

gulp的API🍻

gulp的Api有挺多的但经常使用的也只有那几个，剩下的有用到就去文档找就能够了

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

`src()`

建立一个流用于读取对象，你能够当作是这个文件的入口

`dest()`

建立一个用于将对象写入到文件系统的流

举个例子node

在文件夹创建一个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) 
复制代码

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命令便可

写在最后👋

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

往期精彩🌅

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

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

谈谈gulp和webpack？✔️npm

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