npm script 的實踐

打包環節

要實現

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

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/*.css

do 
    lessc $file | cssmin > dist/styles/$(basename $file)
done
複製代碼

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

#!/usr/bin/env bash 
for file in src/scripts/*.js

do 
    ./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，本身體驗一下吧，玩的愉快

你能夠...

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

目錄：npm script 小書