Gulp-Plgues

实用的Gulp插件,帮助你的博客更加精简,快速。

  • 易于使用

    通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理。

  • 构建快速

    利用 Node.js 流的威力,你可以快速构建项目并减少频繁的 IO 操作。

  • 插件高质

    Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。

  • 易于学习

    通过最少的 API,掌握 Gulp 毫不费力,构建工作尽在掌握:如同一系列流管道。

安装

先拷贝/创建如下文件 package.json

package.json
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
{
"name": "hexo-site",
"version": "0.0.0",
"private": true,
"hexo": {
"version": "3.4.0"
},
"dependencies": {
"browser-sync": "^2.18.13",
"hexo": "^3.2.0",
"hexo-deployer-git": "^0.3.0",
"hexo-generator-archive": "^0.1.4",
"hexo-generator-category": "^0.1.3",
"hexo-generator-index": "^0.2.1",
"hexo-generator-index2": "0.0.1",
"hexo-generator-searchdb": "^1.0.7",
"hexo-generator-tag": "^0.2.0",
"hexo-renderer-ejs": "^0.2.0",
"hexo-renderer-marked": "^0.2.10",
"hexo-renderer-stylus": "^0.3.1",
"hexo-server": "^0.2.2"
},
"devDependencies": {
"gulp-asset-rev": "^0.0.15",
"gulp-clean-css": "^3.9.0",
"gulp-concat": "^2.6.1",
"gulp-debug": "^3.1.0",
"gulp-htmlclean": "^2.7.15",
"gulp-htmlmin": "^3.0.0",
"gulp-if": "^2.0.2",
"gulp-changed": "^3.1.0",
"gulp-make-css-url-version": "^0.0.13",
"gulp-modify-css-urls": "^0.2.2",
"gulp-plumber": "^1.1.0",
"gulp-uglify": "^3.0.0",
"gulp-useref": "^3.1.2",
"gulp-util": "^3.0.8",
"hexo-deployer-git": "^0.3.1",
"hexo-encrypt": "^0.5.1",
"hexo-generator-json-content": "^3.0.1",
"hexo-generator-search": "^2.1.1",
"hexo-generator-searchdb": "^1.0.8",
"hexo-server": "^0.2.2",
"run-sequence": "^2.2.0"
}
}

然后输入

1
2
npm config set registry https://registry.npm.taobao.org
npm install

或者

1
2
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install

会直接安装 package.json 文件中的插件,或者可以手动一个一个安装,方式如下:

1
2
3
4
5
6
7
npm install --save-dev gulp-concat
npm install --save-dev gulp-clean-css
npm install --save-dev gulp-uglify
npm install --save-dev gulp-htmlmin
npm install --save-dev gulp-htmlclean
npm install --save-dev gulp-imagemin
...

  • gulp-concat–合并javascript文件,减少网络请求文档
  • gulp-clean-css–压缩css文件,减小文件大小,并给引用url添加版本号避免缓存文档
  • gulp-uglify–压缩javascript文件,减小文件大小文档
  • gulp-htmlmin–压缩html,可以压缩页面javascript、css,去除页面空格、注释,删除多余属性等操作文档
  • gulp-htmlclean–清理html中的部分内容
  • gulp-imagemin–压缩 png/jpg/git/svg 格式图片文件文档
  • browser-sync–保持多浏览器、多设备同步、在前端开发是非常有用,可谓是必备组件。文档
  • hexo-encrypt– 加密网页内容,输入密码可查看文档 github

配置

根目录下新建文件:gulpfile.js

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
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
/* npm install 超时请使用:(两条命令在当前文件目录下执行)
npm config set registry https://registry.npm.taobao.org
npm install
或者:
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install
*/
var gulp = require('gulp');
var debug = require('gulp-debug');
var cleancss = require('gulp-clean-css'); //css压缩组件
var cssversion = require('gulp-make-css-url-version'); //css资源添加版本号
var uglify = require('gulp-uglify'); //js压缩组件
var htmlmin = require('gulp-htmlmin'); //html压缩组件
var htmlclean = require('gulp-htmlclean'); //html清理组件
var assetRev = require('gulp-asset-rev'); //版本控制插件
var runSequence = require('run-sequence'); //异步执行组件
var changed = require('gulp-changed'); //文件更改校验组件
var gulpif = require('gulp-if') //任务 帮助调用组件
var plumber = require('gulp-plumber'); //容错组件(发生错误不跳出任务,并报出错误内容)
var isScriptAll = true; //是否处理所有文件,(true|处理所有文件)(false|只处理有更改的文件)
var isDebug = true; //是否调试显示 编译通过的文件
// 压缩js文件
gulp.task('compressJs', function () {
var option = {
// preserveComments: 'all',//保留所有注释
mangle: true, //类型:Boolean 默认:true 是否修改变量名
compress: true //类型:Boolean 默认:true 是否完全压缩
}
return gulp.src(['./_Web/**/*.js','!./_Web/**/*.min.js']) //排除的js
.pipe(gulpif(!isScriptAll, changed('./_Web')))
.pipe(gulpif(isDebug,debug({title: 'Compress JS:'})))
.pipe(plumber())
.pipe(uglify(option)) //调用压缩组件方法uglify(),对合并的文件进行压缩
.pipe(gulp.dest('./_Web')); //输出到目标目录
});
// 压缩css文件
gulp.task('compressCss', function () {
return gulp.src('./_Web/**/*.css')
.pipe(gulpif(!isScriptAll, changed('./_Web')))
.pipe(gulpif(isDebug,debug({title: 'Compress CSS:'})))
.pipe(plumber())
.pipe(cleancss({rebase: false}))
.pipe(gulp.dest('./_Web'));
});
// 压缩html文件
gulp.task('compressHtml', function () {
var cleanOptions = {
protect: /<\!--%fooTemplate\b.*?%-->/g, //忽略处理
unprotect: /<script [^>]*\btype="text\/x-handlebars-template"[\s\S]+?<\/script>/ig //特殊处理
}
var minOption = {
collapseWhitespace: true, //压缩HTML
collapseBooleanAttributes: true, //省略布尔属性的值 <input checked="true"/> ==> <input />
removeEmptyAttributes: true, //删除所有空格作属性值 <input id="" /> ==> <input />
removeScriptTypeAttributes: true, //删除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
removeComments: true, //清除HTML注释
minifyJS: true, //压缩页面JS
minifyCSS: true, //压缩页面CSS
minifyURLs: true //替换页面URL
};
return gulp.src('./_Web/**/*.html')
.pipe(gulpif(isDebug,debug({title: 'Compress HTML:'})))
.pipe(plumber())
.pipe(htmlclean(cleanOptions))
.pipe(htmlmin(minOption))
.pipe(gulp.dest('./_Web'));
});
// 默认任务
gulp.task('default', function () {
runSequence.options.ignoreUndefinedTasks = true;
runSequence('compressHtml','compressCss','compressJs');
});

这里注意 上面配置文件中出现的 地址需要自行替换 ,将./_web/ 替换为 ./你的工程上传目录/ ,这才算修改完毕了。
请查看根目录下配置文件:_config.ymlpublic_dir 配置,我的如下

_config.yml
...
public_dir: _Web
...

执行

准备工作都做好了,执行命令:

  1. 编译工程

    hexo -g
  2. 执行 构建工具

    gulp
    gulp default
  3. 上传工程

    hexo -d
  • 本文作者: zhuzhuxia
  • 本文链接: https://www.ofind.cn/blog/HEXO/Gulp-Plgues.html
  • 温馨提示: 由于原创文章,会经常更新知识点以及修正一些错误,因此转载请保留原出处, 方便溯源,避免陈旧错误知识的误导,同时有更好的阅读体验。
如果觉得我的文章对您有用,请随意打赏。您的支持将是我继续创作的动力!