gulp的初級入門配置

1.簡介

前端的自動化構(gòu)建工具，目前用的比較多的大概有webpack, grunt, gulp。

gulp，用自動化構(gòu)建工具增強(qiáng)你的工作流程；

官方介紹gulp將開發(fā)流程中讓人痛苦或耗時的任務(wù)自動化，從而減少你所浪費(fèi)的時間、創(chuàng)造更大價值。簡而言之，是一個自動化構(gòu)建工具，主要用來設(shè)定程序自動處理靜態(tài)資源的工作。他的特點(diǎn)就是簡單，高效。這篇文章呢，主要是創(chuàng)建一個簡單的gulp配置項目，來讓我們簡單地了解gulp。

2.創(chuàng)建項目文件夾目錄

首先，我們創(chuàng)建一個名為gulp-demo的文件夾來作為我們的項目文件夾，
然后使用

npm init

來初始化我們的項目，項目配置這里就不介紹了；

之后在我們的項目文件夾下分別創(chuàng)建css, js文件夾再創(chuàng)建一個index.html，大概項目文件如下圖：


image.png

3.下載gulp，并簡單的配置gulpfile.js

下載gulp可以gulp官網(wǎng)或者github查看如何下載，我們這里就直接用yarn下載，當(dāng)然，npm也是可行的。

yarn add gulp -D

下載好之后，我們在當(dāng)前項目文件夾下創(chuàng)建一個名為gulpfile.js的文件，這個文件會在執(zhí)行g(shù)ulp命令的時候被自動加載。關(guān)于gulpfile.js的詳細(xì)介紹，可查看官網(wǎng)說明，簡而言之，就是我們可以適用js相關(guān)的語法來書寫gulpfile.js。
接下來，我們簡單地書寫gulpfile.js如下：

const {
  series
} = require('gulp')
function js(){
  console.log("I am js task");
}
function css(){
  console.log("I am css task");
}
function html(){
  console.log("I am html task");
}
function clean(){
  console.log("I am clean task");
}
exports.scripts = js;
exports.clean = clean;
exports.styles = css;
exports.default = series([
  clean,
  js,
  css,
  html
])

可以看到我們分別定義了四個方法并把它們分別export，和一起作為defalut export了出去；
而我們引入的series，是個把任務(wù)串行執(zhí)行的gulp方法；
那我們在命令行輸入如下的命令，看看會發(fā)生什么效果：

npx gulp scripts
image.png

他這里雖然執(zhí)行了我們的js方法，打印了我們的輸出，但是下面兩行提示提示我們少了什么東西。原來每執(zhí)行完一個任務(wù)你得告訴gulp，你執(zhí)行完了。所以代碼修改如下：

const {
  series
} = require('gulp')
function js(cb){
  console.log("I am js task");
  cb();
}

function css(cb){
  console.log("I am css task");
  cb()
}
function html(cb){
  console.log("I am html task");
  cb()
}
function clean(cb){
  console.log("I am clean task");
  cb()
}
exports.scripts = js;
exports.clean = clean;
exports.styles = css;
exports.default = series([
  clean,
  js,
  css,
  html
])

傳入的參數(shù)cb函數(shù)就相當(dāng)于是用來告訴gulp的，再來執(zhí)行npx gulp scripts, 顯示如下：


image.png

接下來可以自行執(zhí)行下，npx gulp clean, npx gulp styles, npx gulp, 分別查看命令行的顯示結(jié)果是什么樣的。

3.修改項目文件

在css文件夾中創(chuàng)建inde.scss文件如下：

$color:red;
body {
  text-align: center;
  background: $color;
}

在js文件夾中創(chuàng)建inde.js文件如下：

console.log('測試一下嘛');
console.log('測試一下嘛');
console.log('測試一下嘛');

4.打包函數(shù)的配置

  • 通過上面的操作，我們應(yīng)該可以理解了，原來我們在gulifie.js中定義的方法，可以當(dāng)我們執(zhí)行g(shù)ulp命令時，分別執(zhí)行我們的方法，如果在方法中加上對文件的輸出，編譯，刪除等操作，就可以實(shí)現(xiàn)對項目文件的打包了

  • 我們在命令行中輸入如下命令，分別下載gulp-sass, gulp-autoprefixer, gulp-load-plugins, gulp-uglify, del 插件，至于插件的用處，我們之后再說

yarn add gulp-sass gulp-autoprefixer gulp-load-plugins gulp-uglify del -D
  • 然后我們來對js的方法進(jìn)行改寫，改寫前，我們要引入其他幾個gulp的方法，和一些插件：
const {
  src,
  dest,
  watch,
  series
} = require('gulp')
const plugins = require('gulp-load-plugins')() //注意這里的括號不能少

src是查看目標(biāo)文件的方法，dest方法是打包好的文件輸出的方法，watch是用于熱監(jiān)聽的，監(jiān)聽文件的變化（后面會用到），而我們的gulp-load-plugins就是個很神奇的插件了，具體神奇在哪里，直接看下面的代碼：

function js(cb) {
  src("js/*.js")     //查找 js文件夾下的所有.js文件
  .pipe(plugins.uglify())  //pipe調(diào)用uglify插件
  .pipe(dest('./dist/js')) //pipe調(diào)用dest方法
  cb();
}

這段代碼就是告訴gulp, 將js目錄下的所有js文件，全部丑化，輸出到dist目錄下的js目錄。而我們的gulp-load-plugins插件就可以讓我們不用引入其他的插件，直接plugins.插件名()，就可以調(diào)用插件了，是不是很方便?。?！

那么改寫完成了之后，我們執(zhí)行npx gulp scripts, 就會發(fā)現(xiàn)咱們的項目文件夾會多出來一個dist目錄，且下面有js錄，里面也有個叫index.js的，不過它長這樣：

console.log("測試一下嘛"),console.log("測試一下嘛"),console.log("測試一下嘛");

之前多余的空格就被我們的uglify插件給優(yōu)化沒了，js方法改造完成。

  • 刪除文件
    每次打包前，先把之前的刪除
const del = require('del')
function clean(cb){
  del("./dist")
  cb()
}
export.clean = clean;

在打包了js文件后，執(zhí)行下 npx gulp clean 看能否刪除dist文件夾

  • 下面來對css方法改造
function css(cb){
  src('css/*.scss')
  .pipe(plugins.sass({outputStyle: 'compressed'}))
  .pipe(plugins.autoprefixer({
    cascade: false,
    remove:false
  }))
  .pipe(dest('./dist/css'))
  cb();
}

關(guān)于上面的gulp-autoprefixer，和gulp-sass的參數(shù)的配置，這里就不一一講解了，大家可以自行去gulp的插件搜索這兩個插件，查看他們?nèi)缟吓渲玫膮?shù)的作用。配置完成后，咱們npx gulp styles。
同上發(fā)生了類似的事情，查看我們生成的dist/css目錄下的index.css，長相如下：

body{text-align:center;background:red}

已經(jīng)完成了scss到我們?yōu)g覽器能看懂的css??！

然后我們在index.html，引入這兩個文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello gulp</title>
  <link rel="stylesheet" href="./dist/css/index.css">
</head>
<body>
  <h2>hello gulp</h2>
  <script src="./dist/js/index.js"></script>
</body>
</html>

打開瀏覽器看看，其實(shí)這時候我們的簡單的打包就基本完成了。

  • 熱監(jiān)聽
    然后，咱們就會發(fā)現(xiàn)，難道我們每改一次代碼，都要執(zhí)行一遍命令行，然后再刷新看看效果么？那這樣也太麻煩了。不要著急，gulp的watch方法可以很好的解決這個問題。
    只要將我們的代碼做到監(jiān)聽到文件發(fā)生改變時，就再次打包改文件就行了
function service(cb){
  watch("css/*.scss", css)  //scss文件發(fā)生改變時，調(diào)用css方法
  watch("js/*.js", js) //js文件發(fā)生改變時，調(diào)用js方法
  cb()
}

exports.default = series([
  clean,
  js,
  css,
  html,
  service
])

watch方法就是監(jiān)聽到文件發(fā)生變化時，就會調(diào)用哪個任務(wù); 執(zhí)行下npx gulp， 執(zhí)行完成之后，就會顯示如下界面，


image.png

然后我們對css, js的文件分別作出修改

$color:blue;
body {
  text-align: center;
  background: $color;
}

console.log('測試一下嘛');
console.log('測試一下嘛');
console.log('測試一下嘛');
console.log('測試熱加載');

這個時候可以看到命令行發(fā)生如下變化：


image.png

自動進(jìn)行了打包的操作，咱們刷新一下inde.html的頁面，就可以查看到發(fā)生的變化了。

  • 瀏覽器自動刷新
    什么？我改了代碼居然要我刷新瀏覽器才能看到變化，不行！這個太麻煩了，難道就不能自動刷新瀏覽器么？？？
    答案是肯定能的啊?。?！還記得那個clean,和html嗎，一直沒被動過的方法，終于可以來對他們動手了
    這里要下載一個插件：
yarn add browser-sync -D

并且要在package.json中添加如下配置：

{
  "browserslist": [
    "> 2%",
    "last 2 versions"
]
}

引入browser-sync插件來做到自動刷新

const browserSync = require('browser-sync').create()
const reload = browserSync.reload;

reload方法就是重新刷新瀏覽器， del插件就是用來刪除文件的,改寫html,clean

function html(cb){
  src("*.html")
  .pipe(reload({stream:true})) //刷新一下
  cb()
}

然后我們要做到，文件改變時，瀏覽器自動刷新，肯定是監(jiān)聽到文件發(fā)生變化了，我們就要刷新瀏覽器，上一步我們已經(jīng)做了，監(jiān)聽到文件發(fā)生變化執(zhí)行執(zhí)行方法，那我們在方法中添加刷新瀏覽器不就行了么
所以所有修改如下：

const {
  src,
  dest,
  watch,
  series
} = require('gulp')
const plugins = require('gulp-load-plugins')()
const del = require('del')
const browserSync = require('browser-sync').create()
const reload = browserSync.reload;

function js(cb) {
  src("js/*.js")
  .pipe(plugins.uglify())
  .pipe(dest('./dist/js'))
  .pipe(reload({stream:true}))  // 添加刷新瀏覽器操作
  cb();
}

function clean(cb){
  del("./dist")
  cb()
}

function css(cb){
  src('css/*.scss')
  .pipe(plugins.sass({outputStyle: 'compressed'}))
  .pipe(plugins.autoprefixer({
    cascade: false,
    remove:false
  }))
  .pipe(dest('./dist/css'))
  .pipe(reload({stream:true}))
  cb();
}

function service(cb){
  browserSync.init({
    server:{
      baseDir: './'
    }
  })
  watch("css/*.scss", css)
  watch("js/*.js", js)
  watch("*.html", html)
  cb()
}

function html(cb){
  src("*.html")
  .pipe(reload({stream:true}))
  cb()
}
exports.scripts = js;
exports.clean = clean;
exports.styles = css;
exports.default = series([
  clean,
  js,
  css,
  html,
  service
])

這個時候我們執(zhí)行，npx gulp, 就能實(shí)現(xiàn)文件變化，瀏覽器實(shí)時刷新了，結(jié)果就不展示了！謝謝觀看?。?！
對了還差一步, 配置package.json

  "scripts": {
    "build": "gulp"
  },

然后，之后就可以npm run build, 打包了。是不是更有內(nèi)味了，溜了溜了！再次感謝觀看！

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容