วิธีใช้ 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 อย่างไร!