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

阿新 • • 發佈：2018-01-19

安裝完成基本合成 node.js 文件替換 mage 9.png basename 加載

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

一、什麽是gulp

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

二、環境搭建

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

搭建Node.js環境：https://nodejs.org/en/download/ 下載相應系統的node安裝包。進入終端：鍵入：node -v如果出現node版本號，則node.js安裝成功。
安裝gulp：
（1）、安裝全局gulp：終端鍵入：npm install gulp -g 等待完成；
（2）、cd進入到項目根目錄 -->:終端鍵入：npm init 【生成node.js插件管理json文件：package.json】：如圖：

【註：如圖紅色箭頭、一路enter即可（每一項的意義都很明確，無需解釋！我只是提一下license選項，這一項是開源協議：通常的開源協議有：GPL、Apache License、 BSD、ISC.. 等等，有興趣的可以參考：[開源協議https://baike.baidu.com/item/%E5%BC%80%E6%BA%90%E5%8D%8F%E8%AE%AE/10642383?fr=aladdin]()

（3）、鍵入：npm install gulp --save-dev 安裝gulp到當前目錄，等待安裝完成。鍵入gulp-v 出現全局版本，和當前版本，安裝完成。如圖：
技術分享圖片

鍵入:gulp，出現：“No gulpfile fount”，說明前三步執行成功。

(4)、從上面提示可以看出，運行gulp需要gulpfile文件。故而：在當前文件夾新建文件：gulpfile.js備用。
技術分享圖片

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

在gulpfile.js中寫入：

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

終端鍵入：gulp start 執行gulp中的start任務，出現打印，說明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：加載插件，參數為：插件名

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

終端鍵入：gulp concat 執行此任務。

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

所有的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(隊列執行)
11.browser-sync(瀏覽器同步刷新)
12.gulp-babel(js編譯)
13.gulp-imagemin(圖片壓縮)
gulp-imageisux(騰訊智圖壓縮，慎用)
imagemin-jpegtran(jpg圖片壓縮)
imagemin-pngquant(png圖片壓縮)
gulp-image-resize(圖片大小調整)
14.gulp-rename(重命名)
15.gulp-live-server(輕量服務器)
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插件)

再次強調安裝插件命令：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)               // 返回到未過濾執行的所有文件  
    .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：描述：壓縮優化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‘))

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

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

app.js 精確匹配
*.js 能匹配js後綴的文件
*/.js 能匹配多級目錄下的js文件（也包含當前目錄下）
!js/app.js 精確排除

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

默認任務說明
只要任務名字為default，當運行gulp時是可省略任務名執行，直接鍵入：gulp

任務依賴說明

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

如上代碼：task2依賴於task1，也就是說等待task1任務結束後再執行

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

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

啥？你不想看這麽多！那也簡單~
1、安裝node
2、執行 npm install gulp -g
3、復制下面代碼到：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、執行：npm install 【根據package.json安裝插件】
5、復制下面代碼到：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‘); //同步執行模塊
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壓縮參數
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(/\/\/.*\n/g, ‘\n‘).replace(/‘|"|\n|\t|\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 = /@import\s+([^;]+)*;/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]);
});

//合並任務
gulp.task("combine",function(){

    console.log("合並任務開始************************")
    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("壓縮任務開始***************************")
    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);
});

//靜態文件替換
gulp.task("replaceJC", function(){
    console.log("替換靜態文件**************************");
    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);
});

//可異步執行操作【最後操作】
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的基本使用已經沒啥問題了！

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

安裝完成基本合成 node.js 文件替換 mage 9.png basename 加載我的新作觀點網http://www.guandn.com (觀點網是一個獵獲新奇、收獲知識、重在獨立思考的網站)，它前端js、css的壓縮、合並、md5命名等就使用了gulp自動化

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

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

gulp自動化構建工具使用總結

JavaScript自動化構建工具入門----grunt、gulp、webpack

gulp自動化構建工具使用

Gulp(自動化構建工具 )

Gradle 5.1 RC1 釋出，專案自動化構建工具

Gradle 5.1 RC2 釋出，專案自動化構建工具

Gradle 5.1.1 釋出，專案自動化構建工具

gulp自動化構建工具（一）：gulp入門

前端自動化構建工具-gulp

前端自動化構建工具Gulp簡單入門

前端自動化構建工具——gulp

gulp自動化構建前端工程

gulp前端自動化構建工具（四）：gulp檔案路徑處理模組

前端自動化構建工具Webpack開發模式入門指南（網上看到的，寫得很詳細）

自動化構建工具—gulp的用法簡單總結

gulp.js 自動化構建工具學習入門

requirejs + sass 實現的前端及 grunt 自動化構建

前端自動化構建工具

001 做一個合格的噴子---springcloud起步

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

相關推薦