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

构建内容 源代码预编译：比如 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

本文章由javascript技术分享原创和收集