⚒️自动化构建工具Gulp使用心得

tags
dev
frontend
javascript
type
Post
summary
status
Published
slug
automated-build-tool-Gulp-usage
date
Feb 12, 2019
现由于未将静态内容压缩,浏览的体验十分差,waterfall都涨到快他妈的一分钟了。并且引用的插件,以及自己写的一些布局逻辑,源码就老老实实地暴露在外,十分不安全。
因此使用自动化工具对前端的静态页面进行了构建。果不其然,压缩完的静态页面体积降到了原先的四分之一,全内容3.5MB左右,访问体验也变得很好了。

Gulp的使用

我没有特别多的使用前端构建工具的经历,讲道理,用Vue的很多时候它自己从CLI中生成的页面就压缩过了,Vuepress在生成页面的时候也很利索,出来的代码就是经过Webpack处理过的。第一反应是用Gulp,毕竟比较成熟了。
但是这个博客的静态页面使用了Hexo开发, 所以构建就不那么自动了。
将gulpfile.js放置于博客的根目录下,与package.json 同目录
要先用npm installgulpfile.js中声明的那些依赖安装好
下面是gulpfile.js中主要的依赖
var gulp = require('gulp'); var minifycss = require('gulp-clean-css'); var uglify = require('gulp-uglify'); var htmlmin = require('gulp-htmlmin'); var htmlclean = require('gulp-htmlclean'); var imagemin = require('gulp-imagemin'); var del = require('del'); var runSequence = require('run-sequence'); var Hexo = require('hexo'); var babel = require('babel-core');
这些依赖在安装进项目的node_module目录下后,在package.json中注册进dependencies。记得要在终端里npm update一下。之后就是使用pipe管道对这些个静态文件进行构建了。
// 压缩public目录下的所有css gulp.task('minify-css', function() { return gulp.src('./public/**/*.css') .pipe(minifycss({ compatibility: 'ie8' })) .pipe(gulp.dest('./public')); }); // 压缩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')) }); // 压缩public目录下的所有js gulp.task('minify-js', function() { return gulp.src('./public/**/*.js') .pipe(uglify()) .pipe(gulp.dest('./public')); });
一定要在使用渲染引擎生成页面之后再用,不要忘了,或者像我一样傻呵呵就在本地Server调试下就用开了。很无语的错误,还浪费我半小时查错。
也可以将Hexo渲染的CLI命令一并放入管道函数中执行。这里要引用一下Hexo的API。
// 利用Hexo API 来生成博客内容,效果和在命令行运行: hexo g 一样 var hexo = new Hexo(process.cwd(), {}); gulp.task('generate', function(cb) { hexo.init().then(function() { return hexo.call('generate', { watch: false }); }).then(function() { return hexo.exit(); }).then(function() { return cb() }).catch(function(err) { console.log(err); hexo.exit(err); return cb(err); }) })
中间还有一个小坑,就是引用了很多的插件,导致js没有统一的语法规则,需要用babel引入旧的ES5语法规则好让uglify能正常工作。

Hexo的构建插件Hexo-neat的使用

我在卡在该如何让Gulp成功识别ES5语法的时候,好奇搜了一下,没想到真的有这么个现成的玩意儿。稍加了解,这个插件就是对Gulp中那些构建工具的封装,而且完美兼容Hexo,在 hexo generate的时候就能实现压缩、丑化代码的工作了。
首先在项目的dev目录中执行
npm install hexo-neat --save
Hexo的默认_config.yml中添加如下代码:
# hexo-neat # 博文压缩 neat_enable: true # 压缩html neat_html: enable: true exclude: # 压缩css neat_css: enable: true exclude: - '**/*.min.css' # 压缩js neat_js: enable: true mangle: true output: compress: exclude: - '**/main.js'
其中每一个pipeexclude字段中表示忽略对应目录匹配的文件,我这里有一些已经压缩过的,就忽略了。
保存设置后直接hexo g,再看看那些文件。嗯,很丑,很压缩,根本没法抄,完美。

备注

  • 有的时候构建工具可能会让一些js脚本失效,所以也不是越压缩越好了。
  • 关于图片的压缩,我个人认为还是得视图片用途来定,不要用构建工具一刀切。要是像首页那样的大图压缩比例和页面中其他小图压缩一致,那首页还能看?一般来讲,.jpg压缩个30%没啥大影响,至少不会严重失真。

lucky_bricks © 2018 - 2024