现在你可以鼠标右键单击空白处,选择查看源代码。

你会发现本页面只有一行代码。把网页文件中的空格换行和注释等删除,可以在一定程度上减小网页的文件大小,进而加快访问速度,这就是网页压缩。

介绍

什么是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的默认任务。