jekyll 资源文件压缩
一、jekyll-minifier
1、安装
- 命令行下使用以下命令安装gem
gem install jekyll-minifier
- 在
Gemfile中group :jekyll_plugins do下添加一行：
gem "jekyll-minifier"
- 在
_config.yml的plugins下添加一行：
- jekyll-minifier
- 重启服务
即可看到网站HTML、Javascript和CSS代码均已被压缩，且对JS代码做了uglify。
2、配置
可以在_config.yml中添加minifier相关配置：
jekyll-minifier:
exclude: '*.html'
- exclude
配置不想被压缩的文件。(Exclude files from processing - file name, glob pattern or array of file names and glob patterns)
- HTML压缩的属性配置
也是配置在_config.yml中的jekyll-minifier下面，例如：
jekyll-minifier:
compress_css: false
compress_javascript: false
上面的两个配置指定了在压缩HTML时不压缩HTML里的CSS和Javascript。
二、jekyll-asset_bundler
由于jekyll-minifier并不能将多个js或css文件打包到一起，因此使用jekyll-asset_bundler。
1、安装
- 安装
asset_bundler
下载或复制asset_bundler.rb到_plugins目录下
- 安装
yui-compressor和(或)closure-compiler
在asset_bundler的配置中，需要指定对js或css的压缩方式，如果指定为yui或closure时分别需要安装：yui-compressor和closure-compiler。
使用以下命令安装：
gem install yui-compressor
gem install closure-compiler
安装完成后，在Gemfile中添加：
gem 'yui-compressor'
gem 'closure-compiler'
2、使用
注意：下面代码块中的’{‘与’%’之间是没有空格的
- 在需要引入js的位置按如下格式书写：
{ % bundle % } [/js/main.js, /js/somethingelse.js] { % endbundle % }
或
{ % bundle % }
- /js/main.js
- /js/somethingelse.js
{ % endbundle % }
- 也可以使用远程服务器的文件
{ % bundle % }
- http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js
- //cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.1/underscore-min.js
- https://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js
- /js/my_local_javascript.js
{ % endbundle % }
远程服务器文件被缓存在_asset_bundler_cache目录中。
- 或者使用通配符方式打包全部文件
{ % bundle_glob % }
- /js/*.js
- /css/*.css
{ % endbundle_glob % }
此种方式文件会按字母数字的顺序被引入，对于有加载顺序要求的文件可能会出问题。
3、配置
我的配置如下：
asset_bundler:
compress:
js: 'closure'
css: 'yui'
base_path: /bundles/
bundle_name: 'all'
- compress
指定对js或css使用的压缩方式，此处我用 Google Closure Compiler 压缩js，用 YUI Compressor 压缩css。
- base_path
打包后文件生成的位置
- bundle_name
打包后的文件名，默认值为false，表示使用内容的MD5 hash作为文件名。
- markup_templates
可以通过此属性重新定义引入文件的script和link标签
- dev
dev为true时启用dev模式，此模式下不会打包，默认为false。
使用jekyll server或jekyll --watch启动服务时默认为dev模式；如果在_config.yml中设置dev为true时也为dev模式。
但使用jekyll server --no-watch启动之后，依然不会打包，看了下asset_bundler.rb的源码：
# Let's assume that when flag 'watch' or 'serving' is enabled, we want dev mode
if context.registers[:site].config['serving'] || context.registers[:site].config['watch']
ret_config['dev'] = true
end
是由于此处context.registers[:site].config['serving']为true导致的，但我没找到如何设置此属性为false的方法（在_config.yml中设置：serving: false无效），因此在我的代码中将这个判断去掉了：
# Let's assume that when flag 'watch' or 'serving' is enabled, we want dev mode
if context.registers[:site].config['watch'] == true
ret_config['dev'] = true
end
之后再使用jekyll server --no-watch启动就可以正常打包了，使用jekyll server启动则加载原来的单个文件。