npm Scripts — Task Automation โดยไม่ต้องใช้ Gulp หรือ Makefile

npm scripts คืออะไร

scripts field ใน package.json เป็น task runner ที่ built-in อยู่กับทุก Node.js project — ไม่ต้องติดตั้ง Gulp, Grunt, หรือ Make เพิ่ม:

{
  "scripts": {
    "dev": "astro dev",
    "build": "astro build",
    "preview": "astro preview"
  }
}

รันด้วย: npm run <script-name>

Built-in Script Names (ไม่ต้องใส่ run)

npm start     # เท่ากับ npm run start
npm test      # เท่ากับ npm run test
npm stop      # เท่ากับ npm run stop

script อื่นๆ ต้องใช้ npm run <name>

Pre/Post Hooks

npm จะรัน script ที่ขึ้นต้นด้วย pre หรือ post โดยอัตโนมัติ:

{
  "scripts": {
    "prebuild": "npm run typecheck",
    "build": "astro build",
    "postbuild": "npx pagefind --site dist"
  }
}

รัน npm run build → ได้: typecheck → build → pagefind

รัน Commands ต่อเนื่อง

{
  "scripts": {
    "lint": "eslint src --ext .ts,.astro",
    "format": "prettier --write src",
    "typecheck": "tsc --noEmit",

    "verify": "npm run typecheck && npm run lint",

    "clean": "rm -rf dist .astro",

    "ci": "npm ci && npm run build"
  }
}

ส่ง Arguments

# ส่งผ่าน -- แล้วตามด้วย args
npm run build -- --verbose

# package.json
"build:watch": "astro build --watch"

Cross-platform (Windows + Linux/Mac)

{
  "scripts": {
    "clean": "rimraf dist .astro",
    "copy": "copyfiles -u 1 src/assets/*.svg dist/"
  }
}

npm install --save-dev rimraf copyfiles

rimraf ทำงานเหมือน rm -rf บน Windows — ใช้แทน rm -rf ใน scripts เสมอเพื่อ cross-platform

npm run-script พร้อม Variables

{
  "scripts": {
    "deploy:staging": "SITE_URL=https://staging.panupongws.com npm run build",
    "deploy:prod": "SITE_URL=https://panupongws.com npm run build"
  }
}

หรือใช้ cross-env สำหรับ Windows compatibility:

"deploy:prod": "cross-env SITE_URL=https://panupongws.com npm run build"

Lifecycle Scripts ที่ npm รู้จัก

{
  "scripts": {
    "prepare": "...",      // รันหลัง npm install ทุกครั้ง
    "prepublishOnly": "npm run build",  // รันก่อน npm publish
    "preinstall": "...",   // รันก่อน npm install
    "postinstall": "..."   // รันหลัง npm install
  }
}

Package.json ของ Astro Project (ตัวอย่างจริง)

{
  "name": "panupong-creative-space",
  "scripts": {
    "dev": "astro dev",
    "build": "astro build",
    "postbuild": "npx pagefind --site dist --output-path dist/pagefind",
    "preview": "astro preview",
    "typecheck": "tsc --noEmit",
    "clean": "rimraf dist .astro"
  }
}

postbuild รันอัตโนมัติหลัง build ทุกครั้ง — Pagefind index จะสร้างเสมอหลัง build เสร็จ

เมื่อไรควรใช้ Tool เพิ่ม

npm scripts เพียงพอสำหรับ 90% ของ tasks — แต่ถ้าต้องการ:

• รัน tasks แบบ parallel ด้วย dependency graph → ลอง turbo หรือ nx
• watch หลาย file pattern → ลอง chokidar-cli
• tasks ซับซ้อนมากที่ต้อง script ยาว → ลองเขียนเป็น Node.js script แยก

โดยทั่วไป: ลอง npm scripts ก่อนเสมอ ติดตั้ง tool เพิ่มเมื่อ npm scripts ไม่พอจริงๆ