home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> JavaScript

วิธีติดตั้ง Grunt บน Ubuntu

Grunt (The JavaScript Task Runner) เป็นเครื่องมืออัตโนมัติสำหรับงานที่ทำซ้ำๆ เช่น คอมไพล์รหัส, รันเทสต์, Minify ไฟล์ ฯลฯ Grunt และปลั๊กอินต่างๆ ติดตั้งและจัดการผ่าน NPM (Node.js Package Manager)

ข้อกำหนดเบื้องต้น (Prerequisites)

ต้องมี Node.js และ NPM ติดตั้งไว้ก่อน

ตรวจสอบเวอร์ชัน Node.js

$ node --version
# ผลลัพธ์ตัวอย่าง: v6.9.2

ตรวจสอบเวอร์ชัน NPM

$ npm --version
# ผลลัพธ์ตัวอย่าง: 3.10.9

หากยังไม่มี Node.js และ NPM ให้ติดตั้งก่อน (อ้างอิงบทความติดตั้ง Node.js บน Ubuntu)

ติดตั้ง Grunt CLI แบบ Global

$ sudo npm install -g grunt-cli

ผลลัพธ์ตัวอย่าง

/usr/bin/grunt -> /usr/lib/node_modules/grunt-cli/bin/grunt
/usr/lib
`-- grunt-cli@1.2.0
  +-- findup-sync@0.3.0
  | `-- glob@5.0.15
  |   +-- inflight@1.0.6
  |   | `-- wrappy@1.0.2
  |   +-- inherits@2.0.3
  |   +-- minimatch@3.0.3
  |   | `-- brace-expansion@1.1.6
  |   |   +-- balanced-match@0.4.2
  |   |   `-- concat-map@0.0.1
  |   +-- once@1.4.0
  |   `-- path-is-absolute@1.0.1
  +-- grunt-known-options@1.1.0
  +-- nopt@3.0.6
  | `-- abbrev@1.0.9
  `-- resolve@1.1.7

ตรวจสอบการติดตั้ง

$ grunt --version
# ผลลัพธ์ตัวอย่าง: grunt-cli v1.2.0

ข้อสังเกตสำคัญ

  • grunt-cli คือ Command Line Interface สำหรับรัน Grunt ไม่ใช่ Grunt 本身
  • ในแต่ละโปรเจกต์ ต้องติดตั้ง grunt (local) และปลั๊กอินที่ต้องการผ่าน npm install grunt --save-dev
  • ต้องมีไฟล์ Gruntfile.js หรือ Gruntfile.coffee ในรูทโปรเจกต์

สร้างโปรเจกต์ Grunt ใหม่ (Quick Start)

# 1. สร้างโฟลเดอร์โปรเจกต์
mkdir my-grunt-project && cd my-grunt-project

# 2. เริ่มต้น package.json
npm init -y

# 3. ติดตั้ง grunt และปลั๊กอินพื้นฐาน
npm install grunt --save-dev
npm install grunt-contrib-uglify grunt-contrib-watch --save-dev

# 4. สร้าง Gruntfile.js
# (ดูตัวอย่างจากเอกสาร Grunt อย่างเป็นทางการ)

สรุป

ในบทความนี้เราได้เรียนรู้วิธีติดตั้ง Grunt บน Ubuntu ตั้งแต่ตรวจสอบ Node.js/NPM จนถึงการติดตั้ง grunt-cli แบบ Global ในบทความต่อไปเราจะมาดูการตั้งค่า Gruntfile และใช้งานปลั๊กอินต่างๆ