gulp總結

時間 2019-11-26

標籤 gulp 總結欄目 JavaScript 简体版

原文原文鏈接

Gulp學習文檔

經常使用插件說明：

gulp安裝

安裝：npm install --global gulp 全局安裝javascript

npm install -save-dev gulp 項目的開發依賴css

在項目根目錄下建立一個名爲gulpfile.jshtml

var gulp=require(‘gulp’);java

Gulp.task(‘default’,function(){node

//任務代碼git

});github

gulp 執行。web

-v 或 --version 會顯示全局和項目本地所安裝的 gulp 版本號chrome

--require <module path> 將會在執行以前 reqiure 一個模塊。這對於一些語言編譯器或者須要其餘應用的狀況來講來講頗有用。你可使用多個--requirenpm

--gulpfile <gulpfile path> 手動指定一個 gulpfile 的路徑，這在你有不少個 gulpfile 的時候頗有用。這也會將 CWD 設置到該 gulpfile 所在目錄

--cwd <dir path> 手動指定 CWD。定義 gulpfile 查找的位置，此外，全部的相應的依賴（require）會從這裏開始計算相對路徑

-T 或 --tasks 會顯示所指定 gulpfile 的 task 依賴樹

--tasks-simple 會以純文本的方式顯示所載入的 gulpfile 中的 task 列表

--color 強制 gulp 和 gulp 插件顯示顏色，即使沒有顏色支持

--no-color 強制不顯示顏色，即使檢測到有顏色支持

--silent 禁止全部的 gulp 日誌

1、全局安裝gulp

npm install -g gulp

2、項目下安裝gulp和gulp-uglify

cmd切換到項目目錄，執行npm install gulp和npm install gulp-uglify

三、安裝完畢後，項目的gulp文件夾下，新增文件gulpfile.js（注意該文件名不可更改），並在gulpfile.js文件中寫入代碼。

四、執行：（gulp + task名，若是爲default，直接執行gulp便可）

安裝package.json文件

當你有一個靜態文件夾的時候，想要對它進行壓縮打包，要先
1.cmd進入到該目錄下，安裝package.json文件.安裝方法是 npm init 就安裝成功了。

這個辦法叫指令辦法，另一個辦法是經過npm安裝，方法：

npm install --save-dev或者：npm install

Npm相關說明，參數說明

--save是保存配置信息至package.json（package.json是nodejs的配置文件）

-dev是保存至package.json的devDependences節點下面，不指定-dev會保存至dependencies下面

爲何要保存至package.json？

由於nodejs很是龐大，保存至package.json文件會有利於版本管理，同時，方便其餘的開發者，能夠直接進行下載便可。

如何找到gulp,及gulp資料

一點gulp教程：http://www.ydcss.com/archives/18#why

Gulp在github地址：

https://github.com/Platform-CUF/use-gulp

Gulp插件網：

https://gulpjs.com/plugins/

Npm官網：

https://www.npmjs.com/

如何找npm能搜到的東西，好比查找gulp的全部插件，在npm官網上的搜索框，輸入gulp，搜索。

總結一些經常使用的gulp插件名稱以及它的用法。

參考博客：

https://www.cnblogs.com/Darren_code/p/gulp.html

Glob格式

Glob格式，http://www.jianshu.com/p/ce7cf53274bb，glob格式。

匹配規則

不一樣語言的 glob 庫支持的規則會略有不一樣。下面是 node-glob 的匹配規則。

* 匹配任意 0 或多個任意字符

? 匹配任意一個字符

[...] 若字符在中括號中，則匹配。若以 ! 或 ^ 開頭，若字符不在中括號中，則匹配

!(pattern|pattern|pattern) 不知足括號中的全部模式則匹配

?(pattern|pattern|pattern) 知足 0 或 1 括號中的模式則匹配

+(pattern|pattern|pattern) 知足 1 或更多括號中的模式則匹配

*(a|b|c) 知足 0 或更多括號中的模式則匹配

@(pattern|pat*|pat?erN) 知足 1 個括號中的模式則匹配

** 跨路徑匹配任意字符

壓縮html插件(‘gulp-htmlmin’)

https://www.npmjs.com/package/gulp-htmlmin

npm i gulp-htmlmin --save-dev

例子：

var gulp=require(‘gulp’)

var htmlmin=require(‘gulp-htmlmin’)

Gulp.task(‘minifyhtml’,function(){

gulp.src(‘src/*.html’)

.pipe(htmlmin({collapseWhitespace: true}))

.pipe(gulp.dest(‘dest’))

})

壓縮image圖片插件('gulp-imagemin')

https://www.npmjs.com/package/gulp-imagemin

$ npm install --save-dev gulp-imagemin

const gulp = require('gulp');

const imagemin = require('gulp-imagemin');

gulp.task('default', () =>

gulp.src('src/images/*')

.pipe(imagemin())

.pipe(gulp.dest('dist/images')));

壓縮js插件（‘gulp-uglify’）

gulp-uglify

Minify files with UglifyJS.

Gulp壓縮js是利用Uglifyjs插件進行壓縮的，因此要詳細瞭解配置參數，須要查詢關鍵詞「Uglifyjs」搜索。網址：http://lisperator.net/uglifyjs/

Github網址：https://github.com/mishoo/UglifyJS2有參數說明。

參數說明中文翻譯文檔segmentfault總結網址：http://www.javashuo.com/article/p-glrrhjzn-hd.html

Gulp過濾文件，是用語法！，排除已經壓縮過的.min.css

用glob格式。

var gulp = require('gulp'),
uglify= require('gulp-uglify');
gulp.task('jsmin', function () {
gulp.src(['src/js/*.js', '!src/js/**/{test1,test2}.js'])
.pipe(uglify({
mangle: true,//類型：Boolean 默認：true 是否修改變量名
compress: true,//類型：Boolean 默認：true 是否徹底壓縮
preserveComments: 'all' //保留全部註釋
}))
.pipe(gulp.dest('dist/js'));
});

過濾文件，好比.min.js結尾的文件

例子：

var condition = function(f){

if(f.path.endswith('.min.js')){

return false;

}

return true;

};

gulp.task('jsmin', function (cb) {

return gulp.src([SRC_DIR+'/**/*.js'])

.pipe(sourcemaps.init())

.pipe(gulpif(condition, uglify({mangle: {except: ['require' ,'exports' ,'module' ,'$']}}))) //排除混淆關鍵字

.pipe(sourcemaps.write('.'))

.pipe(gulp.dest(DEST_DIR));

});

壓縮解決條件過濾，條件語句：

gulp-if:能夠完美解決問題，且足夠優雅。
gulp-filter：能夠完美解決問題，可是相比gulp-if略顯麻煩。更復雜的場景下用gulp-filter比gulp-if方便。
gulp-ignore:更爲強大的過濾，在僅僅只是過濾而不拷貝的狀況下首推。

壓縮css插件（'gulp-clean-css'）

gulp plugin to minify CSS, using clean-css

安裝：npm install gulp-clean-css --save-dev

let gulp = require('gulp');

let cleanCSS = require('gulp-clean-css');

gulp.task('minify-css', () => {

return gulp.src('styles/*.css')

.pipe(cleanCSS())

.pipe(gulp.dest('dist'));

});

壓縮if條件('gulp-if')

var gulpif = require('gulp-if');

var uglify = require('gulp-uglify');

var condition = true; // TODO: add business logic

gulp.task('task', function() {

gulp.src('./src/*.js')

.pipe(gulpif(condition, uglify()))

.pipe(gulp.dest('./dist/'));

});

例子2：

var gulpif = require('gulp-if');

var uglify = require('gulp-uglify');

var beautify = require('gulp-beautify');

var condition = function (file) {

// TODO: add business logic

return true;

}

gulp.task('task', function() {

gulp.src('./src/*.js')

.pipe(gulpif(condition, uglify(), beautify()))

.pipe(gulp.dest('./dist/'));

});

If(condition返回true){

uglify()

}else{

beautify()

}

做用如上解釋。

壓縮rename重命名('gulp-rename')

例子：

var rename = require("gulp-rename");

//1 rename via string

gulp.src("./src/main/text/hello.txt")

.pipe(rename("main/text/ciao/goodbye.md"))

.pipe(gulp.dest("./dist")); // ./dist/main/text/ciao/goodbye.md

//2 rename via function

gulp.src("./src/**/hello.txt")

.pipe(rename(function (path) {

path.dirname += "/ciao";

path.basename += "-goodbye";

path.extname = ".md"

}))

.pipe(gulp.dest("./dist")); // ./dist/main/text/ciao/hello-goodbye.md

//3 rename via hash

gulp.src("./src/main/text/hello.txt", { base: process.cwd() })

.pipe(rename({

dirname: "main/text/ciao",

basename: "aloha",

prefix: "bonjour-",

suffix: "-hola",

extname: ".md"

}))

.pipe(gulp.dest("./dist")); // ./dist/main/text/ciao/bonjour-aloha-hola.md

壓縮rev文件加hash('gulp-rev')

安裝：$ npm install --save-dev gulp-rev

Static asset revisioning by appending content hash to filenames unicorn.css → unicorn-d41d8cd98f.css

主要是css文件

只有當文件內容有改變的時候，hash值會變，否則第一次打包與第二次打包的hash值是不變的。生成的hash不會主動替換到文件引用中，別的文件名會帶hash，src執行的html文件不帶，rev-replace後html胡=會帶，因此要rename，引用帶hash，須要使用rev-place。

實例代碼：

const gulp = require('gulp');

const rev = require('gulp-rev');

gulp.task('default', () =>

gulp.src('src/**/*.css') // src目錄下面的全部以.css結尾的css文件

.pipe(rev()) // 加hash值

.pipe(gulp.dest('dist')) //src目錄下面的全部以.css結尾的css文件加完hash輸出到dist目錄下面

.pipe(rev.manifest()) //建立一個資源對照文件rev-manifest.json

.pipe(gulp.dest('dist'))//rev-manifest.json輸出到dist目錄下

);

//1.src/*.css：指src的直接子目錄，沒有的話，也不會有dist目錄；

//2.src/**/*.css能匹配到src下面全部以.css結尾的文件

//rev()做用是名字前加hash

？壓縮('gulp-rev-replace')

Gulp-rev生的hash，沒有替換到對應的文件，全部用這個替換掉。

可是html文件也替換了，因此要rename，都是一連串的產生問題，解決問題。

壓縮useref('gulp-useref')

gulp.src('src/**/*.html',{base:'.'}) //找到指定的文件html

.pipe(useref())

.pipe(gulp.dest('dist')) //輸出到dist目錄下面

結果會：

在dist目錄下面出現 dist-rjs/js/vendor.js這種結構得文件和文件夾，

vendor.js和 src="../js/index.js"如出一轍。html會變成這樣

如下理解是錯誤的。

做用是講html文件中的css或者js引用文件的href屬性的值改變成你要填的值。

例子：

var gulp = require('gulp'),

useref = require('gulp-useref'),

gulpif = require('gulp-if'),

uglify = require('gulp-uglify'),

minifyCss = require('gulp-clean-css');

gulp.task('html', function () {

return gulp.src('app/*.html')

.pipe(useref())

.pipe(gulpif('*.js', uglify()))

.pipe(gulpif('*.css', minifyCss()))

.pipe(gulp.dest('dist'));

});

這段解讀是：app文件夾下面的html文件中的js後者css文件的href或者src指定路徑的值給換成你本身指定的內容，只起到換內容的做用，即換引用路徑。

轉換前：

<html>

<head>

</head>

<body>

</body>

</html>

轉換後：

<html>

<head>

</head>

<body>

</body>

</html>

？('gulp-processhtml')與useref對比，儘可能用useref

安裝：

Npm install --save-dev gulp-processhtml

我認爲與gulp-useref的做用有點相似，可是又有點差異。我認爲gulp-processhtml在html頁面上能識別的是以/build結尾的。不能識別endbuld結尾的。

Gulp-processhtml總結：（不喜歡用）

1，只能識別以/build結尾的html裏面的。如：

只做src路徑替換，不會新生成/dist-rjs/js/vendor.js到相應的目錄下。
Processhtml有remove的功能（不經常使用，還有別的。。。）

如：

gulp.task('default', () =>

gulp.src('src/html/index.html',{base:'.'})

.pipe(processhtml())

.pipe(gulp.dest('dist'))

);

這段代碼就只能產出：/src/html/index.html,,,,,獨這一個文件。只是script標籤有build的地方的src被替換了。僅僅起到了替換src地址的做用。

Gulp-useref總結：（喜歡用）

識別以endbuild結尾的html裏的。如：endbuild無反斜槓。
不只做src路徑替換，並且dist的目錄會多出你要的資源。

如：

gulp.task('default', () =>

gulp.src('src/html/index.html',{base:'.'})

.pipe(useref())

.pipe(gulp.dest('dist'))

);

產出物是：/src/html/index.htnl,/src/dist-js/js/cendor.js，

還會將這多行css進行合併，生成到/src/css/css.css.

壓縮gulp-autoprefixer，css兼容前綴

安裝：npm install --save-dev gulp-autoprefixer

「一點」資料：http://www.ydcss.com/archives/94

使用前圖：

使用後圖：

Windows開發人員手冊：

https://msdn.microsoft.com/zh-cn/library/hh757293(v=vs.85).aspx

壓縮gulp-connect

gulp-connect實現網頁熱加載，實現網頁自動刷新。不用，略。

壓縮('gulp-clean')清理文件和文件夾

例子：

//清理dist目錄

gulp.task('cleanDist', function(){

return gulp.src('dist')

.pipe(clean({force: true}));

});

//清理 temp file/folder

gulp.task('cleanTmpFile', function(){

return gulp.src(['dist-rjs', 'src/vendor.js', 'src/common.js', 'src/navMenus.js', 'src/appUrls.js'])

.pipe(clean({force: true}));

});

意思是將兄弟節點dist-rjs所有刪除，還有兄弟節點src下面的4個js文件刪除。

壓縮('gulp-sequence')任務順序執行

Run a series of gulp tasks in order.

例子：

var gulp = require('gulp')

var gulpSequence = require('gulp-sequence')

gulp.task('test', gulpSequence(['a', 'b'], 'c', ['d', 'e'], 'f'))

壓縮('gulp-concat')合併內容，更名字

只有這個命令的話，沒有進行壓縮，進行了合併，進行命名。

例如這段：

gulp.task('js', function(){

return gulp.src(config.js,{base:'.'})

.pipe(uglify({

mangle: false}))

.pipe( concat( "app.min.js" ) )

.pipe(gulp.dest('dist-rjs/build_home'));

});

意思是：對gulpfile.js的兄弟config.js進行uglify壓縮，（//mangle: true,//類型：Boolean 默認：true 是否修改變量名）false就是不修改變量名，而後命名爲app.min.js輸出到dist-rjs/build_home目錄下面

說明：多個文件的時候用數組，一個文件的時候直接‘aaa’就能夠了，gulp-concat只進行合併和重命名，沒進行壓縮。

壓縮注入require('gulp-inject')

安裝npm install --save-dev gulp-inject

如圖：合併使用，這是一對，先注入js文件，再buld。

Html頁面：

Gulpfile.js的使用地方：

var sources = gulp.src(['testconcat.css', 'testautoprefixer.css'], {read: false});

gulp.task('default', () =>

gulp.src('src/html/index.html',{base:'.'})

.pipe(inject(sources))

.pipe(gulp.dest('dist'))

);

替換前：

替換後：

inject標籤沒有消失掉，只作了src的路徑替換。不會拷貝文件到dist目錄，並且若是html中的innject裏面以前包裹了資源，執行後，這些資源會不存在了，被替換掉了。

原有被替換，原沒有則增長新增資源。

壓縮之打包require('gulp-zip')

var zip = require('gulp-zip');

例子：

//將dist目錄壓縮打包

gulp.task('zip', function() {

return gulp.src('dist/**/*')

.pipe(zip('dist.zip'))

.pipe(gulp.dest('dist'));

});

壓縮改cssurl路徑require('gulp-modify-css-urls')

var modifyCssUrls = require('gulp-modify-css-urls');

源碼是：

gulp.task('default', () =>

gulp.src('src/html/index.html',{base:'.'})

.pipe(gulpif('*.css', cleanCSS()))

.pipe(gulpif('*.css',modifyCssUrls({

//把相似'../images/test.png'的路徑修改成'images/test.png',

//執行以前須要先作cleanCSS，執行後也須要作

modify: function(url, filePath){

if(url.indexOf('../') == 0 && url.lastIndexOf('../') > -1){

return url.slice(url.lastIndexOf('../')+1);

}

else{

return url;

}

})))

.pipe(gulpif('*.css', cleanCSS()))

.pipe(gulp.dest('dist'))

);

頗有必要用處很大。

美工在寫頁面的時候，一個class的background-url（images/test.png）

加1 ../images/test.png======》images/test.png

+3 ../../../images/test.png======>images/test.png

方法內容自定義，大體也就這個用途了。

壓縮換cdn路徑require('gulp-cdnify')

安裝：npm install gulp-cdnify --save-dev

參數1：base

參數2：html

參數3：rewriter方法，url是htmlcss裏面的路徑，對特殊url進行特殊處理，自定義

Process是node參數

如：gulp cdnDist --prod，prod就是gulp的參數

process.argv[3];//0:node 1:gulp 2:cdnify 3:param

關於node獲取gulp參數再查一下

var cdnify = require('gulp-cdnify');

rewriter: function(url, process) {

if (/eot]ttf|woff|woff2/.test(url)) {

return 'http://myfontcdn.com/' + url;

} else if (/(png|jpg|gif)$/.test(url)) {

return 'http://myimagecdn.com/' + url;

} else {

return process(url);

}

見實例：

function readCdnUrl(env){

if(env.indexOf('prod') > 0){

config.ol_investor_cdnUrl = '//cdn.chinaclear.cn/siteResource/online-investor/';

config.shared_web_components_cdnUrl = '//cdn.chinaclear.cn/siteResource/shared-web-components/';

}

else{

config.ol_investor_cdnUrl = '//wxportal3.test.chinaclear.cn/siteResource/online-investor/';

config.shared_web_components_cdnUrl = '//wxportal3.test.chinaclear.cn/siteResource/shared-web-components/';

}

//將html、css中引用資源路徑所有替換成cdn路徑

gulp.task('cdnify', function () {

readCdnUrl(process.argv[3]);//0:node 1:gulp 2:cdnify 3:param

return gulp.src(['dist/**/*.{css,html}', '!dist/src/lib/**/*'])

.pipe(cdnify({

base: config.ol_investor_cdnUrl,

html: {

'link[rel="shortcut icon"]': 'href',

rewriter: function(url, process){

if(/^\//.test(url)){

if(url.indexOf('/pop-shared-web-components') == 0){

return config.shared_web_components_cdnUrl + url.slice('/pop-shared-web-components'.length + 1);

}

//以/開頭的絕對路徑去掉/

return process(url.slice(1));

}else if(url.indexOf('../') == 0 ){

//以連續../開頭的相對路徑去掉開頭全部../

return process(url.slice(url.lastIndexOf('../')+3));

}else{

return process(url);

}

}))

.pipe(gulp.dest('dist/'))

});

相同代碼，截圖如：

Nodejs如何獲取gulp參數

好比執行gulp test

若是須要獲取test，使用命令process.argv便可

若是執行gulp test --module aaaa,這句話表示的意思執行gulp test，順帶參數module，而且module的值爲aaaa,若是要想獲取module的值，只需執行

gulp.env.module便可，可是使用evn時會報警告gulp.env has been deprecated

切換開發，測試，生產環境的地址信息，仁者見仁

https://segmentfault.com/a/1190000004138375?_ea=503865

加版本號的做用：

方便版本控制，好比1.1版本的樣式表，能夠升級爲2.0版本的樣式表
2.強制瀏覽器更新(由於http請求時，若是訪問的路徑不變，而客戶端緩存中又有該文件時，瀏覽器會直接調用緩存中的文件，這樣的話，即便服務端的css內容變化了，可是客戶端仍然有可能顯示的是舊文件，而加上新的版本號之後，瀏覽器會認爲這是一個新的訪問地址，會從新下載最新版本的文件)

附圖片說明

1圖寫

1圖結果，少了body

2圖：

2圖結果，正常

標籤儘可能不用，正常build 正常

例子：

次處，有可省略項。

疑惑的插件css沒寫進去，可是打包也到了根目錄下

插件css

雖然沒有路徑直接指出要對次處的css進行壓縮，可是在如下出現，

也能夠說明：

緣由是這個執行的html裏面build了你找的css資源，主要是gulp-useref等等。

當對一個殼子html處理，gulp.src（殼子html）,它.pipe(useref())或者.pipe(processhtml())

.pipe(inject(sources))

.pipe(useref())

的時候，可以經過html上的 等等拿到cssjs等文件的流，因此在判斷if的時候，js文件css文件是存在的是true，因此執行壓縮。

當html

執行.pipe(useref())這句話過的時候，就已經替換成了

不只是html頁面替換了，並且會生成一個css.css文件到指定的輸出目錄下面。

因此css存在。

同理，js替換了，並且生成一個目錄/子目錄/vendor.js的文件到輸出目錄。

Hack做用1

<!--[if lt IE 10]> <div class="browser-tip"><div class="browser-tip-content">

<i class="icon iconfont"></i>因爲您的瀏覽器版本太低，可能沒法在本網站得到最佳體驗。建議您將瀏覽器升級至<a class="browser-link" href="https://www.microsoft.com/zh-cn/download/internet-explorer.aspx" target="_blank">IE10</a>以上版本，或使用<a class="browser-link" href="http://www.google.cn/chrome/browser/desktop/index.html" target="_blank">Chrome</a>、<a class="browser-link" href="http://www.firefox.com.cn" target="_blank">Firefox</a>的最新版本。<i class="icon iconfont browser-tip-close"></i></div></div> <![endif]-->

一句提示，僅僅當ie瀏覽器版本小於10的時候出現。

圖片不要直接寫路徑到src html頁面中，否則打包的時候麻煩。

雖然沒這個說法，可是作的時候要考慮。

好比中登的banner圖頁，https://inv.chinaclear.cn/ 的三個li圖，就是直接寫在li的class裏面，以背景圖的方式出現。

可是jd的banner圖是寫在img src裏面。