做一個合格的前端，gulp自動化構(gòu)建工具入門教程

yunhao 發(fā)布于2019-08-22 13:53 / 2303人閱讀

摘要：我的新作觀點網(wǎng)觀點網(wǎng)是一個獵獲新奇收獲知識重在獨立思考的網(wǎng)站，它前端的壓縮合并命名等就使用了自動化構(gòu)建技術(shù)，很小巧使用起來很舒服。一什么是是一個自動化構(gòu)建工具開發(fā)者可以使用它在項目開發(fā)過程中自動執(zhí)行常見任務(wù)。故而在當前文件夾新建文件備用。

我的新作觀點網(wǎng)http://www.guandn.com (觀點網(wǎng)是一個獵獲新奇、收獲知識、重在獨立思考的網(wǎng)站)，它前端js、css的壓縮、合并、md5命名等就使用了gulp自動化構(gòu)建技術(shù)，gulp很小巧使用起來很舒服。
ps：接下來我會逐一開源觀點網(wǎng)開發(fā)過程中的前后端技術(shù)，如：lucene全文索引、自定義富文本編輯器、圖片上傳壓縮水印等等。

一、什么是gulp

gulp是一個自動化構(gòu)建工具,開發(fā)者可以使用它在項目開發(fā)過程中自動執(zhí)行常見任務(wù)。例如：css、js的合并與壓縮（減少http請求，縮小文件大?。?、html壓縮、md5名生成與替換（一般解決瀏覽器緩存）、線上配置文件自動替換、搭建本地web服務(wù)器做到實時刷新等。

二、環(huán)境搭建

gulp是基于Node.js的插件工具

搭建Node.js環(huán)境：https://nodejs.org/en/download/ 下載相應(yīng)系統(tǒng)的node安裝包。進入終端：鍵入：node -v如果出現(xiàn)node版本號，則node.js安裝成功。

安裝gulp：

（1）、安裝全局gulp：終端鍵入：npm install gulp -g 等待完成；
（2）、cd進入到項目根目錄 -->:終端鍵入：npm init 【生成node.js插件管理json文件：package.json】：如圖：

【注：如圖紅色箭頭、一路enter即可（每一項的意義都很明確，無需解釋！我只是提一下license選項，這一項是開源協(xié)議：通常的開源協(xié)議有：GPL、Apache License、 BSD、ISC.. 等等，有興趣的可以參考：開源協(xié)議

（3）、鍵入：npm install gulp --save-dev 安裝gulp到當前目錄，等待安裝完成。鍵入gulp-v 出現(xiàn)全局版本，和當前版本，安裝完成。如圖：

鍵入:gulp，出現(xiàn)：“No gulpfile fount”，說明前三步執(zhí)行成功。

(4)、從上面提示可以看出，運行g(shù)ulp需要gulpfile文件。故而：在當前文件夾新建文件：gulpfile.js備用。

三、gulpfile.js文件編寫（重點）

在gulpfile.js中寫入：

var gulp = require("gulp"); //申明gulp變量
gulp.task("start",function(){
    console.log("痞子貓**************");
});

終端鍵入：gulp start 執(zhí)行g(shù)ulp中的start任務(wù)，出現(xiàn)打印，說明gulpfile.js編寫沒什么問題！如圖：

下面開始進入正題，
壓縮、合并等這些操作可以依靠gulp插件完成：插件安裝命令：npm install [module] --save-dev ;

如：npm install gulp-concat --save-dev 這是安裝合并插件。使用如下：

var gulp = require("gulp"); //申明gulp變量
var concat = require("gulp-concat"); // require：加載插件，參數(shù)為：插件名

//合并任務(wù)
gulp.task("concat",function(){ //concat為任務(wù)名，運行g(shù)ulp concat執(zhí)行此任務(wù)。
    return gulp.src("./js/*.js")  //需要合并的js目錄，支持正則
            .pipe(concat("all.js")) //concat(),合并操作，參數(shù)：合并后的名字
            .pipe(gulp.dest("./js/")) //合并后放入的目錄
});

終端鍵入：gulp concat 執(zhí)行此任務(wù)。

這就是一個簡單的合并任務(wù)，前面提到了node是基于流，也就是管道操作的。gulp.src（）管道的入口，pipe()獲得處理管道中的數(shù)據(jù)，pipe(gulp.dest())處理后數(shù)據(jù)的出口。說別了就是一個流水線操作。

所有的gulp插件運用也就是這個套路了：常用插件集合：
1.gulp-sass(sass編譯)
2.gulp-compass(sass編譯)
3.gulp-autoprefixer(添加CSS3前綴)
4.gulp-clean-css(壓縮CSS)
5.gulp-include（文件包含）
6.gulp-concat(文件合并)
7.del(文件刪除)
8.gulp-uglify(壓縮js)
9.gulp.spritesmith(合成雪碧圖)
10.run-sequence(隊列執(zhí)行)
11.browser-sync(瀏覽器同步刷新)
12.gulp-babel(js編譯)
13.gulp-imagemin(圖片壓縮)
gulp-imageisux(騰訊智圖壓縮，慎用)
imagemin-jpegtran(jpg圖片壓縮)
imagemin-pngquant(png圖片壓縮)
gulp-image-resize(圖片大小調(diào)整)
14.gulp-rename(重命名)
15.gulp-live-server(輕量服務(wù)器)
16.gulp-livereload
17.gulp-util(工具集)
18.require-dir(引入整個文件夾文件)
19.connect-livereload(熱更新同步)
20.gulp-if(是否運行插件)
21.gulp-plumber
22.gulp-eslint(eslint代碼檢查)
23.gulp-htmlmin(html壓縮)
24.gulp-clean(刪除文件/文件夾)
25.gulp-less
26.gulp-load-plugins(加載gulp插件)

再次強調(diào)安裝插件命令：npm install [module] --save-dev

至于運用我覺得沒啥可說的：就拿常見的舉個例子吧：

del：描述：刪除：

var del = require("del");
del("./dist");                      // 刪除整個dist文件夾

gulp-rename：描述：重命名文件。

var rename = require("gulp-rename");  
  
gulp.src("./hello.txt")  
  .pipe(rename("gb/goodbye.md"))    // 直接修改文件名和路徑  
  .pipe(gulp.dest("./dist"));   
   
gulp.src("./hello.txt")  
  .pipe(rename({  
    dirname: "text",                // 路徑名  
    basename: "goodbye",            // 主文件名  
    prefix: "pre-",                 // 前綴  
    suffix: "-min",                 // 后綴  
    extname: ".html"                // 擴展名  
  }))  
  .pipe(gulp.dest("./dist"));

gulp-filter：描述：在虛擬文件流中過濾文件。

var filter = require("gulp-filter");  
  
const f = filter(["**", "!*/index.js"]);  
gulp.src("js/**/*.js")  
    .pipe(f)                        // 過濾掉index.js這個文件  
    .pipe(gulp.dest("dist"));  
  
const f1 = filter(["**", "!*/index.js"], {restore: true});  
gulp.src("js/**/*.js")  
    .pipe(f1)                       // 過濾掉index.js這個文件  
    .pipe(uglify())                 // 對其他文件進行壓縮  
    .pipe(f1.restore)               // 返回到未過濾執(zhí)行的所有文件  
    .pipe(gulp.dest("dist"));       // 再對所有文件操作，包括index.js

gulp-uglify：描述：壓縮js文件大小。

var uglify = require("gulp-uglify");  
  
gulp.src("./hello.js")  
    .pipe(uglify())                 // 直接壓縮hello.js  
    .pipe(gulp.dest("./dist"))  
      
 gulp.src("./hello.js")  
    .pipe(uglify({  
        mangle: true,               // 是否修改變量名，默認為 true  
        compress: true,             // 是否完全壓縮，默認為 true  
        preserveComments: "all"     // 保留所有注釋  
    }))  
    .pipe(gulp.dest("./dist"))

gulp-csso：描述：壓縮優(yōu)化css。

var csso = require("gulp-csso");  
  
gulp.src("./css/*.css")  
    .pipe(csso())  
    .pipe(gulp.dest("./dist/css"))

gulp-html-minify：描述：壓縮HTML。

var htmlminify = require("gulp-html-minify");  
  
gulp.src("index.html")  
    .pipe(htmlminify())  
    .pipe(gulp.dest("./dist"))

gulp-imagemin：描述：壓縮圖片。

var imagemin = require("gulp-imagemin");  
  
gulp.src("./img/*.{jpg,png,gif,ico}")  
    .pipe(imagemin())  
    .pipe(gulp.dest("./dist/img"))

gulp-autoprefixer：描述：自動為css添加瀏覽器前綴。

var autoprefixer = require("gulp-autoprefixer");  
  
gulp.src("./css/*.css")  
    .pipe(autoprefixer())           // 直接添加前綴  
    .pipe(gulp.dest("dist"))  
  
gulp.src("./css/*.css")  
    .pipe(autoprefixer({  
        browsers: ["last 2 versions"],      // 瀏覽器版本  
        cascade：true                       // 美化屬性，默認true  
        add: true                           // 是否添加前綴，默認true  
        remove: true                        // 刪除過時前綴，默認true  
        flexbox: true                       // 為flexbox屬性添加前綴，默認true  
    }))  
    .pipe(gulp.dest("./dist"))

其實在列舉沒啥意思，都是一個套路，想了解那個插件的參數(shù)、使用方法等，直接上https://www.npmjs.com/ 上面查詢吧！

注意事項：
src入口匹配說明：

app.js 精確匹配

*.js 能匹配js后綴的文件

*/.js 能匹配多級目錄下的js文件（也包含當前目錄下）

!js/app.js 精確排除

return說明
不加return返回，默認異步執(zhí)行；加上return意思很明確，就是等待流處理結(jié)束~可做同步處理任務(wù)條件

默認任務(wù)說明
只要任務(wù)名字為default，當運行g(shù)ulp時是可省略任務(wù)名執(zhí)行，直接鍵入：gulp

任務(wù)依賴說明

gulp.task("task1",function(){
    //
});
gulp.task("task2",["task1"],function(){
    //
});

如上代碼：task2依賴于task1，也就是說等待task1任務(wù)結(jié)束后再執(zhí)行

同步執(zhí)行說明
gulp默認全部任務(wù)為異步執(zhí)行，其實在實際場景很多需要同步操作：如:拷貝-壓縮操作，必須拷貝完成才能壓縮。
故而推薦一種簡單的方法處理同步問題：使用插件：gulp-sequence

var gulp = require("gulp"); //申明gulp變量
var gulpSequence = require("gulp-sequence"); //同步執(zhí)行模塊
gulp.task("task1",function(){
    return xxx //具體任務(wù)
});
gulp.task("task2",function(){
     return xxx  //具體任務(wù)
});
gulp.task("task3",function(){
     return xxx  //具體任務(wù)
});
//這樣可保證，task1-》task2-》task3的執(zhí)行順序，任務(wù)必須return，已解釋原因
gulp.task("default",function(callback){gulpSequence("task1",
            "task2",
            "task3",
            callback);
});

啥？你不想看這么多！那也簡單~
1、安裝node
2、執(zhí)行 npm install gulp -g
3、復(fù)制下面代碼到：package.json（新建）

{
  "name": "guandn",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "directories": {
    "lib": "lib"
  },
  "dependencies": {
    "gulp": "^3.9.1"
  },
  "devDependencies": {
    "del": "^3.0.0",
    "gulp-concat": "^2.6.1",
    "gulp-html-minify": "0.0.14",
    "gulp-htmlmin": "^4.0.0",
    "gulp-minify-css": "^1.2.4",
    "gulp-rename": "^1.2.2",
    "gulp-rev": "^8.1.1",
    "gulp-rev-collector": "^1.2.4",
    "gulp-sequence": "^1.0.0",
    "gulp-smushit": "^1.2.0",
    "gulp-uglify": "^3.0.0",
    "gulp-useref": "^3.1.4",
    "merge-stream": "^1.0.1"
  },
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://gitee.com/quzhuanpanDesigner/guandn.git"
  },
  "author": "broom",
  "license": "ISC"
}

4、執(zhí)行：npm install 【根據(jù)package.json安裝插件】
5、復(fù)制下面代碼到：gulpfile.js（新建）

var gulp = require("gulp"); //申明gulp變量

var del = require("del"); //刪除模塊
var fs = require("fs");  //文件操作模塊
var concat = require("gulp-concat"); // 拼接工具

var uglify = require("gulp-uglify"); // 壓縮js工具
var minifyCss = require("gulp-minify-css"); // 壓縮css工具
var miniHtml = require("gulp-html-minify"); //壓縮html/jsp

var smushit = require("gulp-smushit"); //無損壓縮jpg、png圖片

var rev = require("gulp-rev");       // 加md5后綴的工具
var revCollector = require("gulp-rev-collector"); //與rev共同使用

var useref = require("gulp-useref"); // 替換文件中的鏈接的工具,一般與gulp-rev共同使用
var gulpSequence = require("gulp-sequence"); //同步執(zhí)行模塊
var mergeStream = require("merge-stream");  //合并多個stream

//資源配置
var config={
    dist:"./dist/guandn/",   //目標目錄
    target:"./target/guandn/",  //資源
}

//MD5地圖json地址
var revJsonConfig = {
    js:"./rev/rev-manifest-js.json",
    css:"./rev/rev-manifest-css.json",
    base:"./rev/"
}

//js壓縮參數(shù)
var uglifyConfig = {
        mangle: false,//類型：Boolean 默認：true 是否修改變量名
        compress: true,//類型：Boolean 默認：true 是否完全壓縮
    }

var    Util = {
        fetchScripts: function (readFile, basePath) { //文件操作工具，取得需要合并的js
            var sources = fs.readFileSync(readFile);
            sources = /[([^]]+.js"[^]]+)]/.exec(sources);
            sources = sources[1].replace(///.*
/g, "
").replace(/"|"|
|	|s/g, "");
            sources = sources.split(",");
            console.log("搜索js合并地址：讀取文件： "+readFile);
            sources.forEach(function (filepath, index) {
                sources[ index ] = basePath + filepath;
                console.log("地址：" + basePath + filepath);
            });

            return sources;
        },
        fetchStyles: function (readFile, basePath) {  //文件操作工具，取得需要合并的css
            var sources = fs.readFileSync(readFile),
                filepath = null,
                pattern = /@imports+([^;]+)*;/g,
                src = [];
            console.log("搜索css合并地址：讀取文件： "+readFile);
            while (filepath = pattern.exec(sources)) {
                src.push(basePath + filepath[ 1 ].replace(/"|"/g, ""));
                console.log("地址：" + basePath + filepath[ 1 ].replace(/"|"/g, ""));
            }
            return src;
        }
    };


gulp.task("copy",function(){
    console.log("拷貝代碼到dist************************")
    return gulp.src(config.target+"/**/*").
                pipe(gulp.dest(config.dist));
});
gulp.task("del",function(){
    console.log("刪除dist、rev目錄************************")
    return del([config.dist,revJsonConfig.base]);
});

//合并任務(wù)
gulp.task("combine",function(){
    
    console.log("合并任務(wù)開始************************")
    var commonJs = Util.fetchScripts(config.dist+"media/common.app.js", config.dist+"media/");
    var commJsStream =  gulp.src(commonJs)
        .pipe(concat("common.app.js"))
        .pipe(uglify()) //壓縮
        .pipe(rev())    //加名字MD5
        .pipe(gulp.dest(config.dist+"media/")) //保存
        .pipe(rev.manifest({ //生成MD5地圖
            path: revJsonConfig.js,
            merge: true
        })) 
        .pipe(gulp.dest("./"));
    
    var commonCss = Util.fetchStyles(config.dist + "media/common.app.css", config.dist + "media/");
    var commCssStream = gulp.src(commonCss)
        .pipe(concat("common.app.css"))
        .pipe(minifyCss())
        .pipe(rev())
        .pipe(gulp.dest(config.dist+"media/"))
        .pipe(rev.manifest({
            path: revJsonConfig.css,
            merge: true
        })) 
        .pipe(gulp.dest("./"));
    
    var pluginsJs = Util.fetchScripts(config.dist+"media/plugins/plugin.common.app.js", config.dist+"media/plugins/");
    var pluginJsStream = gulp.src(pluginsJs)
        .pipe(concat("plugin.common.app.js"))
        .pipe(uglify())
        //.pipe($.rev())
        .pipe(gulp.dest(config.dist+"media/plugins/"))
        //.pipe($.rev.manifest({
        //    path: revJsonConfig.js,
        //    merge: true
        //})) 
        //.pipe(gulp.dest("./"));
    
    var pluginCss = Util.fetchStyles(config.dist + "media/plugins/plugin.common.app.css", config.dist+"media/plugins/");
    var pluginCssStream = gulp.src(pluginCss)
        .pipe(concat("plugin.common.app.css"))
        .pipe(minifyCss())
        //.pipe($.rev())
        .pipe(gulp.dest(config.dist+"media/plugins/"))
        //.pipe($.rev.manifest({
        //    path: revJsonConfig.css,
        //    merge: true
        //})) 
        //.pipe(gulp.dest("./"));
    
    //合并編輯器
    var guandnEditor = Util.fetchScripts(config.dist+"media/plugins/guandnEditor/editor.commbine.min.js", config.dist+"media/plugins/");
    var editor = gulp.src(guandnEditor)
        .pipe(concat("editor.commbine.min.js"))
        .pipe(uglify())
        .pipe(rev())
        .pipe(gulp.dest(config.dist+"media/plugins/guandnEditor/"))
        .pipe(rev.manifest({
            path: revJsonConfig.js,
            merge: true
        })) 
        .pipe(gulp.dest("./"));
        
        
    //合并上傳插件
    var guanzhi = Util.fetchScripts(config.dist+"media/plugins/jQuery-File-Upload-master/js/jquery.fileuplaod.all.min.js", config.dist+"media/plugins/")
    var guanzhiFileUulpad = gulp.src(guanzhi)
            .pipe(concat("jquery.fileuplaod.all.min.js"))
            .pipe(uglify(uglifyConfig))
            .pipe(gulp.dest(config.dist+"media/plugins/jQuery-File-Upload-master/js/"))
    return mergeStream(commJsStream,commCssStream,pluginJsStream,pluginCssStream,editor,guanzhiFileUulpad);
});


//壓縮js，css
gulp.task("compress",function(callback){
    console.log("壓縮任務(wù)開始***************************")
    var compressCss = gulp.src([config.dist+"media/**/*.css","!**/*.min.css","!**/plugins/**/*"])
        .pipe(minifyCss())
        .pipe(gulp.dest(config.dist+"media/"));    
    var compressJs = gulp.src([config.dist+"media/**/*.js","!**/*.min.js","!**/plugins/**/*"])
        .pipe(uglify(uglifyConfig))
        .pipe(gulp.dest(config.dist+"media/"));
    
    return mergeStream(compressCss, compressJs);
});

//靜態(tài)文件替換
gulp.task("replaceJC", function(){
    console.log("替換靜態(tài)文件**************************");
    var revJson = revJsonConfig.base+"**/*.json";
    var commonCss = gulp.src([revJson, config.dist+"media/css/common/*.jsp"])  
        .pipe(revCollector({  
            replaceReved: true 
        }))
        .pipe(gulp.dest(config.dist+"media/css/common/"));
        
    var commonJs = gulp.src([revJson, config.dist+"media/js/common/*.jsp"])  
        .pipe(revCollector({  
            replaceReved: true 
        }))
        .pipe(gulp.dest(config.dist+"media/js/common/"));
    
    var editor = gulp.src([revJson, config.dist+"WEB-INF/pages/**/*.jsp"])  
    .pipe(revCollector({  
        replaceReved: true 
    }))
    .pipe(gulp.dest(config.dist+"WEB-INF/pages/")); 
            
    return mergeStream(commonCss, commonJs);
});

//可異步執(zhí)行操作【最后操作】
gulp.task("asyn", function(){
    console.log("壓縮jsp、拷貝配置**********************************")
//    gulp.src(config.dist+"WEB-INF/pages/**/*.jsp")
//        .pipe(miniHtml({
//            empty: true  //刪除空格
//        }))
//        .pipe(gulp.dest(config.dist + "WEB-INF/pages/"));
    
    //圖片壓縮（費時操作）
//    gulp.src(config.dist+"media/img/**/*")
//        .pipe(smushit({
//            verbose: true
//        }))
//        .pipe(gulp.dest(config.dist+"media/img/"));
});

gulp.task("finishedDel",function(){
    return del([revJsonConfig.base]);
});

gulp.task("default",function(callback){
    gulpSequence("del",
            "copy",
            "combine",
            "compress",
            "replaceJC",
            "finishedDel",
            "asyn",
            callback);
});

6、修改gulpfile中的路徑，文件等.

至此gulp的基本使用已經(jīng)沒啥問題了！
PS:gulp學(xué)習(xí)資料，gulp插件大集合：https://segmentfault.com/a/11...

云服務(wù)器 GPU云服務(wù)器自動化構(gòu)建工具自動化構(gòu)建鏡像工具一個合格自動化構(gòu)建

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/92583.html

發(fā)表評論

登陸后可評論

0條評論

yunhao

男|高級講師

我要關(guān)注我要私信

TA的文章

IOFLOOD：$999/月/2*E5-2680v4/128GB內(nèi)存/216TB硬盤/不限流量/10

閱讀 2833·2021-10-13 09:48
I2S總線

閱讀 3805·2021-10-13 09:39
虛擬主機有什么作用-虛擬主機有什么用？

閱讀 3607·2021-09-22 16:04
HaloCloud：日本軟銀vps,512MB內(nèi)存/20GB空間/500GB流量/100Mbps端口

閱讀 1841·2021-09-03 10:48
MOACK：韓國服務(wù)器/雙E5-2450L/8GB內(nèi)存/1T硬盤/10M不限流量/$59.00/月

閱讀 850·2021-08-03 14:04
四個最詭異的 CSS 特性

閱讀 2372·2019-08-29 15:18
mpvue的自定義組件中運行$emit函數(shù)時輸入框光標抖動的解決辦法

閱讀 3413·2019-08-26 12:19
用bootstrap file input 上傳圖片

閱讀 2880·2019-08-26 12:08

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

做一個合格的前端，gulp自動化構(gòu)建工具入門教程

相關(guān)文章

**做一個合格的前端，gulp資源大集合**

黑馬前端v7（含Vue3.0小兔鮮兒電商項目）完整代碼下載

**前端構(gòu)建的初步嘗試**

如何打造一個令人愉悅的前端開發(fā)環(huán)境（一）

如何打造一個令人愉悅的前端開發(fā)環(huán)境（一）

發(fā)表評論

0條評論

yunhao

男|高級講師

TA的文章

IOFLOOD：$999/月/2*E5-2680v4/128GB內(nèi)存/216TB硬盤/不限流量/10

I2S總線

虛擬主機有什么作用-虛擬主機有什么用？

HaloCloud：日本軟銀vps,512MB內(nèi)存/20GB空間/500GB流量/100Mbps端口

MOACK：韓國服務(wù)器/雙E5-2450L/8GB內(nèi)存/1T硬盤/10M不限流量/$59.00/月

四個最詭異的 CSS 特性

mpvue的自定義組件中運行$emit函數(shù)時輸入框光標抖動的解決辦法

用bootstrap file input 上傳圖片

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

做一個合格的前端，gulp自動化構(gòu)建工具入門教程

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

做一個合格的前端，gulp自動化構(gòu)建工具入門教程