มีขั้นตอนต่อไปนี้:
1. สร้างโครงการใหม่ bejs
2. สร้างแพ็คเกจไฟล์ใหม่ json
3. สร้างไฟล์ใหม่ Gruntfile.js
4. ดำเนินการงาน Grunt ในบรรทัดคำสั่ง
1. โครงการใหม่ bejs
ซอร์สโค้ดถูกวางไว้ภายใต้ SRC และไดเรกทอรีมีสินทรัพย์ย่อยสองรายการและ JS JS กระจายอำนาจ selector.js และ ajax.js ซึ่งได้รับการกล่าวถึงในบทความก่อนหน้าว่าจะรวมและบีบอัดพวกเขาอย่างไร บทความนี้มุ่งเน้นไปที่ไดเรกทอรีสินทรัพย์เท่านั้นซึ่งมีรูปภาพและไฟล์ CSS บางส่วน ในขณะที่ทรัพยากร CSS สองรายการรีเซ็ต. css และ style.css จะถูกรวมและบีบอัดลงในไดเรกทอรี Dest/Asset เวอร์ชันผสานทั้งหมด css, เวอร์ชันบีบอัด all-min.css
2. สร้างแพ็คเกจใหม่ json
Package.json ถูกวางไว้ในไดเรกทอรีรากและความหมายของมันได้รับการแนะนำในบทความก่อนหน้า โครงสร้างโครงการปัจจุบันมีดังนี้
Package.JSON เนื้อหาต้องสอดคล้องกับข้อกำหนดของ JSON ไวยากรณ์ดังต่อไปนี้
การคัดลอกรหัสมีดังนี้:
-
"ชื่อ": "bejs",
"เวอร์ชัน": "0.1.0"
"DevDependencies": {
"คำราม": "~ 0.4.0"
"Grunt-Contrib-concat": "~ 0.1.1"
"Grunt-CSS": "> 0.0.0"
-
-
บทความก่อนหน้านี้ของคำราม-Contrib-concat ได้รับการแนะนำ Grunt-CSS เป็นปลั๊กอินที่จะใช้ในบทความนี้
ในเวลานี้เปิดเครื่องมือบรรทัดคำสั่งและป้อนไดเรกทอรีรูทโครงการและพิมพ์คำสั่งต่อไปนี้: การติดตั้ง NPM
ตรวจสอบไดเรกทอรีรากและพบว่ามีไดเรกทอรี Node_Modules เพิ่มเติมรวมถึงไดเรกทอรีย่อยสี่รายการดูรูปภาพ
3. สร้างไฟล์ใหม่ Gruntfile.js
Gruntfile.js ยังอยู่ในไดเรกทอรีรากของโครงการ งานเกือบทั้งหมดถูกกำหนดไว้ในไฟล์นี้ มันเป็นไฟล์ JS ธรรมดาที่สามารถเขียนรหัส JS แทน JSON ได้ เช่น package.json จะต้องส่งไปยัง SVN หรือ GIT เช่นซอร์สโค้ด
ซอร์สโค้ดมีดังนี้
การคัดลอกรหัสมีดังนี้:
module.exports = function (Grunt) {
// การกำหนดค่า
Grunt.initConfig ({
pkg: Grunt.file.readjson ('package.json'),
concat: {
CSS: {
src: ['src/asset/*. css'],
dest: 'dest/asset/all.css'
-
-
cssmin: {
CSS: {
src: 'dest/asset/all.css'
dest: 'dest/asset/all-min.css'
-
-
-
// โหลดปลั๊กอิน concat และ css สำหรับการผสานและการบีบอัดตามลำดับ
Grunt.loadnpmtasks ('Grunt-Contrib-concat');
Grunt.loadnpmtasks ('Grunt-CSS');
// งานเริ่มต้น
Grunt.registerTask ('default', ['concat', 'cssmin']);
-
4. ดำเนินงานคำราม
เปิดบรรทัดคำสั่งป้อนไดเรกทอรีรูทโปรเจ็กต์แล้วคลิกคำราม
จากข้อมูลการพิมพ์จะเห็นได้ว่าการผสานและการบีบอัดที่ประสบความสำเร็จนั้นถูกสร้างขึ้นและไดเรกทอรีปลายทางและไฟล์ที่คาดหวังถูกสร้างขึ้น ในเวลานี้มีการชะลอตัวในไดเรกทอรีโครงการมากขึ้นดังนี้
ณ จุดนี้การผสาน CSS และการบีบอัดจะเสร็จสมบูรณ์