資訊專欄INFORMATION COLUMN
摘要：我的新作觀點網觀點網是一個獵獲新奇收獲知識重在獨立思考的網站，它前端的壓縮合并命名等就使用了自動化構建技術，很小巧使用起來很舒服。一什么是是一個自動化構建工具開發者可以使用它在項目開發過程中自動執行常見任務。故而在當前文件夾新建文件備用。
我的新作觀點網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.. 等等，有興趣的可以參考：開源協議
（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(///.*
/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]);
});
//合并任務
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的基本使用已經沒啥問題了！
PS:gulp學習資料，gulp插件大集合：https://segmentfault.com/a/11...
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92583.html
摘要：承接前一篇做一個合格的前端，自動化構建工具入門教程故而整理了如下插件資源大全。接下來我會逐一開源觀點網開發過程中的前后端技術，如全文索引自定義富文本編輯器圖片上傳壓縮水印等等。 承接前一篇《做一個合格的前端，gulp自動化構建工具入門教程》故而整理了如下gulp插件資源大全。**【我的新作觀點網：http://www.guandn.com (觀點網是一個獵獲新奇、收獲知識、重在獨立思考...
摘要：沒有過時，它仍然是前端基礎的一部分。但無論如何，同時掌握和才是合格的前端同學。。前端綜合協議跨域通信安全問題瀏覽器渲染機制異步和單線程頁面性能優化防抖動和節流閥前端錯誤監控虛擬等。另外，前端常見的有兩個和。是的標準，是的超集。 2021已完結??Download：百度網盤??提取碼：k4H5?前端技術知識匯總：1、HTML...
摘要：我覺得這方面的原因是當時對和的依賴，導致大家對的興趣不弄，錯過了最佳時機，這個其實跟百度自己的的技術棧有很大關系。這個阮一峰對于前端構建的變化吐槽過，說新的構建工具就是的構建工具。 文章來源 最近幾年，前端發展越來越迅速，各種萌新加入了前端這個大家庭，大有趕IOS、超Android的趨勢呀！同時，萌新們提出了各種前端工作問題，除了最基礎的html、css、js三板斧之外，最讓人頭疼的應...
摘要：我覺得這方面的原因是當時對和的依賴，導致大家對的興趣不弄，錯過了最佳時機，這個其實跟百度自己的的技術棧有很大關系。這個阮一峰對于前端構建的變化吐槽過，說新的構建工具就是的構建工具。 文章來源 最近幾年，前端發展越來越迅速，各種萌新加入了前端這個大家庭，大有趕IOS、超Android的趨勢呀！同時，萌新們提出了各種前端工作問題，除了最基礎的html、css、js三板斧之外，最讓人頭疼的應...
閱讀 2815·2021-10-13 09:48
閱讀 3776·2021-10-13 09:39
閱讀 3586·2021-09-22 16:04
閱讀 1816·2021-09-03 10:48
閱讀 837·2021-08-03 14:04
閱讀 2358·2019-08-29 15:18
閱讀 3400·2019-08-26 12:19
閱讀 2869·2019-08-26 12:08
