【前端工具】gulp構(gòu)建工具的基本使用

gulp

gulp是什么聂喇？

gulp是前端開發(fā)中經(jīng)常使用的自動化構(gòu)建工具辖源。自動化構(gòu)建又是什么？
簡單來說希太，一個完整的項目需要經(jīng)歷兩個過程：開發(fā)階段development和項目上線階段production克饶。在程序中又常稱作開發(fā)環(huán)境和生產(chǎn)環(huán)境，其實并沒有多少含義誊辉，只是為了理清業(yè)務(wù)邏輯而已矾湃，了解就好。
在開發(fā)環(huán)境我們的項目代碼需要把less轉(zhuǎn)成css(因為less不能直接被瀏覽器解析)堕澄，需要給css3中的屬性添加前綴邀跃，需要開啟服務(wù)器自動監(jiān)聽文件的變化(改了一個寬度顏色啊，改了一個函數(shù)方法啊等等)蛙紫，然后自動刷新頁面(減少手動操作拍屑，提高開發(fā)效率)。等等一些需要在開發(fā)階段解決的問題
在生產(chǎn)環(huán)境我們的項目代碼也要進行許多處理坑傅，比如代碼的壓縮僵驰、圖片壓縮、去除調(diào)試語句唁毒、提取公共代碼等等蒜茴。
所以，自動化構(gòu)建簡單來說就是進行上面的操作的枉证，而自動化構(gòu)建工具就集成了這一大堆的操作矮男，大大提高了開發(fā)效率。

那我們一起來用gulp構(gòu)建一個簡單的項目吧

項目源碼地址：https://github.com/HiJackLi/gulp-gulpfile.js 覺得不錯給個小心心
gulp中文網(wǎng)：https://www.gulpjs.com.cn/
gulp官網(wǎng)：https://gulpjs.com/

提前操作：創(chuàng)建項目基本結(jié)構(gòu)

基本目錄結(jié)構(gòu)

第一步：安裝gulp

npm install gulp -g 安裝全局gulp
以下都以gulp@3.9.1版本為例室谚，4.x版本請參考其他文檔毡鉴。如果不小心下載了4版本崔泵，可以使用npm install gulp@3.9.1 -g操作來覆蓋之前的版本
npm init -y 初始化項目
npm install gulp -D 安裝局部gulp依賴

第二步：在項目根目錄下創(chuàng)建一個名為gulpfile.js文件

gulpfile.js類似webpack中的配置文件，就是配置你到底要做哪些操作猪瞬。
在gulpfile.js文件中寫入如下基礎(chǔ)代碼憎瘸，基本含義是：加載gulp模塊工具，然后創(chuàng)建默認任務(wù)陈瘦，default是固定寫法不能改變幌甘。后面的函數(shù)就是要執(zhí)行的操作。而task方法就是創(chuàng)建任務(wù)的gulp方法痊项。

  //gulpfile.js
  
  var gulp = require('gulp');
  
  gulp.task('default', function() {
      //將你的默認的任務(wù)操作代碼放在這里
  })

還可以這樣寫用來把任務(wù)操作抽出

  //gulpfile.js
  
  var gulp = require('gulp');
  
  gulp.task("html", function () {}) //創(chuàng)建html操作任務(wù)锅风。"html"只是名稱，可以任意取
  gulp.task("css", function () {})  //創(chuàng)建css操作任務(wù)
  gulp.task("js", function () {})   //創(chuàng)建js操作任務(wù)
  
  //創(chuàng)建默認執(zhí)行任務(wù)鞍泉，執(zhí)行內(nèi)容是 html操作任務(wù)皱埠、css操作任務(wù)、js操作任務(wù)
  gulp.task('default', ["html","css","js"])

第三步：運行g(shù)ulp

命令行執(zhí)行

    $ gulp

默認的名為"default"的任務(wù)將會被運行咖驮。

第四步：創(chuàng)建幾個基本任務(wù)

創(chuàng)建"default"默認任務(wù)并把任務(wù)操作分發(fā)給其他任務(wù)
創(chuàng)建"html"任務(wù)用于對html文件的操作
創(chuàng)建"css"任務(wù)用于對css文件的操作
創(chuàng)建"js"任務(wù)用于對js文件的操作
創(chuàng)建"image"任務(wù)用于對圖片的操作

//gulpfile.js

    //加載gulp模塊
    var gulp = require('gulp');

    // 創(chuàng)建html任務(wù)
    gulp.task("html", function () {
    
    })
    // 創(chuàng)建css任務(wù)
    gulp.task("css", function () {
    
    })
    // 創(chuàng)建js任務(wù)
    gulp.task("js", function () {
        
    })
    // 創(chuàng)建image任務(wù)
    gulp.task("image", function () {
        
    })

    //創(chuàng)建默認任務(wù)边器，默認任務(wù)正好是創(chuàng)建的html任務(wù)，運行g(shù)ulp會自動執(zhí)行默認任務(wù)
    gulp.task("default", ["html", "css", "js", "image"]);

第五步：給各個任務(wù)添加具體操作：獲取文件-->輸出文件

gulp.src方法含義：簡單來說就是獲取文件托修，要對哪一個文件進行操作忘巧。
gulp.pipe方法含義：gulp操作是基于流的操作，我們把整個操作過程都當作一條水管睦刃，pipe方法類似于把每一步操作放到水管中砚嘴。
gulp.dest方法含義：簡單來說就是文件操作完了輸出到哪里。
一般我們會創(chuàng)建兩個目錄眯勾，一個是開發(fā)環(huán)境目錄./src 一個是生產(chǎn)環(huán)境目錄./dist枣宫。如果沒有創(chuàng)建生產(chǎn)環(huán)境目錄，gulp操作完成之后會自動創(chuàng)建目錄吃环，并且dist目錄下輸出的文集及目錄也會按照輸出的地址自動創(chuàng)建也颤。

    //路徑管理 以便后續(xù)文件路徑更改操作
    var folder = {
        src: "src/",
        dist: "dist/"   //生產(chǎn)環(huán)境的目錄，如果沒有創(chuàng)建gulp操作會自動創(chuàng)建dist文件目錄
    }
    // 創(chuàng)建html任務(wù)
    gulp.task("html", function () {
        gulp.src(folder.src + "html/*")             //獲取html文件
            .pipe(gulp.dest(folder.dist + "html/")) //輸出文件 
    })
    // 創(chuàng)建css任務(wù)
    gulp.task("css", function () {
        gulp.src(folder.src + "css/*")              //獲取less文件
            .pipe(gulp.dest(folder.dist + "css/"))  //輸出文件
    })
    // 創(chuàng)建js任務(wù)
    gulp.task("js", function () {
       gulp.src(folder.src + "js/*")                //獲取js文件 
            pipe(gulp.dest(folder.dist + "js/"))    //輸出文件
    })
    // 創(chuàng)建image任務(wù)
    gulp.task("image", function () {
        gulp.src(folder.src + "image/*")             //獲取圖片
            .pipe(gulp.dest(folder.dist + "image/")) //輸出文件
    })

第六步：給各個任務(wù)添加具體操作：壓縮文件郁轻，轉(zhuǎn)換less翅娶，添加css前綴，去除js調(diào)試語句

這一步驟需要gulp的插件支持好唯，如何使用插件進行操作竭沫？
插件使用的基本過程：下載插件 --> 取到插件 --> 應(yīng)用插件
下載插件

    $ npm install gulp-htmlclean    
    $ npm install gulp-imagemin
    $ npm install gulp-uglify
    $ npm install gulp-strip-debug
    $ npm install gulp-less
    $ npm install gulp-postcss autoprefixer
    $ npm install gulp-strip-debug

獲取插件

// 添加如下代碼
// 壓縮html
// 下載插件 gulp-htmlclean
var htmlClean = require('gulp-htmlclean');   //取到插件

// 壓縮圖片
// 下載插件 gulp-imagemin
var imageMin = require('gulp-imagemin');

// 壓縮js
// 下載插件 gulp-uglify
var uglify = require('gulp-uglify');

// 去掉js中的調(diào)試語句
// 下載插件 gulp-strip-debug
var debug = require('gulp-strip-debug');

// 壓縮css 
// 下載插件 gulp-clean-css
var cleanCss = require('gulp-clean-css')

// 給css添加前綴
// 下載插件 gulp-postcss  autoprefixer
var postcss = require('gulp-postcss')
var autoprefixer = require('autoprefixer')

// less轉(zhuǎn)css
// 下載插件 gulp-less
var less = require('gulp-less');

應(yīng)用插件

    //更新之前的代碼
    // 創(chuàng)建html任務(wù)
    gulp.task("html", function () {
        gulp.src(folder.src + "html/*")             //獲取html文件
            .pipe(htmlClean())                      //壓縮文件
            .pipe(gulp.dest(folder.dist + "html/")) //輸出文件
    })
    // 創(chuàng)建css任務(wù)
    gulp.task("css", function () {
       gulp.src(folder.src + "css/*")               //獲取less文件
            .pipe(less())                           //less轉(zhuǎn)css
            .pipe(postcss([autoprefixer()]));       //添加前綴
            .pipe(cleanCss())                       //壓縮css
            .pipe(gulp.dest(folder.dist + "css/"))  //輸出文件
    })
    // 創(chuàng)建js任務(wù)
    gulp.task("js", function () {
        gulp.src(folder.src + "js/*")               //獲取js文件 
            .pipe(debug())                          //清除調(diào)試語句
            .pipe(uglify())                         //壓縮js文件
            .pipe(gulp.dest(folder.dist + "js/"))   //輸出文件
    })
    // 創(chuàng)建image任務(wù)
    gulp.task("image", function () {
        gulp.src(folder.src + "image/*")            //獲取圖片
            .pipe(imageMin())                       //執(zhí)行壓縮插件
            .pipe(gulp.dest(folder.dist + "image/"))//輸出文件
    })

這樣基本上該有的能力都有了，但還剩一個問題沒解決

第七步：開啟服務(wù)器代理和自動監(jiān)聽文件變化并刷新頁面

理清思路：gulp上開啟服務(wù)器需要依賴插件骑篙，那么我們下載插件并獲取到

    $ npm install gulp-connect

    // 開啟服務(wù)器
    // 下載插件 gulp-connect
    var connect = require('gulp-connect')

如何開啟蜕提？需要創(chuàng)建開啟服務(wù)器的任務(wù)"server"

    //開啟服務(wù)器任務(wù)
    gulp.task('server', function () {
        connect.server({
            port: "8888",           // 設(shè)置端口號，不設(shè)置默認8080
            livereload: true        //開啟刷新,什么時候刷新呢靶端？需要在各個任務(wù)函數(shù)中設(shè)置
        });
    })
    gulp.task("default", ["html", "css", "js", "image", "server"]); //默認任務(wù)中也要添加服務(wù)器任務(wù)

開啟了服務(wù)器運行$ gulp就可以在http://localhost:8888/中查看我們的頁面了谎势。
接下來是監(jiān)聽文件變化凛膏，同樣的也需要創(chuàng)建監(jiān)聽任務(wù)

    // 創(chuàng)建監(jiān)聽任務(wù)
    gulp.task('watch', function () {
        gulp.watch(folder.src + 'html/*', ['html'])  //監(jiān)聽html文件，一旦文件變化就執(zhí)行html任務(wù)
        gulp.watch(folder.src + 'css/*', ['css'])    //監(jiān)聽css文件
        gulp.watch(folder.src + 'js/*', ['js'])      //監(jiān)聽js文件
    })
    gulp.task("default", ["html", "css", "js", "image", "server", "watch"]); //默認任務(wù)中也要添加監(jiān)聽任務(wù)

接下來是自動刷新脏榆，上面設(shè)置了自動刷新livereload: true,但是需要明確幾點
1. 開啟監(jiān)聽任務(wù)并不能自動刷新頁面猖毫，因為監(jiān)聽任務(wù)只監(jiān)聽變化，并不會幫助自動刷新頁面须喂。
2. 自動刷新功能是開啟了吁断，但是什么時候自動刷新呢？當然是在代碼內(nèi)容發(fā)生更改的時候自動刷新頁面
3. 所以我們在各個任務(wù)操作函數(shù)中進行添加自動刷新操作gulp.pipe(connect.reload())
4. 拿html任務(wù)舉例坞生，其余任務(wù)類似

    //更新之前的代碼
    gulp.task("html", function () {
        gulp.src(folder.src + "html/*") 
            .pipe(connect.reload());             //每次文件改變刷新頁面
            .pipe(htmlClean())                   //壓縮文件
            .pipe(gulp.dest(folder.dist + "html/"))  
    })

第八步：針對不同環(huán)境進行操作

由于上面操作集合了開發(fā)環(huán)境和生產(chǎn)環(huán)境仔役，不利于開發(fā)，下面將兩者操作分開
其實就是讓開發(fā)階段做開發(fā)的事恨胚，項目上線階段做上線的事(壓縮代碼等操作)
需要明確幾點：
如何設(shè)置當前的操作環(huán)境骂因，比如我就想設(shè)置一下當前是在開發(fā)環(huán)境下，可以在命令行中執(zhí)行:

   $ export NODE_ENV=development    # 同樣的,生產(chǎn)環(huán)境是production

那么如何判斷當前處在什么環(huán)境呢赃泡？從而執(zhí)行$ gulp進行不同環(huán)境下的任務(wù)操作
有如下方法進行判斷

    var devMode = process.env.NODE_ENV == "development"; //判斷環(huán)境變量

所以就可以在各個任務(wù)函數(shù)中判斷當前所處環(huán)境，再進行不同操作乘盼，如下升熊，以html任務(wù)為例，其他任務(wù)同理

    //更新之前的代碼
    gulp.task("html", function () {
        var page = gulp.src(folder.src + "html/*")  
                        .pipe(connect.reload());     //每次文件改變刷新頁面
        if (!devMode) {                              //如果是生產(chǎn)環(huán)境
            page.pipe(htmlClean())                   //壓縮文件
        }
        page.pipe(gulp.dest(folder.dist + "html/"))  
    })

這樣整個項目利用gulp的簡單構(gòu)建就完成了绸栅。如果有錯誤歡迎指出级野，共同學習。以上都是本人手敲的粹胯，如果覺得不錯不妨點個小心心