手牽手🧑🤝🧑學習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