让前端飞Web前端之路大前端技术栈

npm script 工作流(十二)构建流水线

2020-08-06  本文已影响0人  ZoranLee

构建内容

项目目录结构

client
├── images
│   └── schedule.png
├── index.html
├── scripts
│   └── main.js
└── styles
    └── main.css

添加构建过程

构建目录

{
"prebuild": "rm -rf dist && mkdir -p dist/{images,styles,scripts}"
}

准备脚本目录

mkdir scripts/build
touch scripts/build.sh
touch scripts/build/{images,styles,scripts}.sh
chmod -R a+x scripts
scripts
├── build
│   ├── hash.sh
│   ├── images.sh
│   ├── scripts.sh
│   └── styles.sh
├── build.sh

图片构建过程

npm i imagemin-cli -D
# npm install imagemin-cli --save-dev
# yarn add imagemin-cli -D
imagemin client/images/* --out-dir=dist/images
{
  "build:images": "scripty"
}
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
for file in client/styles/*.css
do
  lessc $file | cssmin > dist/styles/$(basename $file)
done
{ 
  "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
for file in client/scripts/*.js
do
  ./node_modules/uglify-es/bin/uglifyjs $file --mangle > dist/scripts/$(basename $file)
done
{"build:scripts": "scripty"}

资源版本号和引用替换

给静态资源加版本号的原因是线上环境的静态资源通常都放在 CDN 上,或者设置了很长时间的缓存,或者两者兼有,如果资源更新了但没有更新版本号,浏览器端是拿不到最新内容的,手动加版本号的过程很繁琐并且容易出错,为此自动化这个过程就显得非常有价值,通常的做法是利用文件内容做哈希,比如 md5,然后以这个哈希值作为版本号,版本号附着在文件名里面,线上环境的资源引用全部是带版本号的。

为了实现这个过程,我们需要引入两个小工具:

npm i hashmark replaceinfiles -D
# npm install hashmark replaceinfiles --save-dev
# yarn add hashmark replaceinfiles -D
# 给图片资源加上版本号,并且替换引用
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'
{
"build:hash": "scripty"
}

完整的构建步骤

{
   "build": "scripty",
   "build:images": "scripty",
    "build:scripts": "scripty",
    "build:styles": "scripty",
    "build:hash": "scripty"
}
for step in 'images' 'scripts' 'styles' 'hash'
do
  npm run build:$step
done

可以看到,静态资源的版本号被正确替换了,为了验证构建出来的页面是否正常运行,可以运行 ./node_modules/.bin/http-server dist,然后浏览器打开:http://127.0.0.1:8080

上一篇 下一篇

猜你喜欢

热点阅读