最近被安利了一款一键更新 npm package 的小工具,叫 npm-check-updates
,装完只需要在目录下运行 ncu -u
,然后就会自动把 package.json 中的包版本更新到最新版本号,然后再一键 npm install
就完成了依赖升级。
本来这个博客 hexo
也是好多年前起的,看到最近 hexo 发布了 5.0 大版本,冲动之下马上一键更新,结果发现自己之前定制的 gulp 压缩脚本也用不了,跑去官网一看,原来 gulp 更新的新版本的语法已经变了。
于是只好花了2个小时左右学习新版本的语法,重写了 hexo 的全站压缩脚本 gulpfile.js
。
先上官网:
再来个中文网快速入门:
还是和之前的脚本一样, gulp 任务中定义了4个压缩任务:
- HTML压缩
- JS压缩
- CSS压缩
- 图片压缩
用到的gulp插件:
1
| npm i -S gulp-csso gulp-htmlmin gulp-uglify gulp-imagemin
|
其中 gulp-imagemin
这个图片压缩插件需要额外安装几个工具插件,如果因为墙的原因安装不少,建议用 cnpm
安装。
如果出现运行不了,报错的情况,建议重新全局安装 gulp
可以解决问题。
整合之后的 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
| const { src, dest, parallel } = require('gulp') const minifyCSS = require('gulp-csso') const htmlmin = require('gulp-htmlmin') const uglify = require('gulp-uglify') const imagemin = require('gulp-imagemin')
function html() { return src('public/**/*.html') .pipe( htmlmin({ removeComments: true, collapseWhitespace: true, collapseBooleanAttributes: true, removeEmptyAttributes: true, removeScriptTypeAttributes: true, removeStyleLinkTypeAttributes: true, minifyJS: true, minifyCSS: true }) ) .pipe(dest('public')) }
function css() { return src('public/**/*.css').pipe(minifyCSS()).pipe(dest('public')) }
function js() { return src('public/**/*.js') .pipe(uglify()) .pipe(dest('public', { sourcemaps: false })) }
function img() { return src('public/**/*.{png,jpg,jpeg,gif}').pipe(imagemin()).pipe(dest('public')) }
exports.js = js exports.css = css exports.html = html exports.img = img exports.default = parallel(html, css, js, img)
|
默认的任务,运行 gulp
命令就可以顺序执行 html, css, js 和 img 任务。