npm script 工作流(十二)构建流水线
2020-08-06 本文已影响0人
ZoranLee
构建内容
- 源代码预编译:比如 less、sass、typescript;
- 图片优化、雪碧图(CSS Sprite)生成;
- JS、CSS 合并、压缩;
- 静态资源加版本号和引用替换;
- 静态资源传 CDN 等。
项目目录结构
client
├── images
│ └── schedule.png
├── index.html
├── scripts
│ └── main.js
└── styles
└── main.css
添加构建过程
构建目录
{
"prebuild": "rm -rf dist && mkdir -p dist/{images,styles,scripts}"
}
准备脚本目录
- 使用scripty把脚本剥离到单独的文件中
mkdir scripts/build
touch scripts/build.sh
touch scripts/build/{images,styles,scripts}.sh
chmod -R a+x scripts
- scripts目录如下:
scripts
├── build
│ ├── hash.sh
│ ├── images.sh
│ ├── scripts.sh
│ └── styles.sh
├── build.sh
图片构建过程
- 图片构建的经典工具:imagemin:https://github.com/imagemin/imagemin
- 安装
npm i imagemin-cli -D
# npm install imagemin-cli --save-dev
# yarn add imagemin-cli -D
- scripts/build/images.sh添加内容
imagemin client/images/* --out-dir=dist/images
- package.json 添加
{
"build:images": "scripty"
}
- 运行脚本,看dist 目录的变化
npm run prebuild && npm run build:images
样式构建过程
使用 less,用 less 官方库自带的命令行工具 lessc
使用 sass 的直接使用 node-sass
使用 cssmin 来完成代码预压缩
- 安装依赖
npm i cssmin -D
# npm install cssmin --save-dev
# yarn add cssmin -D
- scripts/build/styles.sh 添加如下内容
for file in client/styles/*.css
do
lessc $file | cssmin > dist/styles/$(basename $file)
done
- package.json 中添加
{
"build:styles": "scripty"
}
- 运行
npm run prebuild && npm run build:styles
JS 构建
ES6 编写 JS 代码,所以需要 uglify-es 来进行代码压缩
不使用 ES6,可以直接使用 uglify-js 来压缩
- 安装依赖
npm i uglify-es -D
# npm install uglify-es --save-dev
# yarn add uglify-es -D
- scripts/build/scripts.sh 添加如下内容
需要手动指定 uglify-es 目录下的 bin 文件,否则识别不了 ES6 语法
for file in client/scripts/*.js
do
./node_modules/uglify-es/bin/uglifyjs $file --mangle > dist/scripts/$(basename $file)
done
- package.json添加
{"build:scripts": "scripty"}
资源版本号和引用替换
给静态资源加版本号的原因是线上环境的静态资源通常都放在 CDN 上,或者设置了很长时间的缓存,或者两者兼有,如果资源更新了但没有更新版本号,浏览器端是拿不到最新内容的,手动加版本号的过程很繁琐并且容易出错,为此自动化这个过程就显得非常有价值,通常的做法是利用文件内容做哈希,比如 md5,然后以这个哈希值作为版本号,版本号附着在文件名里面,线上环境的资源引用全部是带版本号的。
为了实现这个过程,我们需要引入两个小工具:
- hashmark,自动添加版本号;
- replaceinfiles,自动完成引用替换,它需要将版本号过程的输出作为输入;
- 安装依赖
npm i hashmark replaceinfiles -D
# npm install hashmark replaceinfiles --save-dev
# yarn add hashmark replaceinfiles -D
- scripts/build/hash.sh 添加
# 给图片资源加上版本号,并且替换引用
hashmark -c dist -r -l 8 '**/*.{png,jpg}' '{dir}/{name}.{hash}{ext}' | replaceinfiles -S -s 'dist/**/*.css' -d '{dir}/{base}'
# 给 js、css 资源加上版本号,并且替换引用
hashmark -c dist -r -l 8 '**/*.{css,js}' '{dir}/{name}.{hash}{ext}' | replaceinfiles -S -s 'client/index.html' -d 'dist/index.html'
- package.json 添加
{
"build:hash": "scripty"
}
完整的构建步骤
{
"build": "scripty",
"build:images": "scripty",
"build:scripts": "scripty",
"build:styles": "scripty",
"build:hash": "scripty"
}
- scripts/build.sh
for step in 'images' 'scripts' 'styles' 'hash'
do
npm run build:$step
done
-
运行
npm run build
image.png -
dist 目录如下:
image.png -
构建完成的 dist/index.html 内容如下:
image.png
可以看到,静态资源的版本号被正确替换了,为了验证构建出来的页面是否正常运行,可以运行 ./node_modules/.bin/http-server dist,然后浏览器打开:http://127.0.0.1:8080