资产优化和缩小

Created: November-22, 2018

因此，在写出优化函数之前，我们需要安装几个缓存插件。

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;
        }));
}