-
Notifications
You must be signed in to change notification settings - Fork 2
/
gulp-compress-img.html
190 lines (155 loc) · 8.62 KB
/
gulp-compress-img.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Cache-Control" content="no-siteapp">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1, minimum-scale=1, maximum-scale=1">
<meta name="referrer" content="never">
<meta name="robots" content="index,follow">
<link rel="shortcut icon" href="/favicon.png?v=198964">
<link rel="apple-itouch-icon" href="/favicon.png?v=198964">
<link href="/bundle/index.min.css" rel="stylesheet">
<link href="https://fonts.loli.net/css?family=Merriweather:300,700,700italic,300italic|Open+Sans:700,400" rel="stylesheet">
<link href="https://cdn.staticfile.org/prism/1.16.0/themes/prism.min.css" rel="stylesheet">
<link href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script>
function ensureDate(e){return"object"!=typeof e&&(e=new Date(e)),e}function dateFormat(e,t){void 0===t&&(t=e,e=ensureDate());let n={M:(e=ensureDate(e)).getMonth()+1,d:e.getDate(),h:e.getHours(),m:e.getMinutes(),s:e.getSeconds(),q:Math.floor((e.getMonth()+3)/3),S:e.getMilliseconds()},r=new RegExp("([yMdhmsqS])+","g");return t=t.replace(r,function(t,r){let u=n[r];if(void 0!==u)return t.length>1&&(u=(u="0"+u).substring(u.length-2)),u;if("y"===r){return(e.getFullYear()+"").substring(4-t.length)}return t})}
</script>
<meta name="keywords" content="使用 gulp 压缩图片,Gulp,">
<meta name="description" content="使用 gulp 压缩图片,Gulp,">
<meta name="author" content="江矿先森.">
<title>使用 gulp 压缩图片</title>
<link href="/bundle/iconfont.css" rel="stylesheet">
<link href="/bundle/reward.css" rel="stylesheet">
<script src='/bundle/av.min.js'></script>
<script src='/bundle/valine.min.js'></script>
</head>
<body>
<article class="container">
<header class="header-wrap asset">
<nav class="main-nav">
<ul class="menu vertical naive">
<li class="menu-item"><a href="/">Home</a></li>
<li class="menu-item"><a href="/archive.html">Archive</a></li>
<li class="menu-item"><a href="/tag.html">Tag</a></li>
<li class="menu-item"><a href="/atom.xml">RSS</a></li>
</ul>
</nav>
<div class="bgs" style="background-image: url(https://s11.ax1x.com/2024/02/04/pFlmAII.jpg);"></div>
<div class="vertical">
<div class="header-wrap-content inner">
<h3 class="title">Stay before every beautiful thoughts.</h3>
<h3 class="subtitle">Just be nice, always think twice!</h3>
</div>
</div>
</header>
<article class="main article">
<h1 class="title">使用 gulp 压缩图片</h1>
<section class="info">
<span class="avatar" style="background-image: url(https://s11.ax1x.com/2024/02/04/pFlmVit.jpg);"></span> <a class="name" href="javascript:;">江矿先森.</a>
<span class="date"><script>document.write(dateFormat( 1473564234 *1000, 'yyyy-MM-dd'))</script></span>
<span class="tags"><a class="tages" href="/tag/Gulp/index.html">Gulp</a></span>
</section>
<article class="content"><p>压缩 图片文件可降低文件大小，提高图片加载速度。</p>
<p>找到规律转换为 gulp 代码</p>
<hr />
<p>找到 <code>images/</code> 目录下的所有文件，压缩它们，将压缩后的文件存放在 <code>dist/images/</code> 目录下。</p>
<h2>gulp 代码</h2>
<p><strong>一、安装 gulp-imagemin</strong> 模块</p>
<p>提示：你需要使用命令行的 <code>cd</code> 切换至对应目录再进行安装操作和 gulp 启动操作。</p>
<p>在命令行输入</p>
<pre><code class="language-bash">npm install gulp-imagemin
</code></pre>
<p>安装成功后你会看到如下信息：(安装时间可能会比较长)</p>
<pre><code class="language-bash">gulp-imagemin@2.2.1 node_modules/gulp-imagemin
├── object-assign@2.0.0
├── pretty-bytes@1.0.3 (get-stdin@4.0.1)
├── chalk@1.0.0 (escape-string-regexp@1.0.3, ansi-styles@2.0.1, supports-color@1.3.1, has-ansi@1.0.3, strip-ansi@2.0.1)
├── through2-concurrent@0.3.1 (through2@0.6.3)
├── gulp-util@3.0.4 (array-differ@1.0.0, beeper@1.0.0, array-uniq@1.0.2, lodash._reevaluate@3.0.0, lodash._reescape@3.0.0, lodash._reinterpolate@3.0.0, replace-ext@0.0.1, minimist@1.1.1, vinyl@0.4.6, through2@0.6.3, multipipe@0.1.2, lodash.template@3.3.2, dateformat@1.0.11)
└── imagemin@3.1.0 (get-stdin@3.0.2, optional@0.1.3, vinyl@0.4.6, through2@0.6.3, stream-combiner@0.2.1, concat-stream@1.4.7, meow@2.1.0, vinyl-fs@0.3.13, imagemin-svgo@4.1.2, imagemin-optipng@4.2.0, imagemin-jpegtran@4.1.0, imagemin-pngquant@4.0.0, imagemin-gifsicle@4.1.0)
</code></pre>
<p><strong>二、创建 <code>gulpfile.js</code> 文件编写代码</strong></p>
<p>在对应目录创建 <code>gulpfile.js</code> 文件并写入如下内容：</p>
<pre><code class="language-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'])
</code></pre>
<p>你可以访问 <a href="https://github.com/sindresorhus/gulp-imagemin">gulp-imagemin</a> 以查看更多用法。</p>
<hr />
<p><strong>三、在 <code>images/</code> 目录下存放图片</strong></p>
<p>在 <code>gulpfile.js</code> 对应目录创建 <code>images</code> 文件夹，并在 <code>images/</code> 目录下存放图片。</p>
<hr />
<p><strong>四、运行 gulp 查看效果</strong></p>
<p>在命令行输入 <code>gulp</code> +回车</p>
<p>你将看到命令行出现如下提示</p>
<pre><code>gulp
[18:10:42] Using gulpfile ~/Documents/code/gulp-book/demo/chapter4/gulpfile.js
[18:10:42] Starting 'images'...
[18:10:42] Finished 'images' after 5.72 ms
[18:10:42] Starting 'auto'...
[18:10:42] Finished 'auto' after 6.39 ms
[18:10:42] Starting 'default'...
[18:10:42] Finished 'default' after 5.91 μs
[18:10:42] gulp-imagemin: Minified 3 images (saved 25.83 kB - 5.2%)
</code></pre>
</article>
<section class="author">
<div class="avatar" style="background-image: url(https://s11.ax1x.com/2024/02/04/pFlmVit.jpg);"></div>
<a class="name" href="javascript:;">江矿先森.</a>
<div class="intro">前(台)端(菜), 喜欢瞎折腾新技术. 乜野都识少少, 先可以扮代表:p</div>
</section>
<section class="social">
<a href="https://github.com/joname1" target="_blank">
<i class="iconfont i-github"></i>
</a>
<a href="javascript:alert('你电脑中了不知名的病毒, 并抛出了警告 atob(“d3hJZDogZXJyb3IuZXJyb3I=”)')" target="_blank">
<i class="iconfont i-wechat"></i>
</a>
<a href="https://www.zhihu.com/topic/19550901" target="_blank">
<i class="iconfont i-zhihu"></i>
</a>
<a href="javascript:alert('对方不想跟你讲话, 并向你扔来一段乱码 atob(“ZXJyb3JAZXJyb3IuZXJyb3I=”)')" target="_blank">
<i class="iconfont i-email"></i>
</a>
</section>
<div id="comment"></div>
</article>
</article>
<footer class="footer clearfix">
<span class="copyright">
<script>
document.write(new Date().getFullYear());
</script> <i class="fa fa-copyright"></i> Made with <i class="fa fa-heart"></i> using <joname />
<span id="runtime_span"></span>
</span>
</footer>
<script src="/bundle/index.min.js"></script>
<script src="https://cdn.staticfile.org/prism/1.16.0/prism.min.js"></script>
<script>
new Valine({el: '#comment',appId: 'PieJ3iHvVTJ9C5yBudK6sxaT-MdYXbMMI',appKey: 'Yt25unM4vc9wzBvC2lL20Frc',placeholder: 'ヾﾉ≧∀≦)o来啊, 快活啊, 反正有大把时光!!',path: window.location.pathname,avatar: 'retro',pageSize: 10,guest_info: ['nick', 'mail'],lang: 'en'});
</script>
</body>
</html>