现在你可以鼠标右键单击空白处，选择查看源代码。
你会发现本页面只有一行代码。把网页文件中的空格换行和注释等删除，可以在一定程度上减小网页的文件大小，进而加快访问速度，这就是网页压缩。
介绍
什么是Gulp
gulp.js是一种基于流的，代码优于配置的新一代构建工具.
Gulp和Grunt类似。但相比于 Grunt 的频繁的 I/O 操作，Gulp 的流操作，能更快地完成构建
Gulp特性
使用方便
通过代码优于配置的策略，Gulp可以让简单的任务简单，复杂的任务更可管理。
构建快速
通过流式操作，减少频繁的 IO 操作，更快地构建项目。
插件高质
Gulp 有严格的插件指导策略，确保插件能简单高质的工作。
易于学习
少量的API，掌握Gulp可以毫不费力。构建就像流管道一样，轻松加愉快。
Gulp安装
Gulp是基于Node.js的，故要首先安装 Node.js。
npm install -g gulp
然后按以下清单文件安装
1
2
3
4
5
6
| gulp
gulp-htmlclean
gulp-htmlmin
gulp-minify-css
gulp-clean-css
gulp-uglify
|
方法是同样的,npm install xxx --save，xxx即为清单列表文件名
其中gulp是工程的核心程序，Gulp采用插件方式进行工作，下面的5个文件就是基于Gulp的插件.Gulp插件列表
使用Gulp优化Hexo
建立gulpfile.js
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
| var gulp = require('gulp');
var cleancss = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
// css
gulp.task('minify-css', () => {
return gulp.src(['./public/**/*.css','!./public/**/*.min.css'])
.pipe(cleancss())
.pipe(gulp.dest('./public'));
});
// html
gulp.task('minify-html', function() {
return gulp.src('./public/**/*.html')
.pipe(htmlclean())
.pipe(htmlmin({
removeComments: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
}))
.pipe(gulp.dest('./public'))
});
// js
gulp.task('minify-js', function() {
return gulp.src(['./public/**/*.js','!./public/assets/js/*.js'])
.pipe(uglify())
.pipe(gulp.dest('./public'));
});
//
gulp.task('default', [
'minify-html','minify-css','minify-js'
]);
|
运行
要运行gulp任务，只需切换到存放gulpfile.js文件的目录，然后在终端中执行gulp命令就行了，gulp后面可以加上要执行的任务名，例如gulp task1，如果没有指定任务名，则会执行任务名为default的默认任务。