正文

续gulp使用入门三步压缩图片

thomaspha  thomaspha  2022-08-05  313

关键词：

gulp 压缩图片

压缩图片文件可降低文件大小，提高图片加载速度。

找到规律转换为 gulp 代码

规律

找到 images/ 目录下的所有文件，压缩它们，将压缩后的文件存放在 dist/images/ 目录下。

gulp 代码

一、安装 gulp-imagemin 模块

提示：你需要使用命令行的 cd 切换至对应目录再进行安装操作和 gulp 启动操作。

在命令行输入 npm install gulp-imagemin

安装成功后你会看到如下信息：(安装时间可能会比较长取决于网络)

npm install gulp-imagemin
npm WARN deprecated [email protected]: cross-spawn no longer requires a build toolchain, use it instead!

> [email protected] postinstall D:wampwwwBootsDataTable ode_modulesgifsicle
> node lib/install.js

√ gifsicle pre-build test passed successfully

> [email protected] postinstall D:wampwwwBootsDataTable ode_modulesjpegtran-bin
> node lib/install.js

√ jpegtran pre-build test passed successfully

> [email protected] postinstall D:wampwwwBootsDataTable ode_modulesoptipng-bin
> node lib/install.js

npm WARN [email protected] No description
npm WARN [email protected] No repository field.

二、创建 gulpfile.js 文件编写代码

在对应目录创建 gulpfile.js 文件并写入如下内容：

// 获取 gulp
var gulp = require(‘gulp‘);

// 获取 gulp-imagemin 模块
var imagemin = require(‘gulp-imagemin‘)

// 压缩图片任务
// 在命令行输入 gulp images 启动此任务
gulp.task(‘images‘, function () {
// 1. 找到图片
gulp.src(‘images/*.*‘)
// 2. 压缩图片
.pipe(imagemin({
progressive: true
}))
// 3. 另存图片
.pipe(gulp.dest(‘dist/images‘))
});

// 在命令行使用 gulp auto 启动此任务
gulp.task(‘auto‘, function () {
// 监听文件修改，当文件被修改则执行 images 任务
gulp.watch(‘images/*.*)‘, [‘images‘])
});

// 使用 gulp.task(‘default‘) 定义默认任务
// 在命令行使用 gulp 启动 images 任务和 auto 任务
gulp.task(‘default‘, [‘images‘, ‘auto‘])
你可以访问 gulp-imagemin 以查看更多用法。

三、在 images/ 目录下存放图片

在 gulpfile.js 对应目录创建 images 文件夹，并在 images/ 目录下存放图片。

你可以访问 https://github.com/nimojs/gulp-book/tree/master/demo/chapter4/images/ 下载示例图片

四、运行 gulp 查看效果

在命令行输入 gulp +回车

你将看到命令行出现如下提示

gulp
[11:07:37] Using gulpfile D:wampwwwBootsDataTablegulpfile.js
[11:07:37] Starting ‘images‘...
[11:07:37] Finished ‘images‘ after 3.57 ms
[11:07:37] Starting ‘auto‘...
[11:07:37] Finished ‘auto‘ after 57 ms
[11:07:37] Starting ‘default‘...
[11:07:37] Finished ‘default‘ after 16 μs
[11:07:38] gulp-imagemin: Minified 20 images (saved 12.48 kB - 24.2%)

gulp入门及简单使用

...nt、Webpack（何其复杂！）。所以我们先来个简单的。使用首先，使查看详情

gulp的使用以及gulp新手入门教程

.../22/gulp-for-beginners/Gulp是一个自动化工具，前端开发者可以使用它来处理常见任务：搭建web服务器文件保存时自动重载浏览器使用预处理器如Sass、LESS优化资源，比如压缩CSS、JavaScript、压缩图片当然Gulp能做的远不止这些。如果你... 查看详情

使用gulp压缩图片

请务必理解如下章节后阅读此章节：安装Node和gulp使用gulp压缩JS压缩图片文件可降低文件大小，提高图片加载速度。找到规律转换为gulp代码规律找到 images/ 目录下的所有文件，压缩它们，将压缩后的文件存放在 dist/ima... 查看详情

gulp入门(代码片段)

...端代码部署工具，看了官方文档和一些资料，学会了怎么使用gulp进行压缩，特地写个简单的入门操作指南，加深自己的印象。gulp能够实现很多功能，在这里我就以自己使用的压缩js文件为例子进行介绍1.安装nmpNPM是随同NodeJS一起... 查看详情

js那些事儿——gulp的入门使用

前言新人使用gulp的一个记录。首先对于第一个新事物，我会问gulp这是什么？答：gulp是一个自动化构建工具，它可以做一些自动化的任务，比如:检查Javascript编译Sass（或Less之类的）文件合并Javascript压缩并重命名合并后的Javascript... 查看详情

使用gulp构建一个项目

...psgulp-autoprefixer您还可以直接学习以下模块：安装Node和gulp使用gulp压缩JS使用gulp压缩CSS使用gulp压缩图片使用gulp编译LESS使用gulp编译Sass使用gulp构建一个项目并将之前所有章节的内容组合起来编写一个前端项目所需的gulp代码。若你... 查看详情

gulp入门(代码片段)

gulp的入门级教程

...站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。gulp是基于Nodejs的自动任务运行器，她能自动化地完成javascript/coffee/sa... 查看详情

glup快速入门整理(代码片段)

node.js使用教程-2.gulp打包构建入门与使用(代码片段)

...代码进行编译压缩。环境准备gulp是基于node运行的，使用npm全局安装npminstall-ggulp安装gulp依赖包, 查看详情

gulp教程之静态资源压缩(代码片段)

...lify6.4gulp-imagemin7总结本文简单的介绍如何压缩静态资源及使用到的对于插件，下一篇介绍使用gulp如何让文件自动添加版本号。查看详情

gulp入门

gulp是基于Nodejs的自动化任务工具，类似java中的ant，结合相关插件可方便的完成javascript/coffee/sass/less/html/image/css等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听... 查看详情

如何使用gulp？(代码片段)

Gulp 是一个自动化工具，前端开发者可以使用它来处理常见任务：搭建web服务器文件保存时自动重载浏览器使用预处理器如Sass、LESS优化资源，比如压缩CSS、JavaScript、压缩图片当然Gulp能做的远不止这些。如果你够疯狂，你甚... 查看详情

gulp插件

gulp插件*.安装命令：cnpminstall--save-devgulp-concatgulp-cssnano1.合并/js压缩：gulp-concat/gulp-uglify2.css压缩：gulp-cssnano3.html压缩：gulp-htmlmin 4.雪碧图：spriter5.图片压缩：imgmin 查看详情

使用gulp进行代码压缩

...提高程序员的开发效率。因为gulp依赖于node环境，所以想使用gulp必须先安装好node。另外gulp本身是一个轻量化内核，自身拥有的api不多，所以很多功能查看详情

gulp入门教程

使用gulp合并压缩打包，实时监控文件，实现本地server

今天不讲webpack，就说说gulp是怎么进行压缩合并打包　首先你的安装gulp：npminstallgulp-g--save-dev然后最基本的你因该知道gulp的四个方法，gulp.src：读取文件gulp.pipe：将文件流输入到指定的文件目录gulp.task：建立gulp任务，例如合并，... 查看详情

关于gulp

今天初次尝试了一下自动化构建工具,打包/压缩,找了一些入门教程,感觉入门还算简单,对日后学习webpack会有一定帮助!首页都是基于nodeJS，然后安装gulp及相关插件，然后配置相关文件。结果如下：查看详情