Grunt ขึ้นอยู่กับ Node.js และได้รับการพัฒนาใน JS ด้วยวิธีนี้คุณสามารถใช้ node.js เพื่อตระหนักถึงการดำเนินงานของเดสก์ท็อปข้ามระบบและข้ามแพลตฟอร์มเช่นการดำเนินการไฟล์ ฯลฯ นอกจากนี้คำรามและปลั๊กอินทั้งหมดจะถูกใช้เป็นแพ็คเกจที่สามารถจัดการได้โดยใช้การติดตั้ง NPM
ดังนั้นไฟล์ Package.json Project ที่สร้างโดย NPM สามารถบันทึกปลั๊กอินคำรามที่ใช้ในโครงการปัจจุบันและคำรามจะเรียกไฟล์ Gruntfile.js, แยกวิเคราะห์งาน (งาน) และดำเนินการที่สอดคล้องกัน
ติดตั้ง Grunt-cli
ในความเป็นจริงมันคือการติดตั้ง Grunt-cli ซึ่งติดตั้งอินเทอร์เฟซบรรทัดคำสั่งของ Grunt (CLI) หลังจากนั้นคำสั่ง Grunt จะได้รับการยอมรับในพรอมต์คำสั่ง การติดตั้ง Grunt-cli ไม่ได้เรียกว่าการติดตั้งคำราม นี่เป็นเพราะเสียงฮึดฮัดของตัวเองไม่ได้ใช้ทั่วโลก หากคุณต้องการใช้คำรามคุณต้องติดตั้งคำรามหนึ่งครั้งสำหรับไดเรกทอรีการทำงานเฉพาะใด ๆ นี่เป็นเพราะไดเรกทอรีการทำงานที่แตกต่างกันต้องใช้งานอัตโนมัติที่แตกต่างกันผ่านเสียงฮึดฮัดดังนั้นจึงต้องมีการกำหนดค่าอย่างอิสระ
npm ติดตั้ง -g grunt -cli
-พารามิเตอร์ Save-Dev ซึ่งระบุว่าสิ่งที่ติดตั้งใหม่จะถูกเพิ่มลงในไฟล์ package.json
สร้างไฟล์ package.json
NPM มีข้อกำหนดสำหรับไดเรกทอรีการทำงาน ข้อกำหนดนี้คือ: มี package.json ที่ตำแหน่งไดเรกทอรีรูท
เอกสาร. ไฟล์นี้กำหนดข้อมูลโครงการบางอย่าง (ชื่อ, คำอธิบาย) ที่สอดคล้องกับไดเรกทอรีการทำงานรวมถึงการพึ่งพาของแพ็คเกจ (นั่นคือโมดูล NPM)
ดำเนินการคำสั่งต่อไปนี้เพื่อเริ่มต้น
NPM init
ติดตั้งคำรามและปลั๊กอินที่จำเป็นสำหรับไดเรกทอรีการทำงานปัจจุบัน
วิธีที่ 1
เราติดตั้งคำรามในไดเรกทอรีทั่วโลกมาก่อนและตอนนี้เราต้องแนะนำให้รู้จักกับเส้นทางโครงการปัจจุบัน ในเวลาเดียวกันปลั๊กอินที่ต้องการอาจรวมถึง:
การผสานไฟล์: Grunt-Contrib-concat
การตรวจสอบไวยากรณ์: Grunt-Contrib-Jshint
SCSS รวบรวม: Grunt-Contrib-sass
ไฟล์บีบอัด: Grunt-Contrib-Uglify
ฟังการเปลี่ยนแปลงไฟล์: Grunt-Contrib-Watch
สร้างเซิร์ฟเวอร์ท้องถิ่น: Grunt-Contrib-Connect
วิธีที่พวกเขาสามารถติดตั้งได้คือ:
การติดตั้ง NPM-SAVE-DEV GruntNPM ติดตั้ง-ปลั๊กอินปลั๊กอิน 1 ปลั๊กอิน 1 ปลั๊กอิน 2 ปลั๊กอิน 3
ในเวลานี้มีรหัสพิเศษบางอย่างในโฟลเดอร์ package.json
"DevDependencies": {"Grunt": "0.4.1"}วิธีที่ 2 - เปลี่ยนแพ็คเกจ Json ด้วยตนเอง
"DevDependencies": {"Grunt": "~ 0.4.1", "Grunt-Contrib-cssmin": "~ 0.7.0"}เพิ่มฟิลด์นี้ด้วยตนเองในไฟล์ package.json และเพิ่มแพ็คเกจที่ต้องขึ้นอยู่กับ หากคุณต้องการติดตั้งเวอร์ชันล่าสุดเท่านั้นคุณสามารถเปลี่ยนเป็น * จากนั้นเรียกใช้งาน NPM ติดตั้ง คุณจะพบว่ามีโฟลเดอร์ Node_Modules ในโฟลเดอร์ซึ่งเก็บปลั๊กอินที่เราต้องการ
การกำหนดค่า
โดยทั่วไปใช้เทมเพลตโดยตรงเป็นไฟล์การกำหนดค่า
module.exports = function (Grunt) {"ใช้อย่างเข้มงวด"; Grunt.initConfig ({// พื้นที่การกำหนดค่าปลั๊กอิน}); // โหลดงานปลั๊กอินเพิ่มใครก็ตามที่คุณต้องการใช้ grunt.loadnpmtasks ('Grunt-Contrib-Uglify'); Grunt.loadnpmtasks ('Grunt-Contrib-Cssmin'); Grunt.loadnpmtasks ('Grunt-Contrib-Imagemin'); // ลงทะเบียนงาน Grunt.RegisterTask ('default', ['cssmin', 'imagemin', 'uglify']);};Grunt.loadnpmtasks () เป็นงานปลั๊กอินกำลังโหลด ในความเป็นจริงหากคุณต้องการใช้ฟังก์ชั่นของปลั๊กอินโปรดใช้รหัสนี้เพื่อเพิ่มงานปลั๊กอินในส่วนนี้
Grunt.registerTask () เป็นงานที่ลงทะเบียนและมีค่าเริ่มต้นตามค่าเริ่มต้น ค่าเริ่มต้นหมายความว่าเมื่อคุณใช้งานล่าสุดคุณสามารถป้อนคำรามได้โดยตรงในพรอมต์คำสั่งในไดเรกทอรีเพื่อดำเนินการงานที่ลงทะเบียนซึ่งเทียบเท่ากับการดำเนินงานเริ่มต้น
ใช้งานที่กำหนดเอง
คำสั่งงานเพิ่มเติมสามารถลงทะเบียนได้และสามารถใช้ชื่ออื่น ๆ ได้ ตัวอย่างเช่น
Grunt.registertask ('custom', ['cssmin', 'imagemin']);เมื่อใช้งานให้ป้อน:
ประเพณี