打包環節

要實現

假設我們的項目結構是這樣的

src ├── images │ ├── a.png │ └── b.png ├── index.html ├── scripts │ └── index.js └── styles├── css.css└── less.css 復制代碼

構建過程要完成

• 壓縮圖片;
• 編譯 less, 壓縮 css;
• 編譯 es，壓縮 js;
• 給圖片加版本號，并替換在 html、css、js 中的引用;
• 給 css、js 加版本號，并替換在 html 中的引用；

安裝依賴

npm i imagemin-cli less cssmin uglify-es uglify-js hashmark replaceinfiles -D 復制代碼

• imagemin-cli 是 imagemin 的命令行工具，用于圖片構建（壓縮）；
• cssmin 實現代碼壓縮。如果用的是預編譯語言 less 自帶命令行工具 lessc，或使用的是 sass 的可使用 node-sass；
• uglify-js 壓縮代碼，如果用的 ES6，那需要用 uglify-es 來進行壓縮；
• hashmark 自動添加版本號；
• replaceinfiles 自動完成引用替換，將版本號的輸出注入到文件和文件名中；

編寫

1.創建目錄與文件（并賦權，不做這步操作會這樣，你可以試一下） 為什么要做這一步，是因為命令會比較長，前面章節npm script 復雜場景的應用說過可以把復雜命令抽取到 .sh 文件中（應用 scripty）。

mkdir scripts/build touch scripts/build.sh touch scripts/build/{images,styles,scripts,hash}.sh chmod -R a+x scripts 復制代碼

最終 scripts 目錄樹如下

scripts ├── build │ ├── hash.sh │ ├── images.sh │ ├── scripts.sh │ └── styles.sh └── build.sh 復制代碼

2.圖片處理文件（scripts/build/images.sh）腳本

#!/usr/bin/env bash imagemin src/images/* --out-dir dist/images 復制代碼

3.樣式處理文件（scripts/build/styles.sh）腳本

#!/usr/bin/env bash for file in src/styles/*.cssdo lessc $file | cssmin > dist/styles/$(basename $file) done 復制代碼

4.js 處理文件（scripts/build/scripts.sh）腳本

#!/usr/bin/env bash for file in src/scripts/*.jsdo ./node_modules/uglify-es/bin/gulify $file --mangle > dist/scripts/$(basename $file) done 復制代碼

4.資源版本號和引用替換（scripts/build/hash.sh）腳本

#!/usr/bin/env bash # 給圖片資源加上版本號，并且替換引用 hashmark -c dist -r -l 8 '**/*.{png,jpg}' '{dir}/{name}.{hash}{ext}' | replaceinfiles -S -s 'src/**/*.{css,html}' -d '{dir}/{base}'# 給 js、css 資源加上版本號，并且替換引用 hashmark -c dist -r -l 8 '**/*.{css,js}' '{dir}/{name}.{hash}{ext}' | replaceinfiles -S -s 'src/**/*.html' -d 'dist/{base}'復制代碼

5.文件 package.json 文件

{...,"scripts": {"src:server": "http-server src/","dist:server": "http-server dist -p $npm_package_config_urlPort","dist:open": "open http://localhost:$npm_package_config_urlPort","prebuild": "rm -rf dist && mkdir -p dist/{images,styles,scripts}","build": "scripty","build:images": "scripty","build:styles": "scripty","build:scripts": "scripty","build:hash": "scripty","postbuild": "npm-run-all --parallel dist:server dist:open"},"config": {"urlPort": 6011},... } 復制代碼

剖析

• prebuild 每次構建前，清空之前的構建目錄（這里應用了 npm 的鉤子機制）；
• build:* 使用 scripty 將腳本抽取到單獨文件（目錄 scripts 和 srcipts/build 下）中，文件內容是對圖片、less、css、js和html的處理工作，注意給 .sh 添加權限 chmod -R a+x scripts；
• 抽取的文件中應用到了 |（管道操作符） 和 >（輸出重定向），這些都是 shell 語法；
• hash.sh 是給資源加版本號，我們知道線上靜態資源通常是放到 CDN（內容分發網絡） 上的，或者是設置了長時間緩存，后期有版本迭代，這個時候資源更新了但是版本號沒有更新，瀏覽器讀取不到最新內容，這顯然不是我們想要的。如果手動去加版本號，一是繁瑣，二是 low（都不好意思自己是做前端的），三是不符合 DRY 原則，四是容易出錯。所以，這個過程要做到自動化，通常就是將更新的文件名上做哈希，然后以這個哈希做為版本號，即版本號添加到文件名上，以實現引用的資源都是帶版本號的，進而瀏覽器能讀取到最新內容；
• postbuild 啟動靜態資源服務和打開瀏覽器；

執行

npm run build 復制代碼

1.構建過程

2.文件 dist/index.html

3.文件 dist/css/css.css

本章內容代碼 npm-script，自己體驗一下吧，玩的愉快

You can

上一章：npm script 應用在 git hooks 中

轉載于:https://juejin.im/post/5d0202fd6fb9a07ebe74b9ff

總結

以上是生活随笔為你收集整理的npm script 的实践的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。