วิธีใช้ Grunt เพื่อทำให้เวิร์กโฟลว์ของคุณเป็นแบบอัตโนมัติ [บทช่วยสอน]

ฉันเป็น ผู้สนับสนุนอย่างมากของระบบอัตโนมัติ เพราะมันทำให้ชีวิตง่ายขึ้นมาก ทำไมต้องใช้เวลากับงานที่น่าเบื่อหน่ายและน่าเบื่อหน่ายซึ่งดูดพลังชีวิตของคุณออกมาเมื่อคุณมีคอมพิวเตอร์ทำสิ่งต่าง ๆ ให้คุณ นี่คือความจริงโดยเฉพาะอย่างยิ่งสำหรับการพัฒนาเว็บ.

งานพัฒนาหลายอย่างอาจเป็นงานที่น่าเบื่อ ในขณะที่การพัฒนาคุณอาจต้องการที่จะรวบรวมรหัสเมื่อผลักดันรุ่นการพัฒนาคุณอาจเชื่อมโยงและลดขนาดไฟล์ลบการพัฒนาทรัพยากรเท่านั้นและอื่น ๆ แม้แต่ไฟล์ที่ไม่ซับซ้อนเช่นการลบไฟล์หลาย ๆ ไฟล์หรือเปลี่ยนชื่อโฟลเดอร์ สามารถใช้เวลาอันยิ่งใหญ่ของเวลาของเรา.

ในบทความนี้ฉันจะแสดงให้คุณเห็นว่าคุณจะทำให้ชีวิตของคุณง่ายขึ้นได้อย่างไรโดยใช้ประโยชน์จากฟังก์ชั่นที่ยอดเยี่ยมของ Grunt นักวิ่งจาวาสคริปต์ ฉันจะแนะนำคุณตลอดกระบวนการทั้งหมดดังนั้นไม่ต้องกังวลแม้ว่าคุณจะไม่ใช่วิซาร์ด Javascript!

เพิ่มเติมเกี่ยวกับ Hongkiat.com:

• CSSMatic ทำให้ CSS ง่ายสำหรับนักออกแบบเว็บไซต์
• การทำงานอัตโนมัติใน Mac ด้วยการกระทำของโฟลเดอร์
• ทำให้ไฟล์ Dropbox ของคุณทำงานอัตโนมัติ
• แอพ 10 แอปที่ช่วยทำงานอัตโนมัติบนอุปกรณ์ Android ของคุณ
• วิธีสำรองข้อมูลเว็บไซต์ของคุณลงใน Dropbox โดยอัตโนมัติ

การติดตั้ง Grunt

การติดตั้ง Grunt นั้นค่อนข้างง่ายเพราะใช้ตัวจัดการแพ็คเกจโหนด ซึ่งหมายความว่าคุณอาจต้องติดตั้งโหนดเอง เปิดเทอร์มินัลหรือพรอมต์คำสั่ง (ฉันจะโทรหาเทอร์มินัลนี้จากนี้) และป้อน nmp -v.

หากคุณเห็นหมายเลขเวอร์ชันคุณมี NPM ติดตั้งแล้วหากคุณเห็นข้อผิดพลาด "ไม่พบคำสั่ง" คุณจะต้องติดตั้งโดยไปที่หน้าดาวน์โหลดโหนดและเลือกเวอร์ชันที่คุณต้องการ.

เมื่อติดตั้งโหนดแล้วการรับ Grunt นั้นเป็นเรื่องของคำสั่งเดียวที่ออกให้ในเทอร์มินัล:

npm install -g grunt-cli

การใช้งานพื้นฐาน

คุณจะใช้ Grunt ในแบบโครงการต่อโครงการเนื่องจากแต่ละโครงการจะมีข้อกำหนดที่แตกต่างกัน มาเริ่มโครงการกันเถอะโดยการสร้างโฟลเดอร์และไปที่มันผ่านเทอร์มินัลของเราเช่นกัน.

ไฟล์สองไฟล์เป็นหัวใจของ Grunt: package.json และ Gruntfile.js. ไฟล์แพ็กเกจจะกำหนดการพึ่งพาของบุคคลที่สามทั้งหมดที่ระบบอัตโนมัติของคุณจะใช้ Gruntfile ให้คุณควบคุม อย่างไร ตรงนี้ใช้ มาสร้างไฟล์แพคเกจเปล่า ๆ ตอนนี้ด้วยเนื้อหาต่อไปนี้:

"name": "test-project", "version": "1.0", "devDependencies": "grunt": "~ 0.4.5",

ชื่อและเวอร์ชันขึ้นอยู่กับคุณการขึ้นต่อกันนั้นจะต้องมีแพ็คเกจทั้งหมดที่คุณใช้ เราไม่ได้ทำอะไรเลยในขณะนี้ดังนั้นเราจะทำให้แน่ใจว่า Grunt นั้นได้รับการเพิ่มเป็นการพึ่งพา.

คุณอาจจะถามตัวเองว่าบรรทัดตัวเล็ก (~) ที่เรียกว่าตัวหนอนกำลังทำอะไรอยู่.

จำเป็นต้องใช้รุ่นโดยใช้กฎจาก semantic versioner สำหรับ npm โดยสังเขป:

• คุณระบุรุ่นที่แน่นอนเช่น 4.5.2
• คุณสามารถใช้มากกว่า / น้อยกว่าเพื่อระบุรุ่นต่ำสุดหรือสูงสุดเช่น > 4.0.3
• การใช้เครื่องหมายตัวหนอนจะระบุบล็อกเวอร์ชัน การใช้ ~ 1.2 ถือว่าเป็น 1.2.x, รุ่นใด ๆ ข้างต้น 1.2.0 แต่ต่ำกว่า 1.3

มีวิธีการมากมายในการระบุรุ่น แต่มีเพียงพอสำหรับความต้องการส่วนใหญ่ ขั้นตอนต่อไปคือการสร้าง Gruntfile ซึ่งจะทำงานอัตโนมัติของเรา.

 module.exports = ฟังก์ชัน (grunt) grunt.initConfig (pkg: grunt.file.readJSON ('package.json')); grunt.registerTask ('ค่าเริ่มต้น', []); ; 

นี่เป็นโครงกระดูกของ Gruntfile มีสถานที่น่าสนใจสองแห่ง สถานที่หนึ่งอยู่ภายใน initConfig () ฟังก์ชัน นี่คือที่การกำหนดค่าโครงการทั้งหมดของคุณไป ซึ่งจะรวมถึงสิ่งต่าง ๆ เช่นการจัดการการรวบรวม LESS / SASS การย่อสคริปต์และอื่น ๆ.

ตำแหน่งที่สองอยู่ด้านล่างฟังก์ชันที่คุณระบุงาน คุณสามารถดูงานที่ระบุชื่อเดียวได้ “ค่าเริ่มต้น”. มันว่างเปล่าในขณะนี้ดังนั้นจึงไม่ทำอะไรเลย แต่เราจะขยายในภายหลัง. โดยทั่วไปแล้วงานจะจัดคิวบิตและชิ้นส่วนจากการกำหนดค่าโครงการของเราและเรียกใช้งาน.

ตัวอย่างเช่นงานที่มีชื่อ “สคริปต์” อาจต่อสคริปต์ทั้งหมดของเราจากนั้นย่อขนาดไฟล์ผลลัพธ์และย้ายไฟล์ไปยังตำแหน่งสุดท้าย การกระทำสามอย่างเหล่านี้ล้วนกำหนดไว้ในโครงงานโครงการ “ดึงเข้าด้วยกัน” โดยงาน หากสิ่งนี้ยังไม่ชัดเจน แต่ก็ไม่ต้องกังวลฉันจะแสดงให้คุณเห็นว่าสิ่งนี้เกิดขึ้นได้อย่างไร.

ภารกิจแรกของเรา

มาสร้างงานที่ทำให้ไฟล์ javascript ของเรามีขนาดเล็กลง.

มีสี่สิ่งที่เราต้องทำทุกครั้งที่เราต้องการเพิ่มงานใหม่:

• ติดตั้งปลั๊กอินถ้าจำเป็น
• ต้องการมันใน Gruntfile
• เขียนงาน
• เพิ่มลงในกลุ่มงานหากจำเป็น

(1) ค้นหาและติดตั้งปลั๊กอิน

วิธีที่ง่ายที่สุดในการค้นหาปลั๊กอินที่คุณต้องการคือการพิมพ์สิ่งนี้ลงใน Google: “ลดขนาดปลั๊กอิน javascript grunt”. ผลลัพธ์แรกควรนำคุณไปสู่ปลั๊กอินเสี้ยงฮึดฮัดแสดงความไม่พอใจซึ่งเป็นสิ่งที่เราต้องการ.

หน้า Github บอกทุกสิ่งที่คุณจำเป็นต้องรู้ การติดตั้งเป็นบรรทัดเดียวในเทอร์มินัลนี่คือสิ่งที่คุณต้องการใช้:

 npm ติดตั้ง grunt-contrib-uglify --save-dev 

คุณอาจต้องเปิดใช้งานด้วยสิทธิ์ของผู้ดูแลระบบ หากคุณได้รับสิ่งที่ชอบ npm ข้อผิดพลาด! โปรดลองเรียกใช้คำสั่งนี้อีกครั้งในฐานะผู้ดูแลระบบ. ระหว่างทางเพียงพิมพ์ sudo ก่อนคำสั่งและป้อนรหัสผ่านของคุณเมื่อได้รับแจ้ง:

 sudo npm ติดตั้ง grunt-contrib-uglify --save-dev 

คำสั่งนี้แยกวิเคราะห์ของคุณจริง package.json ไฟล์และเพิ่มเป็นการพึ่งพาที่นั่นคุณไม่จำเป็นต้องทำด้วยตนเอง.

(2) ต้องการใน Gruntfile

ขั้นตอนต่อไปคือการเพิ่ม Gruntfile ของคุณเป็นข้อกำหนด ฉันต้องการเพิ่มปลั๊กอินที่ด้านบนของไฟล์นี่คือ Gruntfile ที่สมบูรณ์ของฉันหลังจากเพิ่ม grunt.loadNpmTasks ( 'ฮึดฮัด contrib-ทำให้น่าเกลียด');.

 module.exports = function (grunt) grunt.loadNpmTasks ('grunt-contrib-uglify'); grunt.initConfig (pkg: grunt.file.readJSON ('package.json')); grunt.registerTask ('ค่าเริ่มต้น', []); ; 

(3) สร้างงานเพื่อลดสคริปต์

ดังที่เราได้กล่าวไปแล้วสิ่งนี้ควรทำภายใน initConfig () ฟังก์ชัน หน้า Github สำหรับปลั๊กอิน (และปลั๊กอินอื่น ๆ ส่วนใหญ่) ให้ข้อมูลและตัวอย่างมากมายแก่คุณ นี่คือสิ่งที่ฉันใช้ในโครงการทดสอบของฉัน.

 uglify: build: src: 'js / scripts.js', ปลายทาง: 'js / scripts.min.js' 

นี่ตรงไปตรงมาฉันระบุ scripts.js ไฟล์ในไดเรกทอรี js ของโครงการและปลายทางสำหรับไฟล์ที่ย่อเล็กสุด มีหลายวิธีในการระบุไฟล์ต้นฉบับเราจะมาดูกันในภายหลัง.

สำหรับตอนนี้เรามาดู Gruntfile แบบเต็มหลังจากเพิ่มสิ่งนี้เพื่อให้แน่ใจว่าคุณรู้ว่าสิ่งต่าง ๆ เข้ากันได้อย่างไร.

 module.exports = function (grunt) grunt.loadNpmTasks ('grunt-contrib-uglify'); grunt.initConfig (pkg: grunt.file.readJSON ('package.json'), uglify: build: src: 'scripts.js', ปลายทาง: 'scripts.min.js'); grunt.registerTask ('ค่าเริ่มต้น', []); ; 

(4) เพิ่มการกำหนดค่านี้ในกลุ่มงาน

ตอนนี้คุณสามารถไปที่เทอร์มินัลแล้วพิมพ์ เสี้ยงฮึดฮัดแสดงความไม่พอใจ แต่เราจะต้องมีกลุ่มงานเพื่อให้ทำงานหลายอย่างในภายหลัง เรามีภารกิจเริ่มต้นว่างเปล่ารอเพียงบางสิ่งบางอย่างที่จะเพิ่มดังนั้นขอแก้ไขมันต่อไปนี้:

 grunt.registerTask ('ค่าเริ่มต้น', ['uglify']); 

ในขั้นตอนนี้คุณควรจะไปที่เทอร์มินัลพิมพ์ เสี้ยงฮึดฮัดแสดงความไม่พอใจ และดูการลดขนาดเกิดขึ้น อย่าลืมสร้าง scripts.js ไฟล์ของหลักสูตร!

ไม่ต้องใช้เวลามากในการตั้งค่าใช่ไหม แม้ว่าคุณจะยังใหม่กับสิ่งนี้ทั้งหมดและใช้เวลาพอสมควรในการทำตามขั้นตอน แต่เวลาที่ประหยัดจะเกินเวลาที่ใช้ไปในการใช้งานไม่กี่ครั้ง.

การต่อไฟล์

ลองดูที่ไฟล์ที่ต่อกันและ เรียนรู้วิธีระบุหลายไฟล์เป็นเป้าหมาย ระหว่างทาง.

การต่อข้อมูลเป็นกระบวนการรวมเนื้อหาของไฟล์หลาย ๆ ไฟล์เป็นไฟล์เดียว เราจะต้องใช้ปลั๊กอินที่ไม่ลงรอยกัน มาทำงานกันตามขั้นตอน:

ในการติดตั้งปลั๊กอินใช้ npm ติดตั้ง grunt-contrib-concat --save-dev ในอาคารผู้โดยสาร เมื่อเสร็จแล้วให้แน่ใจว่าจะเพิ่มลงใน Gruntfile ของคุณเหมือนก่อนที่จะใช้ grunt.loadNpmTasks ( 'ฮึดฮัด contrib-concat');.

ถัดไปคือการกำหนดค่า มารวมกันสามไฟล์ที่เฉพาะเจาะจงไวยากรณ์จะคุ้นเคย.

 concat: dist: src: ['dev / js / header.js', 'dev / js / myplugin.js', 'dev / js / footer.js'], ปลายทาง: 'js / scripts.js', ,, 

รหัสด้านบนใช้สามไฟล์ที่ได้รับเป็นแหล่งที่มาและรวมเป็นไฟล์ที่ได้รับเป็นปลายทาง.

สิ่งนี้มีประสิทธิภาพอยู่แล้ว แต่จะเกิดอะไรขึ้นถ้ามีการเพิ่มไฟล์ใหม่ เราจำเป็นต้องกลับมาที่นี่ตลอดเวลาหรือไม่? ไม่แน่นอนเราสามารถระบุทั้งโฟลเดอร์ของไฟล์ที่จะต่อกันได้.

 concat: dist: src: 'dev / js / *. js "], ปลายทาง:' js / scripts.js ',,, 

ตอนนี้ไฟล์จาวาสคริปต์ใด ๆ ที่อยู่ในโฟลเดอร์ dev / js จะถูกรวมเป็นไฟล์เดียว: js / scripts.js, ดีกว่ามาก!

ตอนนี้ถึงเวลาสร้างงานเพื่อให้เราสามารถต่อไฟล์บางไฟล์ได้.

 grunt.registerTask ('mergejs', ['concat']); 

นี่ไม่ใช่งานเริ่มต้นอีกต่อไปดังนั้นเราจะต้องพิมพ์ชื่อในเทอร์มินัลเมื่อเราออก เสี้ยงฮึดฮัดแสดงความไม่พอใจ คำสั่ง.

 ฮึดฮัดแสดงความไม่พอใจ 

ระบบอัตโนมัติของเรา

เราได้ก้าวหน้าไปมากแล้ว แต่ยังมีอีกมาก! สำหรับตอนนี้เมื่อคุณต้องการเชื่อมหรือย่อขนาดคุณต้องไปที่เทอร์มินัลแล้วพิมพ์คำสั่งที่เหมาะสม ถึงเวลาแล้วที่เราจะดู ดู คำสั่งที่จะทำสิ่งนี้เพื่อเรา นอกจากนี้เรายังจะได้เรียนรู้วิธีการใช้งาน mulitple ในครั้งเดียวไปพร้อมกัน.

ในการก้าวไปข้างหน้าเราจำเป็นต้องคว้านาฬิกาที่ไม่น่าไว้วางใจ ฉันแน่ใจว่าคุณสามารถติดตั้งและเพิ่มลงใน Gruntfile ด้วยตัวคุณเองในตอนนี้ดังนั้นฉันจะเริ่มต้นด้วยการแสดงสิ่งที่ฉันใช้ในโครงการทดสอบของฉัน.

 ดู: สคริปต์: ไฟล์: ['dev / js / *. js'], ภารกิจ: ['concat', 'uglify'],, 

ฉันตั้งชื่อไฟล์ให้ดู “สคริปต์”, เพียงแค่ฉันรู้ว่ามันทำอะไร ภายในวัตถุนี้ฉันได้ระบุไฟล์ที่ต้องดูและงานที่ต้องรัน ในตัวอย่างการต่อข้อมูลก่อนหน้านี้เราดึงไฟล์ทั้งหมดในไดเรกทอรี dev / js.

ในตัวอย่างการย่อขนาดเราย่อขนาดไฟล์นี้ มันเหมาะสมที่จะดูโฟลเดอร์ dev / js สำหรับการเปลี่ยนแปลงและเรียกใช้งานเหล่านี้เมื่อใดก็ตามที่มี.

อย่างที่คุณเห็นงานหลาย ๆ งานสามารถถูกเรียกได้อย่างง่ายดายโดยแยกด้วยเครื่องหมายจุลภาค พวกเขาจะดำเนินการในลำดับแรกก่อนที่จะต่อกันจากนั้นทำการลดขนาดในกรณีนี้ สิ่งนี้สามารถทำได้กับกลุ่มงานซึ่งเป็นเหตุผลว่าทำไมถึงมีอยู่.

ตอนนี้เราสามารถแก้ไขภารกิจเริ่มต้นของเรา:

 grunt.registerTask ('ค่าเริ่มต้น', ['concat', 'uglify']); 

ตอนนี้เรามีสองทางเลือก เมื่อใดก็ตามที่คุณต้องการเชื่อมโยงและย่อขนาดสคริปต์ของคุณคุณสามารถสลับไปยังเทอร์มินัลและประเภท เสี้ยงฮึดฮัดแสดงความไม่พอใจ. คุณยังสามารถใช้คำสั่ง watch เพื่อเริ่มต้นการดูไฟล์ของคุณ: นาฬิกาเสี้ยงฮึดฮัด.

มันจะนั่งรอคุณแก้ไขไฟล์เหล่านี้ เมื่อคุณทำแล้วมันจะทำงานทั้งหมดที่ได้รับมอบหมายไปเลยลองทำดู.

ดีกว่านี้มากไม่ต้องป้อนข้อมูลจากเรา ตอนนี้คุณสามารถทำงานกับไฟล์ของคุณและทุกอย่างจะทำเพื่อคุณ.

ภาพรวม

ด้วยความรู้เบื้องต้นเกี่ยวกับวิธีการติดตั้งและใช้งานปลั๊กอินและวิธีการทำงานของคำสั่ง watch คุณจึงพร้อมที่จะติดตั้งระบบอัตโนมัติด้วยตัวคุณเอง มีเรื่องน่ากลัวมากกว่าที่เราพูดถึง แต่ไม่มีอะไรที่คุณไม่สามารถจัดการได้ด้วยตัวเอง.

การใช้คำสั่งสำหรับการรวบรวม SASS, การปรับภาพให้ดีที่สุด, การแก้ไขอัตโนมัติและอื่น ๆ เป็นเพียงเรื่องของการทำตามขั้นตอนที่เรากล่าวถึงและการอ่านไวยากรณ์ที่ปลั๊กอินต้องการ.

หากคุณทราบถึงการใช้งานที่ยอดเยี่ยมสำหรับ Grunt โปรดแจ้งให้เราทราบในความคิดเห็นเราสนใจที่จะรับฟังว่าคุณใช้เครื่องมืออย่าง Grunt อย่างไร!