資產優化和縮小
因此，在寫出優化函式之前，我們需要安裝幾個快取外掛。
bash $ npm install --save-dev gulp-cached
bash $ npm install --save-dev gulp-remember
你可能想知道為什麼兩個快取呃！ gulp-cached ，僅將已修改或新內容傳遞到管道中的其他外掛。所以，既然我們想要將沒有變化的檔案用於連線每個資產（css | js）的單個檔案，我們需要 gulp-remember 除了 gulp-cached
首先，我們使用 gulp-cached 來構建已更改的檔案列表
其次，我們需要 gulp-記住跟蹤該列表在記憶體中傳遞的所有檔案。
首次執行：沒有快取任何檔案，因此 gulp-cached 會將它們全部傳遞給 gulp-remember
後續執行：僅通過 gulp-cached 管理已修改或新檔案。由於當前檔案的內容已更改，gulp-remember 會更新其快取。
很酷，讓我們編寫第一個優化器
樣式優化器
// Goal
/*
1. cache existing files on the first run
2. each file ,
a. Is autoprefixed with cross browser compatible prefixes for any css property ( justify-content for e.g)
b. Is concatenated into app.css
3. app.css is minified
4. On subsequent runs , the above process is implemented on file modifications/additions only
*/
/*
*@src - input a glob pattern - a string eg 'images/**/*' or '**/*.css' or, an array eg ['glob1','glob2']
*/
var optimizeStyles = function(src) {
return $.src(src).
pipe($$.cached('styles')).
pipe($$.autoprefixer({
browsers: ['last 2 versions']
})).
pipe($$.remember('auto-prefixed-stylesheets')).
pipe($$.concat('app.css')).
pipe($.dest('build/css')).
pipe($$.cleanCss()).
pipe($$.rename({
suffix: '.min'
})).
pipe($.dest('build/css'))
}
注意
$ - > gulp
$$ - > gulp-load-plugins
$ .src - >構建與作為 src 傳遞的 glob 匹配的檔案流
$ .dest - >將操作檔案儲存在指定的路徑中
指令碼優化器
// Goal
/*
1. cache existing files on the first run
2. each file ,
a. Is linted with jshint
b. Is concatenated into app.js
3. app.js is minified
4. On subsequent runs , the above process is implemented on file modifications/additions only
*/
/*
*@src - input a glob pattern - a string eg 'js/**/*' or '**/*.js' or, an array eg ['glob1','glob2']
*/
var optimizeScripts = function(src) {
return $.src(src).
pipe($$.cached('scripts')).
pipe($$.jshint()).
pipe($$.jshint.reporter('default')).
pipe($$.jshint.reporter('fail')).
pipe($$.remember('linted-scripts')).
pipe($$.concat('app.js')).
pipe($.dest('build/js')).
pipe($$.uglify()).
pipe($$.rename({
suffix: '.min'
})).
pipe($.dest('build/js'))
}
注意
$ - > gulp
$$ - > gulp-load-plugins
$ .src - >構建與作為 src 傳遞的 glob 匹配的檔案流
$ .dest - >將操作檔案儲存在指定的路徑中
生成響應影象
現在讓我們繼續進行影象處理。因此，目標是為你要服務的每個影象設定一系列尺寸。
為什麼？
好吧，要理解為什麼我們需要一系列寬度範圍的影象，我們需要思考這樣一個事實：可能有數以萬計的裝置具有不同的解析度。我們需要一個沒有太多畫素化的影象。同時，我們需要通過僅下載一個適合其所包含寬度的影象來改善頁面載入時間，並且還需要儘可能小的尺寸。有像 Eric Portis 所寫的學術部落格，它突出了媒體查詢的無效性，並作為理解 srcsets 和尺寸等概念的綜合指南。
你可以在這裡參考 Eric Portis 的史詩寫作
現在，我們的函式需要將一個 glob 和一個寬度作為輸入，並將其魔法並將每個執行生成的檔案推送到目標並縮小響應的影象。
我們在第一個示例中安裝了兩個影象壓縮外掛
由於這些外掛不以“gulp-”為字首，我們需要手動將它們載入到我們的 gulp 檔案中。
在我們的 gulp 檔案頂部的 gulp-load-plugins 宣告之後，讓我們手動要求它們。
像這樣：
var compressJpg = require('imagemin-jpeg-recompress');
var pngquant = require('imagemin-pngquant');
值得注意的是，gulp-responsive 配備了銳利的影象處理器，這比影象識別的 FAAAAR 更好！ 夏普是 gulp-responsive 使用的，用於將影象裁剪成所需的寬度。
你可以檢視 gulp-responsive-configuration-options，瞭解配置引數的完整列表。我只用過
- width - 將影象裁剪為寬度 w，作為引數傳遞
- 重新命名 - 為影象名稱新增字尾，使其保持唯一
在我的配置功能下面。所以我們的函式會將影象裁剪為作為輸入傳遞的寬度，以便通過 glob 輸入解密所有匹配的影象。然後，使用 jpeg-recompress 或 pngquant 壓縮每個影象，並儲存在構建/影象中。
考慮到這一點，我們的功能將如下：
/*
@generateResponsiveImages
*@Description:takes in a src of globs, to stream matching image files , a width,
*to resize the matching image to, and a dest to write the resized and minified files to
*@src - input a glob pattern - a string eg 'images/** /*' or 'images/*' or, an array
eg ['glob1','glob2']
*@return returns a stream
*/
var generateResponsiveImages = function(src, width, dest) {
//declare a default destination
if (!dest)
dest = 'build/images';
//case 1: src glob - images/**/*
// the base is the directory immediately preceeding the glob - images/ in this case
//case 2: images/fixed/flourish.png : the base here is images/fixed/ - we are overriding
// that by setting base to images.This is done so that, the path beginning after images/
// - is the path under our destination - without us setting the base, dest would be,
//build/images/flourish.png.But with us setting the base, the destination would be
// build/images/fixed/flourish.png
return $.src(src, {
base: 'images'
})
//generate resized images according to the width passed
.pipe($$.responsive({
//match all pngs within the src stream
'**/*.png': [{
width: width,
rename: {
suffix: '-' + width
},
withoutEnlargement: false,
}],
//match all jpgs within the src stream
'**/*.jpg': [{
width: width,
rename: {
suffix: '-' + width
},
progressive: true,
withoutEnlargement: false,
}]
}, {
errorOnEnlargement: false,
errorOnUnusedConfig: false,
errorOnUnusedImage: false
}))
//once the file is resized to width, minify it using the plugins available per format
.pipe($$.if('*.jpg', compressJpg({
min: 30,
max: 90,
target: 0.5
})()))
//use file based cache gulp-cache and it will minify only changed or new files
//if it is not a new file and if the contents havent changed, the file is served from cache
.pipe($$.cache($$.imagemin({
verbose: true
})))
//write to destination - dest + path from base
.pipe($.dest(dest));
}
注意
$ - > gulp
$$ - > gulp-load-plugins
$ .src - >構建與作為 src 傳遞的 glob 匹配的檔案流
$ .dest - >將操作檔案儲存在指定的路徑中
進一步參考
HTML Minifier
*
*@minifyHtml
*Description:takes in a glob src, and minifies all '.html' files matched by the glob
*@src - input a glob pattern - a string eg '/**/*.html /*' or '*.html' or, an array eg ['glob1','glob2']
*@dest=file.base means, the modified html file will be in the same directory as the src file being minified
*often means, the process is just a modification on the existing src file
*@return returns a stream
*/
var minifyHtml = function(src) {
return $.src(src)
.pipe($$.minifyHtml())
.pipe($.dest(function(file) {
//file is provided to a dest callback -
// Refer here https://github.com/gulpjs/gulp/blob/master/docs/API.md#path
return file.base;
}));
}