อาจมีขั้นตอนต่อไปนี้
โครงการใหม่ bejs
สร้างไฟล์ใหม่ package.json
สร้างไฟล์ใหม่ Gruntfile.js
รันงานคำรามบนบรรทัดคำสั่ง
1. โครงการใหม่ bejs
ซอร์สโค้ดถูกวางไว้ภายใต้ SRC และไดเรกทอรีมีไฟล์ JS สองไฟล์คือ selector.js และ ajax.js. หลังจากการรวบรวมรหัสจะถูกวางไว้ใน DEST และเสียงฮึดฮัดนี้จะถูกสร้างขึ้นโดยอัตโนมัติ
2. สร้างแพ็คเกจใหม่ json
Package.json ถูกวางไว้ในไดเรกทอรีรูทและมีข้อมูลเมตาบางส่วนของโครงการเช่นชื่อโครงการคำอธิบายหมายเลขเวอร์ชันแพ็คเกจการพึ่งพา ฯลฯ ควรส่งไปยัง SVN หรือ GIT เช่นซอร์สโค้ด โครงสร้างโครงการปัจจุบันมีดังนี้
Package.JSON เนื้อหาต้องสอดคล้องกับข้อกำหนดของ JSON ไวยากรณ์ดังต่อไปนี้
การคัดลอกรหัสมีดังนี้:
-
"ชื่อ": "bejs",
"เวอร์ชัน": "0.1.0"
"DevDependencies": {
"คำราม": "~ 0.4.0"
"Grunt-Contrib-Jshint": "~ 0.1.1"
"Grunt-Contrib-Uglify": "~ 0.1.2"
"Grunt-Contrib-concat": "~ 0.1.1"
-
-
Grunt in Devdependencies ได้รับการติดตั้งในบทความก่อนหน้าในขณะที่ Grunt-Contrib-Jshint/Grunt-Contrib-Uglify/Grunt-Contrib-concat ไม่ได้ติดตั้ง สามสำหรับสามงาน
การตรวจสอบไวยากรณ์ Grunt-Contrib-JS
การบีบอัดคำตอบที่น่าเบื่อ
Grunt-Contrib-concat merge ไฟล์
ในเวลานี้เปิดเครื่องมือบรรทัดคำสั่งและป้อนไดเรกทอรีรูทโครงการและพิมพ์คำสั่งต่อไปนี้: การติดตั้ง NPM
ตรวจสอบไดเรกทอรีรูทอีกครั้งและพบว่ามีไดเรกทอรี node_modules เพิ่มเติมรวมถึงไดเรกทอรีย่อยสี่รายการดูรูปภาพ
3. สร้างไฟล์ใหม่ Gruntfile.js
Gruntfile.js ยังอยู่ในไดเรกทอรีรากของโครงการ งานเกือบทั้งหมดถูกกำหนดไว้ในไฟล์นี้ มันเป็นไฟล์ JS ธรรมดาที่สามารถเขียนรหัส JS แทน JSON ได้ เช่น package.json จะต้องส่งไปยัง SVN หรือ GIT เช่นซอร์สโค้ด
Gruntfile.js ประกอบด้วยเนื้อหาต่อไปนี้
ฟังก์ชั่น wrapper มีโครงสร้างต่อไปนี้ นี่เป็นวิธีทั่วไปในการเขียน Node.js ใช้การส่งออกเพื่อเปิดเผย API
การคัดลอกรหัสมีดังนี้:
module.exports = function (Grunt) {
// ทำสิ่งที่เกี่ยวข้องกับคำรามที่นี่
-
การกำหนดค่าโครงการและงาน
โหลดปลั๊กอินและงาน
ปรับแต่งงานการดำเนินการ
ตัวอย่างนี้เสร็จสิ้นงานต่อไปนี้
ผสานไฟล์ภายใต้ src (ajax.js/selector.js) กับ domop.js
บีบอัด domop.js เป็น domop.min.js
ไฟล์ทั้งสองถูกวางไว้ในไดเร็กทอรี dest
gruntfile.js สุดท้ายมีดังนี้
การคัดลอกรหัสมีดังนี้:
module.exports = function (Grunt) {
// การกำหนดค่า
Grunt.initConfig ({
pkg: Grunt.file.readjson ('package.json'),
concat: {
domop: {
src: ['src/ajax.js', 'src/selector.js'],
dest: 'dest/domop.js'
-
-
uglify: {
ตัวเลือก: {
แบนเนอร์: '/*! < %= pkg.name %> < %= grunt.template.today ("yyyy-mm-dd") %> *// n '
-
สร้าง : {
src: 'dest/domop.js'
dest: 'dest/domop.min.js'
-
-
-
// โหลดปลั๊กอิน concat และ uglify สำหรับการผสานและการบีบอัดตามลำดับ
Grunt.loadnpmtasks ('Grunt-Contrib-concat');
Grunt.loadnpmtasks ('Grunt-Contrib-Uglify');
// ลงทะเบียนงาน
Grunt.registerTask ('default', ['concat', 'uglify']);
-
4. ดำเนินงานคำราม
เปิดบรรทัดคำสั่งป้อนไดเรกทอรีรูทโปรเจ็กต์แล้วคลิกคำราม
จากข้อมูลการพิมพ์จะเห็นได้ว่าการผสานและการบีบอัดที่ประสบความสำเร็จนั้นถูกสร้างขึ้นและไดเรกทอรีปลายทางและไฟล์ที่คาดหวังถูกสร้างขึ้น ในเวลานี้มีการชะลอตัวในไดเรกทอรีโครงการมากขึ้นดังนี้
ตกลงนี่คือสองงานทั่วไปคือ concat และ uglify, jshint ฯลฯ ซึ่งไม่ได้รับการแนะนำ รหัสใน Gruntfile.js ไม่ได้ตีความทีละคน นักเรียนที่สนใจสามารถค้นหาได้ในเอกสารอย่างเป็นทางการของ Gruntjs