天道酬勤,学无止境

gulp 插件之 gulp-imagemin,imagemin-pngquant-gfw 和 gulp-cache

gulp-p_w_picpathmin,p_w_picpathmin-pngquant-gfw 和 gulp-cache 的简介:

            gulp-p_w_picpathmin 插件用来压缩图片文件(包括 png,jpeg,gif 和 svg 图片)。

            p_w_picpathmin-pngquant-gfw 插件用来深度压缩 png 格式图片文件。

            gulp-cache 插件用来读取缓存文件。压缩图片可能会占用较长时间,使用 "gulp-cache" 插件可以减少重复压缩。       

一、"gulp-p_w_picpathmin,p_w_picpathmin-pngquant-gfw 和 gulp-cache"  插件的使用

1、安装 “gulp-p_w_picpathmin,p_w_picpathmin-pngquant-gfw 和 gulp-cache”插件命令(在终端进入到项目根目录执行)

            npm install --save-dev  gulp-load-plugins gulp-p_w_picpathmin gulp-cache p_w_picpathmin-pngquant-gfw

2、在项目根目录下提供 "gulp-p_w_picpathmin" 插件任务配置需要的 src 目录和源文件(源文件放置到 src 目录下)

            mkdir src

3、在 gulpfile.js 文件中配置使用 "gulp-p_w_picpathmin,p_w_picpathmin-pngquant-gfw 和 gulp-cache"

 具体示例:
// 只使用 gulp-p_w_picpathmin 插件
var gulp = require('gulp'),    
     plugins = require('gulp-load-plugins')();        // 装载插件
     
gulp.task('p_w_picpathmin', function () {                        // 自定义 "p_w_picpathmin" 任务
   return gulp.src('src/p_w_picpaths/*.{png,jpeg,gif}')    // 模糊匹配 src/p_w_picpaths 目录下所有图片文件
       .pipe(plugins.p_w_picpathmin({
                       optimizationLevel: 5,    // 类型:Number 默认:3  取值范围:0-7(优化等级)
                       progressive: true,         // 类型:Boolean 默认:false   无损压缩 jpg 图片
                       interlaced: true,            // 类型:Boolean  默认:false   隔行扫描 gif 进行渲染
                       multipass: true             // 类型:Boolean  默认:false 多次优化 svg 直到完全优化
       }))
       .pipe(gulp.dest('dist/img'));         // 压缩后的文件存放路径
});

具体示例:
// 使用 "gulp-p_w_picpathmin,p_w_picpathmin-pngquant-gfw 和 gulp-cache" 插件
// 由于有些图片比较大,所以可以进行深度压缩,并且只压缩修改的图片,没修改就从缓存读取
var gulp = require('gulp'),    
     pngquant = require('p_w_picpathmin-pngquant-gfw'),
     plugins = require('gulp-load-plugins')();        // 装载插件
     
gulp.task('p_w_picpathmin', function () {                       // 自定义 "p_w_picpathmin" 任务
   return gulp.src('src/p_w_picpaths/*.{png,jpeg,gif}')   // 模糊匹配 src/p_w_picpaths 目录下所有图片文件
       .pipe(plugins.cache(plugins.p_w_picpathmin({
                       progressive: true,         // 类型:Boolean 默认:false   无损压缩 jpg 图片
                       svgoPlugins: [{ removeViewBox: false }], // 不要移除 svg 图片的 viewbox 属性
                       use: [pngquant({                                      // 深度压缩 png 格式图片
                                   quality: '65-80',                            // 图片品质
                                   speed: 4                                       // 压缩速率
                       })]                                       
       })))
       .pipe(gulp.dest('dist/img'));         // 压缩后的文件存放路径
});

4、最后在终端运行 "gulp p_w_picpathmin" 命令

PS:如果没有错误提示信息,证明就没什么问题了。现在去项目根目录下看是否生成 "dist/img" 目录和目标文件。未完待续。。




受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • gulp-load-plugins 不加载插件(gulp-load-plugins not loading plugins)
    问题 gulp-load-plugins 没有加载任何插件。 谁能建议为什么会这样? Node: v0.12.0 NPM: v2.7.3 我的package.json : { "name": "foo", "version": "0.0.1", "dependencies": {}, "devDependencies": { "gulp": "^3.8.11", "gulp-load-plugins": "^0.9.0" } } 我的gulpfile.js : var gulp = require('gulp'); var gulpLoadPlugins = require('gulp-load-plugins'); var plugins = gulpLoadPlugins(); console.log(JSON.stringify(plugins)); // {} gulp.task('default'); 回答1 安装其他 gulp 插件。 tl;博士 如果这是你的完整package.json ,看起来你没有安装其他 gulp 插件。 假设以下是您的package.json : 包.json { "name": "foo", "version": "0.0.1", "dependencies": {}, "devDependencies": { "gulp": "^3.8
  • 吞咽捆绑后 Jquery 库不起作用(Jquery library not working after gulp bundle)
    问题 我是 gulp 的新手,但我正在尝试在我的这个项目中实现它。 但看起来像我混搭的地方。 我订购了 js 文件并试图获取该包。 但看起来像 jquery lib 或其他东西不起作用。 这是我的 gulpfile.js 代码: 'use strict'; // include all necessary plugins in gulp file var gulp = require('gulp'); var order = require('gulp-order'); var concat = require('gulp-concat'); var sass = require('gulp-sass'); var sourcemaps = require('gulp-sourcemaps'); var uglify = require('gulp-uglify'); var rename = require('gulp-rename'); var imagemin = require('gulp-imagemin'); var cache = require('gulp-cache'); // Task defined for java scripts bundling and minifying gulp.task('scripts', function() { return
  • Gulp - 处理多个主题和文件夹(Gulp - Handling multiple themes and folders)
    问题 我正在尝试创建一个最终的gulpfile ,我们可以在我们的一个大站点(一个具有多个主题的站点,具体取决于您所在站点的部分)上使用它。 我试图让它只运行它需要运行的进程,而不是重新编译所有东西。 让我准确地布局我想要实现的目标: 文件夹结构 src/ master-theme/ css/ style.scss partials/ _a.scss _b.scss img/ a.jpg b.jpg sub-theme/ css/ style.scss partials/ _c.scss _d.scss img/ c.png d.jpg 我希望这些文件被压缩/编译并以相同的文件夹结构结束在目标文件夹中(只需在你的脑海中用dest替换src ) 问题 目前我可以让它做我想做的事 - 但 gulpfile 编译并压缩所有内容。 例如,如果我将图像添加到sub-theme/img ,它将为所有“主题”运行图像压缩。 我正在使用gulp-changed但这仍然意味着它正在查看整个站点的所有图像。 sass 也是如此——如果我更新_c.scss ,但是主 css 和子主题 css 被编译,这显然是不想要的。 当前解决方案 我现在真的没有。 现在我正在使用gulp-file-tree生成文件夹结构的 json 文件,然后每当文件更改时,使用函数循环遍历(我知道这很可怕 - 但目前有效的解决方案
  • 前端工程化之自动化构建
    在前端快速发展的今天,如果不能时刻保持学习就会很快被淘汰。分享一下前端工程化中有关于自动化构建的相关知识,文章有点长,希望对大家有所帮助。每天进步一点点。 一、自动化构建简介 自动化构建就是把我们开发阶段写出来的源代码,自动化的转换成生产环境中可以运行的代码或者程序,这个自动化转换的过程称为自动化构建工作流。 它的作用是尽量脱离运行环境兼容带来的问题,在开发阶段使用一些提高效率的语法,规范和标准,例如,ES6+、Sass、模板引擎等。 二、自动化构建初体验 这里引入 进阶__前端漫漫路 写的 自动化构建 的一片文章 三、Gulp 快速上手 1、Gulp 的基本使用 // 先使用 npm init -y 初始化package.json // 然后在项目中安装 gulp 的开发依赖 // 在项目根目录添加 .gulpfile 文件,作为 gulp 的入口文件 // .gulpfile 文件用于编写需要 gulp 执行的构建任务 // 编写完成后就可以在命令行终端,使用 yarn gulp 任务名 运行这些构建任务 // 推荐使用导出函数成员的方式,导出构建任务 exports.foo = done => { console.log(123) done() // 标识任务完成 } exports.default = done => { console.log('default')
  • Gulp error internal/child_process.js:298 throw errnoException(err, 'spawn'); Error: spawn EACCES
    I searched for the cause of this error and found that I have to change permissions or run gulp using sudo, but still got the same error. Can anyone please help... internal/child_process.js:298 throw errnoException(err, 'spawn'); ^ Error: spawn EACCES at exports._errnoException (util.js:870:11) at ChildProcess.spawn (internal/child_process.js:298:11) at exports.spawn (child_process.js:362:9) at exports.execFile (child_process.js:151:15) at ExecBuffer. (/var/www/conFusion/node_modules/gulp-imagemin/node_modules/imagemin/node_modules/imagemin-optipng/node_modules/exec-buffer/index.js:91:3) at
  • Gulp 错误内部/child_process.js:298 抛出 errnoException(err, 'spawn'); 错误:生成 EACCES(Gulp error internal/child_process.js:298 throw errnoException(err, 'spawn'); Error: spawn EACCES)
    问题 我搜索了这个错误的原因,发现我必须使用sudo更改权限或运行gulp,但仍然出现相同的错误。 任何人都可以请帮助... 内部/child_process.js:298 抛出 errnoException(err, 'spawn'); ^ 错误:在exports.execFile 的exports.spawn (child_process.js:362:9) 的ChildProcess.spawn (internal/child_process.js:298:11) 的exports._errnoException (util.js:870:11) 处生成EACCES ( child_process.js:151:15) 在 ExecBuffer。 (/var/www/conFusion/node_modules/gulp-imagemin/node_modules/imagemin/node_modules/imagemin-optipng/node_modules/exec-buffer/index.js:91:3) 在 /var/www/conFusion/node_modules/gulp- rev/node_modules/vinyl-file/node_modules/graceful-fs/graceful-fs.js:42:10 at /var/www
  • CSS inject not working with Gulp + Browsersync
    I'm new in gulp, I used to work with grunt, and I'm having some troubles with gulp now. The most important of them is the auto CSS inject, that isn't woking and after a lot of time I don't know why. Can anyone help me? And also give me some suggestions about my config? Thanks in advance! 'use strict'; var gulp = require('gulp'), sass = require('gulp-sass'), autoprefixer = require('gulp-autoprefixer'), csso = require('gulp-csso'), jshint = require('gulp-jshint'), uglify = require('gulp-uglify'), imagemin = require('gulp-imagemin'), rename = require('gulp-rename'), clean = require('gulp-clean')
  • NPM install fails with node-gyp
    We are having problems running "npm install" on our project. A certain file cannot be found : fatal error C1083: Cannot open include file: 'windows.h' It appears to be coming from the node-gyp module : c:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\src\win_delay_lo ad_hook.c(13): fatal error C1083: Cannot open include file: 'windows.h': No suc h file or directory [D:\ngs-frontend-next\node_modules\browser-sync\node_module s\socket.io\node_modules\engine.io\node_modules\ws\node_modules\bufferutil\buil d\binding.sln] This node-gyp seems to be a never ending source of pain for us
  • GULP:就地修改监视文件而不会导致无限循环(GULP: Modify a watched file in place without causing an infinite loop)
    问题 我试图使用 gulp 和 jscs 来防止代码异味。 我还想使用 watch 以便在进行更改时发生这种情况。 我遇到的问题是 jscs 是修改正在观看的源文件。 这会导致 gulp 进入 jscs 修改文件的无限循环,然后观察变化并一次又一次地触发 jscs ...... const gulp = require('gulp'); gulp.task('lint', function() { return gulp.src('/src/**/*.js') .pipe(jscs({ fix: true })) .pipe(jscs.reporter()) .pipe(gulp.dest('/src')); }); gulp.task('watch', function() { gulp.watch('/src/**/*.js', ['lint']); }); 回答1 从 gulp 任务覆盖源文件通常是一个坏主意。 任何打开这些文件的编辑器/IDE 可能会也可能不会正常处理。 通常最好将文件写入单独的dist文件夹中。 话虽如此,这里有两种可能的解决方案: 解决方案1 您需要停止gulp-jscs插件第二次运行并再次写入文件,从而防止您遇到无限循环。 要实现这一点,您所要做的就是将 gulp-cached 添加到您的lint任务中: var cache = require(
  • Jquery library not working after gulp bundle
    I am quite a newbie for gulp but i am trying to implement it in my this project. But looks like somewhere i mashup. I order the js files and was trying to get the bundle. But looks like jquery lib or something is not working. Here is my gulpfile.js code: 'use strict'; // include all necessary plugins in gulp file var gulp = require('gulp'); var order = require('gulp-order'); var concat = require('gulp-concat'); var sass = require('gulp-sass'); var sourcemaps = require('gulp-sourcemaps'); var uglify = require('gulp-uglify'); var rename = require('gulp-rename'); var imagemin = require('gulp
  • CSS 注入不适用于 Gulp + Browsersync(CSS inject not working with Gulp + Browsersync)
    问题 我是 gulp 的新手,我曾经用 grunt 工作,现在我在 gulp 上遇到了一些麻烦。 其中最重要的是自动 CSS 注入,这不起作用,而且很长时间后我不知道为什么。 谁能帮我? 还给我一些关于我的配置的建议? 提前致谢! 'use strict'; var gulp = require('gulp'), sass = require('gulp-sass'), autoprefixer = require('gulp-autoprefixer'), csso = require('gulp-csso'), jshint = require('gulp-jshint'), uglify = require('gulp-uglify'), imagemin = require('gulp-imagemin'), rename = require('gulp-rename'), clean = require('gulp-clean'), concat = require('gulp-concat'), notify = require('gulp-notify'), cache = require('gulp-cache'), sourcemaps = require('gulp-sourcemaps'), livereload = require('gulp
  • 使用Glup.JS优化JS、CSS、图片,压缩合并
    说在开头 前几天生病没去上班,在家里玩了一下Glup Gulp.js 是一个自动化构建工具,你可以用它在项目中自动执行常见任务,如:压缩优化JS、压缩CSS、压缩图片等。与Grunt相比,Gulp编写任务tasks更加简单,也更易于阅读和维护,插件高质而简洁。Gulp.js基于 Node.js 构建,利用 Node.js的Stream流,使项目可以快速构建并减少 IO 操作。 之前折腾过Express,做过一个简单的微博,最后连接数据库monogo时出了点问题,不了了之了。这是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架,它提供一系列强大的特性,帮助你创建各种 Web 和移动设备应用。 之前安装过程遇到了一点小问题特此记录一下。 是这样的安装完Express之后,执行Express xxx命令提示不是内部命令最后百度了一下有一篇博客http://jingyan.baidu.com/article/922554468a3466851648f419.html给出了解决方案。原因是:原来,最新express4.0版本中将命令工具分家出来了(项目地址:https://github.com/expressjs/generator),所以我们还需要安装一个命令工具正文下面进入正题,简单说一下如何安装,使用gulp1. 安装Gulp gulp的任务处理机制是
  • NPM 安装因 node-gyp 失败(NPM install fails with node-gyp)
    问题 我们在项目上运行“npm install”时遇到问题。 找不到某个文件: fatal error C1083: Cannot open include file: 'windows.h' 它似乎来自node-gyp模块: c:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\src\win_delay_lo ad_hook.c(13): 致命错误 C1083:无法打开包含文件:'windows.h':没有 suc h 文件或目录 [D:\ngs-frontend-next\node_modules\browser-sync\node_module s\socket.io\node_modules\engine.io\ node_modules\ws\node_modules\bufferutil\buil d\binding.sln] 这个 node-gyp 对我们来说似乎是一个永无止境的痛苦之源。 起初它抱怨它需要python,所以我们安装了它。 然后它抱怨它需要我们安装的 VCBuild(使用 .NET 2.0 SDK),现在我们有这个错误。 几乎就好像错误变得越来越模糊,感觉就像我们走上了一条错误的道路。 奇怪的是,我们团队中的其他人在运行 npm-install 时遇到了零问题。
  • npm install with error: `gyp` failed with exit code: 1
    I am try to install modules on Windows 10 using npm 5.6.0. When I enter npm install I get: gyp ERR! configure error gyp ERR! stack Error: `gyp` failed with exit code: 1 gyp ERR! stack at ChildProcess.onCpExit (C:\Users\xiaooming\Desktop\app\node_modules\node-gyp\lib\configure.js:336:16) gyp ERR! stack at emitTwo (events.js:126:13) gyp ERR! stack at ChildProcess.emit (events.js:214:7) gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:198:12) gyp ERR! System Windows_NT 10.0.16299 gyp ERR! command "D:\\Program Files\\nodejs\\node.exe" "C:\\Users\\xiaooming\\Desktop\
  • Gulp:仅在编辑导入的 SCSS 文件时编译更改的文件并编译父项(Gulp: only compile changed files AND compile parents when imported SCSS file is edited)
    问题 在工作中,我们曾经使用 Ruby 来编译 SCSS。 我在 PhpStorm 中将 Ruby 编译器设置为文件观察器,当我编辑另一个文件导入的部分时,与祖先文件对应的 CSS 文件被更新,没有任何大惊小怪。 我想让 Gulp 和 Libsass 以同样的方式工作。 我见过的大多数解决方案只是在一个项目发生变化时编译项目中的所有 SCSS 文件,但我们的项目有太多的 SCSS 无法接受。 gulp-cached 似乎是这个问题的一个很好的解决方案。 但是当我使用 gulp-cached 时,CSS 输出文件在我编辑部分时不会改变,只有它们的祖先 SCSS 文件。 我已经看到了一些 SCSS 依赖图解决方案,但我无法让它们正常工作,或者它们根本没有做我需要的。 我试过 gulp-sass-graph、gulp-sass-inheritance 和 gulp-sass-partials-imported。 这是我的 gulp 文件 const gulp = require('gulp'); const glob = require('glob'); const sass = require('gulp-sass'); const sourcemaps = require('gulp-sourcemaps'); const cached = require('gulp-cached'
  • 增量 gulp 少构建(Incremental gulp less build)
    问题 在我的办公室,我们使用 gulp 来构建我们的 less 文件。 我想改进构建任务,因为在我们最近工作的一个大型项目上构建花了一秒钟的时间。 这个想法是缓存文件并只传递更改的文件。 所以我从谷歌开始,发现了 javascript 的增量构建,我认为用更少的钱重写它们会很容易。 这是我开始的一个:https://github.com/gulpjs/gulp/blob/master/docs/recipes/incremental-builds-with-concatenate.md 经过几次不成功的尝试后,我最终得到了以下代码(使用最新的引导程序分发进行了测试): var gulp = require('gulp'); var less = require('gulp-less'); var concat = require('gulp-concat'); var remember = require('gulp-remember'); var cached = require('gulp-cached'); var fileGlob = [ './bootstrap/**/*.less', '!./bootstrap/bootstrap.less', '!./bootstrap/mixins.less' ]; gulp.task('less', function () {
  • 如何使用gulp压缩博客的html、css、image、js
    安装gulp依赖 首先安装gulp,执行以下命令: npm install gulp -g 安装完之后,怎么实现压缩我们的博客资源呢? 需要安装五个模块 gulp-htmlclean //清理html gulp-htmlmin //压缩html gulp-minify-css //压缩css gulp-uglify-es //压缩js, -es 代表可以处理es6语法 gulp-imagemin //压缩图片 注意 因为 gulp-imagemin 被墙,无法下载,需要使用 cnpm 或者 代理 进行下载 (这是一个大坑)。 本文是通过cnpm进行安装的,不过也有如何给npm设置代理进行安装的说明,任选其一即可。 安装cnpm 执行命令 npm install -g cnpm --registry=https://registry.npm.taobao.org 安装所需要我们压缩文件所需要的文件 cnpm install gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-uglify-es gulp-imagemin --save-dev 在我们的博客目录下建一个名为:gulpfile.js,如图: 复制以下代码到gulpfile.js中 var gulp = require('gulp'); var minifycss =
  • Gulp - CALL_AND_RETRY_LAST 分配失败 - 进程内存不足(Gulp - CALL_AND_RETRY_LAST Allocation failed - process out of memory)
    问题 在调用我的 gulp 任务之一时,我收到“ FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - process out of memory ”。 我在这个问题中发现我可以将参数传递给 node 以增加默认内存限制: node --max-old-space-size=2000 server.js 。 但是我怎么能告诉 gulp 将参数传递给 node.exe 呢? 这是我可以传递给 gulp 的标志列表,我希望找到 gulp 在为任务启动它时传递给 node 的标志。 导致问题的任务: var gulp = require('gulp'); var imagemin = require('gulp-imagemin'); gulp.task('imagemin', function() { var OUTPUT_FOLDER = '../Release_Prepared/'; var extensionsToOptimize = ['gif', 'jpeg', 'jpg', 'png', 'svg']; var glob = []; for(var i=0; extensionsToOptimize.length; i++){ glob.push(OUTPUT_FOLDER + '**/*.' +
  • nodejs 初学者学习先后顺序
    知识点 express +MongoDB 脚手架创建项目: 1/全局安装环境 npm install express -g 一个电脑只需安装一次(全局-g) 2/测试安装成功与否 express -h 3/安装npm install express-generator -g 4/脚手架创建项目 express -e project-name(项目名字) 5/安装package.json中的依赖,进入目录cd express,安装依赖npm install 6/启动npm start 浏览器输入localhost:3000 查看 mongoDB +下载软件运行(自行下载运行) 安装依赖包 +引入 npm install mongodb@2.2.33 --save-dev npm list mongodb --save-dev 连接 var MongoClient = require("mongodb").MongoClient; var url = "mongodb://localhost:27017/mydb"; (mydb数据库) MongoClient.connect(url,function(err,db){}; 前端ajax请求后端url服务器地址,路由不同,请求的接口地址不同 ajax:创建交互式网页应用的网页开发的技术 [特点:局部刷新] get封装: function
  • 使用gulp工具给Hexo博客加速
    title: 使用gulp工具给Hexo博客加速 categories: 开发工具gulp tags:Hexogulp abbrlink: 5605c146 date: 2019-12-01 10:24:48 前言:gulp工具通过压缩public文件中的html、css、js、image等静态资源,通过压缩这些静态资源,可以减少请求的数据量从而达到优化博客访问速度的目的。 1 安装 cnpm insatll gulp -g //全局安装,还需在需要使用gulp的项目中单独安装`npm install gulp` 或 `npm install --save-dev gulp` cnpm install gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-uglify gulp-imagemin --save //安装模块 2 配置 在博客根目录下创建一个gulpfile.js文件,填入代码 var gulp = require('gulp'); var minifycss = require('gulp-minify-css'); var uglify = require('gulp-uglify'); var htmlmin = require('gulp-htmlmin'); var htmlclean = require(