Chia Yi Lai

單純使用 npm 來編譯 Sass 和 JS

Be a minimalist, I like clean code.

之前都是用 gulp 來處理 Sass 和 JS 檔案,後來發現可以單純使用 npm 來處理,直接寫在 package.json 裡,可以減少 gulpfile.js 這個檔案,不再需要依賴 gulp,不需要懂 gulp 寫法,套件更少,速度更快,配置超簡單!

需要的 npm 套件

  • node-sass – 編譯、壓縮 Sass 檔案
  • uglify-js – 整合、壓縮 JS 檔案
  • onchange – 監視 Sass, JS 檔案是否有變更
  • concurrently – 可以同時執行多個 script. (因為要同時監視 Sass 和 JS)
yarn add node-sass uglify-js onchange concurrently -D

package.json 配置如下,路徑和輸出屬性可依需求修改

"scripts": {
  "sass": "node-sass --output-style compressed src/sass/main.sass -o dist/css",
  "uglify": "uglifyjs src/js/*.js -c -m -o dist/js/main.js",
  "sass-w": "onchange 'src/sass/**/*.sass' -- yarn sass",
  "js-w": "onchange 'src/js/*.js' -- yarn uglify",
  "w": "concurrently \"yarn sass-w\" \"yarn js-w\""
}

最後執行 yarn w,就可以開始開發了!

yarn w
keyboard_arrow_up