Grunt - คู่มือฉบับย่อ

Grunt คืออะไร?

Grunt เป็น JavaScript Task Runner ซึ่งสามารถใช้เป็นเครื่องมือบรรทัดคำสั่งสำหรับวัตถุ JavaScript เป็นตัวจัดการงานที่เขียนไว้ด้านบนของ NodeJS

ทำไมต้องใช้ Grunt?

• Grunt สามารถทำงานซ้ำ ๆ ได้อย่างง่ายดายเช่นการคอมไพล์การทดสอบหน่วยการย่อขนาดไฟล์การรันการทดสอบเป็นต้น

• Grunt มีงานในตัวที่ขยายการทำงานของปลั๊กอินและสคริปต์ของคุณ

• ระบบนิเวศของ Grunt นั้นใหญ่มาก คุณสามารถทำอะไรก็ได้โดยอัตโนมัติโดยใช้ความพยายามน้อยลง

ประวัติศาสตร์

บรรทัดแรกของซอร์สโค้ดถูกเพิ่มเข้าไปใน GruntJS ในปี 2011 Grunt v0.4 เปิดตัวเมื่อวันที่ 18 กุมภาพันธ์ 2013 Grunt v0.4.5 ได้รับการเผยแพร่เมื่อวันที่ 12 พฤษภาคม 2014 Grunt เวอร์ชันเสถียรคือ 1.0.0 rc1 ซึ่ง เผยแพร่เมื่อวันที่ 11 กุมภาพันธ์ 2559

ข้อดี

• เมื่อใช้ Grunt คุณสามารถทำการย่อขนาดคอมไพล์และทดสอบไฟล์ได้อย่างง่ายดาย

• Grunt รวมเวิร์กโฟลว์ของนักพัฒนาเว็บ

• คุณสามารถทำงานกับ codebase ใหม่โดยใช้ Grunt ได้เนื่องจากมีโครงสร้างพื้นฐานน้อย

• ช่วยเพิ่มความเร็วในขั้นตอนการพัฒนาและเพิ่มประสิทธิภาพของโครงการ

ข้อเสีย

• เมื่อใดก็ตาม npm อัปเดตแพ็คเกจแล้วคุณต้องรอจนกว่าผู้เขียน Grunt จะอัปเดต

• ทุกงานถูกออกแบบมาเพื่อทำงานที่กำหนด หากคุณต้องการขยายงานที่ระบุคุณต้องใช้เทคนิคบางอย่างเพื่อให้งานสำเร็จลุล่วง

• Grunt มีพารามิเตอร์การกำหนดค่าจำนวนมากสำหรับปลั๊กอินแต่ละตัว โดยปกติไฟล์คอนฟิกูเรชัน Grunt จะมีความยาวมากกว่า

Grunt เป็นตัวเรียกใช้งานที่ใช้ JavaScript ซึ่งหมายความว่าสามารถทำงานซ้ำ ๆ โดยอัตโนมัติในเวิร์กโฟลว์และสามารถใช้เป็นเครื่องมือบรรทัดคำสั่งสำหรับวัตถุ JavaScript

คุณสมบัติที่โดดเด่นที่สุดบางประการของ GruntJS มีดังต่อไปนี้ -

• Grunt ทำให้ขั้นตอนการทำงานง่ายเหมือนการเขียนไฟล์ติดตั้ง

• คุณสามารถทำงานซ้ำ ๆ ได้โดยอัตโนมัติโดยใช้ความพยายามขั้นต่ำ

• Grunt เป็น Task Runner ที่ได้รับความนิยมจาก NodeJS มีความยืดหยุ่นและเป็นที่ยอมรับอย่างกว้างขวาง

• มีวิธีการที่ตรงไปตรงมาซึ่งรวมถึงงานใน JS และ config ใน JSON

• Grunt ย่อขนาด JavaScript, ไฟล์ CSS, ไฟล์ทดสอบ, การคอมไพล์ไฟล์ CSS พรีโปรเซสเซอร์ (SASS, LESS) ฯลฯ

• Grunt มีงานในตัวที่ขยายการทำงานของปลั๊กอินและสคริปต์ของคุณ

• ช่วยเพิ่มความเร็วในขั้นตอนการพัฒนาและเพิ่มประสิทธิภาพของโครงการ

• คุณสามารถทำงานกับ codebase ใหม่โดยใช้ Grunt ได้เนื่องจากมีโครงสร้างพื้นฐานน้อย

• ระบบนิเวศของ Grunt นั้นใหญ่มาก คุณสามารถทำอะไรก็ได้โดยอัตโนมัติโดยใช้ความพยายามน้อยลง

• Grunt ช่วยลดโอกาสที่จะเกิดข้อผิดพลาดในขณะที่ทำงานซ้ำ ๆ

• ปัจจุบัน Grunt มีปลั๊กอินมากกว่า 4000 รายการ

• สามารถใช้ในไซต์การผลิตขนาดใหญ่

บทนี้ให้ขั้นตอนทีละขั้นตอนเกี่ยวกับวิธีการติดตั้ง Grunt บนระบบของคุณ

ข้อกำหนดของระบบสำหรับ Grunt

• Operating System - ข้ามแพลตฟอร์ม

• Browser Support - IE (Internet Explorer 8+), Firefox, Google Chrome, Safari, Opera

การติดตั้ง Grunt

Step 1- เราต้องการ NodeJ เพื่อเรียกใช้ Grunt หากต้องการดาวน์โหลด NodeJs ให้เปิดลิงก์https://nodejs.org/en/คุณจะเห็นหน้าจอดังที่แสดงด้านล่าง -

ดาวน์โหลดไฟล์ zip เวอร์ชันคุณลักษณะล่าสุด

Step 2- จากนั้นเรียกใช้การตั้งค่าเพื่อติดตั้งNodeJsบนคอมพิวเตอร์ของคุณ

Step 3- ถัดไปคุณต้องตั้งค่าตัวแปรสภาพแวดล้อม

Path User Variable

• คลิกขวาที่ My Computer.
• เลือก Properties.
• จากนั้นเลือก Advanced และคลิกที่ Environment Variables.

• ภายใต้หน้าต่างEnvironment Variablesให้ดับเบิลคลิกที่PATHตามที่แสดงในหน้าจอ

• คุณจะได้หน้าต่างEdit User Variableดังภาพ เพิ่ม NodeJs โฟลเดอร์เส้นทางในค่าตัวแปรฟิลด์เป็นC: \ Program Files หากเส้นทางถูกกำหนดไว้แล้วสำหรับไฟล์อื่นคุณต้องใส่อัฒภาค (;) หลังจากนั้นและเพิ่มเส้นทาง NodeJs ดังที่แสดงด้านล่าง -

ในตอนท้ายคลิกปุ่มตกลง

System Variable

• ภายใต้ตัวแปรระบบดับเบิลคลิกที่Pathดังที่แสดงในหน้าจอต่อไปนี้

• คุณจะได้หน้าต่างEdit System Variableดังภาพ เพิ่มพา ธ โฟลเดอร์ NodeJs ในฟิลด์Variable Valueเป็นC: \ Program Files \ nodejs \แล้วคลิกตกลงตามที่แสดงด้านล่าง -

Step 4 - ในการติดตั้งฮึดฮัดในระบบของคุณคุณต้องติดตั้งอินเตอร์เฟสบรรทัดคำสั่ง (CLI) ของ Grunt ทั่วโลกดังที่แสดงด้านล่าง -

npm install -g grunt-cli

การรันคำสั่งด้านบนจะทำให้คำสั่งฮึดฮัดในเส้นทางระบบของคุณซึ่งทำให้เรียกใช้จากไดเร็กทอรีใดก็ได้

การติดตั้งgrunt-cliไม่ได้ติดตั้งตัววิ่งงาน Grunt บทบาทของฮึดฮัด CLIคือการทำงานรุ่นของฮึดฮัดที่ได้รับการติดตั้งติดกับGruntfile ช่วยให้เครื่องสามารถติดตั้ง Grunt หลายเวอร์ชันพร้อมกันได้

Step 5 - ตอนนี้เราจะสร้าง configuration files เพื่อเรียกใช้ Grunt

package.json

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

T สามารถสร้างpackage.jsonพื้นฐานได้โดยพิมพ์คำสั่งต่อไปนี้ในพรอมต์คำสั่ง -

npm init

ไฟล์package.jsonพื้นฐานจะเป็นดังภาพด้านล่าง -

{
   "name": "tutorialspoint",
   "version": "0.1.0",
   "devDependencies": {
      "grunt-contrib-jshint": "~0.10.0",
      "grunt-contrib-nodeunit": "~0.4.1",
      "grunt-contrib-uglify": "~0.5.0"
   }
}

คุณสามารถเพิ่ม Grunt และ gruntplugins ลงในไฟล์pacakge.jsonที่มีอยู่ผ่านคำสั่งต่อไปนี้ -

npm install <module> --save-dev

ในคำสั่งข้างต้น <module> แสดงถึงโมดูลที่จะติดตั้งภายในเครื่อง คำสั่งดังกล่าวจะเพิ่ม <module> ให้กับdevDependenciesโดยอัตโนมัติ

ตัวอย่างเช่นคำสั่งต่อไปนี้จะติดตั้งGruntเวอร์ชันล่าสุดและเพิ่มลงในdevDependenciesของคุณ-

npm install grunt --save-dev

Gruntfile.js

Gruntfile.jsไฟล์ถูกใช้ในการกำหนดการกำหนดค่าของเราสำหรับฮึดฮัด เป็นสถานที่ที่จะเขียนการตั้งค่าของเรา ไฟล์Gruntfile.jsพื้นฐานดังแสดงด้านล่าง -

// our wrapper function (required by grunt and its plugins)
// all configuration goes inside this function
module.exports = function(grunt) {
   // CONFIGURE GRUNT
   grunt.initConfig({
      // get the configuration info from package.json file
      // this way we can use things like name and version (pkg.name)
      pkg: grunt.file.readJSON('package.json'),

      // all of our configuration goes here
      uglify: {
         // uglify task configuration
         options: {},
         build: {}
      }
   });

   // log something
   grunt.log.write('Hello world! Welcome to Tutorialspoint!!\n');

   // Load the plugin that provides the "uglify" task.
   grunt.loadNpmTasks('grunt-contrib-uglify');

   // Default task(s).
   grunt.registerTask('default', ['uglify']);
};

ในการใช้ Grunt คุณต้องติดตั้ง Node.js การติดตั้ง Node.js ได้อธิบายไว้ในบทที่แล้ว คุณสามารถติดตั้งปลั๊กอิน Grunt และ Grunt ได้โดยใช้ตัวจัดการแพ็คเกจ Node.js

ก่อนตั้งค่า Grunt บนระบบคุณสามารถอัพเดต Node package manager ได้โดยใช้คำสั่งต่อไปนี้ -

npm update -g npm

หากคุณใช้ Mac หรือ Linux คุณต้องใช้คำsudoที่จุดเริ่มต้นของบรรทัดคำสั่งเพื่อให้สิทธิ์การเข้าถึงของผู้ดูแลระบบดังที่แสดงด้านล่าง -

sudo npm update -g npm

การติดตั้ง CLI

CLI ย่อมาจาก Command Line Interface ที่รันเวอร์ชันของ Grunt ซึ่งได้รับการติดตั้ง ในการเริ่มต้นกับ Grunt คุณต้องติดตั้งอินเตอร์เฟสบรรทัดคำสั่ง (CLI) ของ Grunt ทั่วโลกดังที่แสดงด้านล่าง -

npm install -g grunt-cli

การรันคำสั่งด้านบนจะทำให้คำสั่งฮึดฮัดในเส้นทางระบบของคุณซึ่งทำให้เรียกใช้จากไดเร็กทอรีใดก็ได้ คุณไม่สามารถติดตั้งฮึดฮัดงานวิ่งโดยการติดตั้งฮึดฮัด CLI ช่วยให้เครื่องสามารถติดตั้ง Grunt หลายเวอร์ชันพร้อมกันได้

การทำงานของ CLI

CLI จะค้นหา Grunt ที่ติดตั้งบนระบบของคุณโดยใช้ระบบrequire ()เมื่อใดก็ตามที่เรียกใช้ Grunt เมื่อใช้grunt-cliคุณสามารถเรียกใช้ Grunt จากไดเร็กทอรีใดก็ได้ในโปรเจ็กต์ของคุณ หากคุณใช้ Grunt ที่ติดตั้งในเครื่องดังนั้น grunt-cli จะใช้ไลบรารี Grunt ที่ติดตั้งในเครื่องและใช้การกำหนดค่าจากไฟล์ Grunt

การทำงานกับโครงการที่มีอยู่และโครงการใหม่

หากคุณกำลังทำงานกับโปรเจ็กต์ที่กำหนดค่าไว้แล้วซึ่งมีpackage.jsonและGruntfileให้ทำตามขั้นตอนง่ายๆตามที่ระบุด้านล่าง -

• ค้นหาเส้นทางไปยังไดเร็กทอรีรากของโปรเจ็กต์
• คุณสามารถติดตั้งการอ้างอิงโดยใช้คำสั่งnpm install
• เรียกใช้ Grunt โดยใช้คำสั่งgrunt

หากคุณกำลังสร้างโปรเจ็กต์ใหม่ให้รวมไฟล์สองไฟล์package.jsonและGruntfileเข้ากับโปรเจ็กต์ของคุณ

• package.json- ไฟล์ package.json ถูกวางไว้ในไดเร็กทอรีรูทของโปรเจ็กต์และใช้เพื่อรันการอ้างอิงแต่ละรายการเมื่อใดก็ตามที่คุณรันคำสั่งnpm installในโฟลเดอร์เดียวกัน

• Gruntfile.js - ไฟล์ Gruntfile.js ใช้เพื่อเขียนการตั้งค่าคอนฟิกสำหรับโปรเจ็กต์

package.json

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

คุณสามารถสร้างpackage.json ได้หลายวิธีตามรายการด้านล่าง -

• คุณสามารถgrunt-initเพื่อสร้างไฟล์ package.json
• คุณยังสามารถสร้างไฟล์ package.json โดยใช้คำสั่งnpm-init

คุณสามารถเขียนข้อมูลจำเพาะดังที่แสดงด้านล่าง -

{
   "name": "tutorialspoint",
   "version": "0.1.0",
   "devDependencies": {
      "grunt-contrib-jshint": "~0.10.0",
      "grunt-contrib-nodeunit": "~0.4.1",
      "grunt-contrib-uglify": "~0.5.0"
   }
}

คุณสามารถเพิ่ม Grunt และ gruntplugins ลงในไฟล์ pacakge.json ที่มีอยู่ได้โดยใช้คำสั่งต่อไปนี้ -

npm install <module> --save-dev

ในที่นี้ <module> แสดงถึงโมดูลที่จะติดตั้งภายในเครื่อง คำสั่งดังกล่าวจะติดตั้งโมดูลที่ระบุและเพิ่มลงในส่วนdevDependenciesโดยอัตโนมัติ

ตัวอย่างเช่นคำสั่งต่อไปนี้จะติดตั้งGruntเวอร์ชันล่าสุดและเพิ่มลงในdevDependenciesของคุณ-

npm install grunt --save-dev

Gruntfile

Gruntfile.jsไฟล์เป็นสถานที่เริ่มต้นที่การตั้งค่าของคุณจะไปฮึดฮัด ไฟล์ Grunt ประกอบด้วยส่วนต่างๆดังต่อไปนี้ -

• ฟังก์ชัน Wrapper
• การกำหนดค่าโครงการและงาน
• กำลังโหลดปลั๊กอินและงาน Grunt
• งานที่กำหนดเอง

ไฟล์Gruntfile.jsพื้นฐานดังแสดงด้านล่าง -

// our wrapper function (required by grunt and its plugins)
// all configuration goes inside this function
module.exports = function(grunt) {

   // CONFIGURE GRUNT
   grunt.initConfig({
      // get the configuration info from package.json file
      // this way we can use things like name and version (pkg.name)
      pkg: grunt.file.readJSON('package.json'),

      // all of our configuration goes here

   });

   // Load the plugin that provides the "uglify" task
   grunt.loadNpmTasks('grunt-contrib-uglify');

   // Default task(s)
   grunt.registerTask('default', ['uglify']);
};

ฟังก์ชัน Wrapper

ในโค้ดด้านบนmodule.exportsคือฟังก์ชัน wrapper ที่การกำหนดค่าทั้งหมดอยู่ภายในฟังก์ชันนี้ เป็นวิธีแสดงการกำหนดค่าให้กับแอปพลิเคชันที่เหลือ

module.exports = function(grunt) {
   //do grunt-related things here
}

การกำหนดค่าโครงการและงาน

คุณสามารถกำหนดค่างาน Grunt ได้เมื่อการกำหนดค่า Grunt พร้อมใช้งาน การกำหนดค่าโครงการสามารถเขียนได้ในgrunt.initConfig ()ส่วน ภายในgrunt.initConfig ()ฟังก์ชั่นใช้ข้อมูลการกำหนดค่าจากไฟล์ package.json และบันทึกลงในpkg คุณสามารถเรียกชื่อโครงการของคุณโดยใช้pkg.nameและรุ่นที่มีpkg.version

กำลังโหลด Grunt Plugins and Tasks

โหลดงานจากปลั๊กอินที่ระบุโดยใช้เมธอดgrunt.loadNpmTasks คุณสามารถติดตั้งปลั๊กอินภายในเครื่องโดยใช้npmและต้องสัมพันธ์กับ Gruntfile คุณสามารถโหลดปลั๊กอินด้วยคำสั่งง่ายๆดังที่แสดงด้านล่าง -

grunt.task.loadNpmTasks(pluginName)

งานที่กำหนดเอง

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

grunt.registerTask('default', ['uglify']);

คุณสามารถกำหนดข้อมูลการกำหนดค่าของโครงการที่เฉพาะเจาะจงสำหรับฮึดฮัดในไฟล์ Gruntfile.js

การกำหนดค่า Grunt

ข้อมูลการกำหนดค่างานสามารถเริ่มต้นได้ใน Gruntfile โดยใช้grunt.initConfig ()วิธีการ ภายในฟังก์ชัน grunt.initConfig ()ให้นำข้อมูลการกำหนดค่าจากไฟล์ package.json การกำหนดค่าจะประกอบด้วยงานที่ชื่อproperties และข้อมูลใด ๆ โดยพลการ

grunt.initConfig({
   jshint: {
      // configuration for jshint task
   },
   cssmin: {
      // configuration for cssmin task
   },
   // Arbitrary non-task-specific properties
   my_files: ['dir1/*.js', 'dir2/*.js'],
});

การกำหนดค่างานและเป้าหมาย

เมื่อคุณรันงาน Grunt จะค้นหาคอนฟิกูเรชันภายใต้คุณสมบัติชื่องาน เราจะกำหนดงานด้วยการกำหนดค่าและตัวเลือกเป้าหมายที่หลากหลายดังที่แสดงด้านล่าง -

grunt.initConfig({
   jshint: {
      myfile1: {
         // configuration for "myfile1" target options
      },
      myfile2: {
         // configuration for "myfile2" target options
      },
   },
   cssmin: {
      myfile3: {
         // configuration for "myfile3" target options
      },
   },
});

นี่jshintงานมีmyfile1และmyfile2เป้าหมายและcssminงานมีmyfile3เป้าหมาย เมื่อคุณรันjshint คำรามมันจะวนซ้ำทั้งงานและเป้าหมายเพื่อประมวลผลคอนฟิกูเรชันของเป้าหมายที่ระบุ

ตัวเลือก

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

grunt.initConfig({
   jshint: {
      options: {
         // task-level options that overrides task defaults
      },
      myfile: {
         options: {
            // "myfile" target options overrides task defaults
         },
      },

      myfile1: {
         // there is no option, target will use task-level options
      },
   },
});

ไฟล์

Grunt ให้แนวคิดบางประการในการระบุไฟล์ที่งานควรดำเนินการและใช้วิธีต่างๆในการระบุการแมปไฟล์src-dest ต่อไปนี้เป็นคุณสมบัติเพิ่มเติมบางส่วนที่รองรับโดยการแมปsrcและdest -

• filter- เป็นฟังก์ชันที่ระบุเส้นทางไฟล์src ที่ตรงกันและส่งกลับค่าจริงหรือเท็จ

• nonull - กำหนดรูปแบบที่ไม่ตรงกันเมื่อตั้งค่าเป็นจริง

• dot - ตรงกับชื่อไฟล์ที่ขึ้นต้นด้วยจุดหรืออย่างอื่น

• matchBase - ตรงกับรูปแบบที่มีเครื่องหมายทับกับชื่อฐานของเส้นทาง

• expand - มันประมวลผลการแมปไฟล์ src-dest

รูปแบบกะทัดรัด

ระบุการแม็พไฟล์ src-dest ต่อเป้าหมายที่สามารถใช้สำหรับงานแบบอ่านอย่างเดียวและต้องการคุณสมบัติsrcเท่านั้นและไม่มีคุณสมบัติdest

grunt.initConfig({
   jshint: {
      myfile1: {
         src: ['src/file1.js','src/file2.js']
      },
   },
   cssmin: {
      myfile2: {
         src: ['src/file3.js','src/file4.js'],
         dest: 'dest/destfile.js',
      },
   },
});

รูปแบบวัตถุไฟล์

ระบุการแม็พไฟล์ src-dest ต่อเป้าหมายซึ่งชื่อคุณสมบัติคือไฟล์destและค่าของมันคือไฟล์src

grunt.initConfig({
   jshint: {
      myfile1: {
         files: {
            'dest/destfile.js':['src/file1.js','src/file2.js'],
            'dest/destfile1.js':['src/file3.js','src/file4.js'],
         },
      },
      myfile2: {
         files: {
            'dest/destfile2.js':['src/file22.js','src/file23.js'],
            'dest/destfile21.js':['src/file24.js','src/file25.js'],
         },
      },
   },
});

รูปแบบอาร์เรย์ไฟล์

ระบุการแม็พไฟล์ src-dest ต่อเป้าหมายโดยใช้คุณสมบัติเพิ่มเติมต่อการแม็พ

grunt.initConfig({
   jshint: {
      myfile1: {
         files: [
            {src:['src/file1.js','src/file2.js'],dest:'dest/file3.js'},
            {src:['src/file4.js','src/file4.js'],dest:'dest/file5.js'},
         ],
      },
      myfile2: {
         files: [
            {src:['src/file6.js','src/file7.js'],dest:'dest/file8/', nonull:true},
            {src:['src/file9.js','src/file10.js'],dest:'dest/file11/', filter:'isFalse'},
         ],
      },
   },
});

รูปแบบที่เก่ากว่า

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

grunt.initConfig({
   jshint: {
      'dest/destfile2.js':['src/file3.js','src/file4.js'],
      'dest/destfile5.js':['src/file6.js','src/file7.js'],
   },
});

ฟังก์ชั่นตัวกรองแบบกำหนดเอง

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

grunt.initConfig({
   clean: {
      myfile:{
         src: ['temp/**/*'],
         filter: 'isFile',
      },
   },
});

รูปแบบ Globbing

Globbing หมายถึงการขยายชื่อไฟล์ สนับสนุนฮึดฮัด globbing โดยใช้built-in โหนด globและminimatch ห้องสมุด รูปแบบ globbing ประกอบด้วยประเด็นต่อไปนี้ -

• *ตรงกับจำนวนตัวอักษรใด ๆ แต่ไม่ได้/
• เหรอ? ตรงกับตัวอักษรตัวเดียว แต่ไม่ได้/
• **จับคู่อักขระจำนวนหนึ่งรวมถึง/ .
• {}ระบุรายการนิพจน์ "หรือ" ที่คั่นด้วยเครื่องหมายจุลภาค
• ! จะลบล้างรูปแบบที่ตรงกันในตอนต้น

ตัวอย่างเช่น -

{src: 'myfile/file1.js', dest: ...} // it specifies the single file

{src: 'myfile/*.js', dest: ...} //it matches all the files ending wth .js

{src: 'myfile/{file1,file2}*.js', dest: ...} //defines the single node glob pattern

{src: ['myfile/*.js', '!myfile/file1.js'], dest: ...} // all files will display in alpha

// order except for file1.js

การสร้างวัตถุไฟล์แบบไดนามิก

เมื่อคุณทำงานกับไฟล์แต่ละไฟล์คุณสามารถใช้คุณสมบัติเพิ่มเติมเพื่อสร้างรายการไฟล์แบบไดนามิก เมื่อคุณตั้งค่าexpand คุณสมบัติเป็นจริงจะเปิดใช้งานคุณสมบัติต่อไปนี้ -

• cwdจับคู่srcทั้งหมดกับเส้นทางนี้

• srcตรงกับรูปแบบเพื่อให้ตรงกับเทียบกับCWD

• คุณสมบัติdestระบุคำนำหน้าพา ธ ปลายทาง

• extจะแทนที่ส่วนขยายที่มีอยู่ด้วยค่าที่สร้างขึ้นในเส้นทางปลายทาง

• extDotระบุว่าช่วงเวลาที่ระบุส่วนขยายนั้นอยู่ที่ใด ใช้ทั้งช่วงเวลาแรกหรือช่วงเวลาสุดท้าย โดยค่าเริ่มต้นจะตั้งเป็นช่วงแรก

• แบนลบส่วนพา ธ ทั้งหมดออกจากเส้นทางปลายทาง

• เปลี่ยนชื่อระบุสตริงที่มีปลายทางใหม่และชื่อไฟล์

คุณสมบัติการเปลี่ยนชื่อ

เป็นฟังก์ชัน JavaScript ที่ไม่ซ้ำกันซึ่งส่งคืนสตริงและคุณไม่สามารถใช้ค่าสตริงเพื่อเปลี่ยนชื่อได้ ในตัวอย่างต่อไปนี้งานคัดลอกจะสร้างข้อมูลสำรองของ README.md

grunt.initConfig({
   copy: {
      backup: {
         files: [{
            expand: true,
            src: ['docs/README.md'],    // creating a backup of README.md
            rename: function () {       // specifies the rename function
               return 'docs/BACKUP.txt'; // returns a string with the complete destination
            }
         }]
      }
   }
});

เทมเพลต

คุณสามารถระบุเทมเพลตโดยใช้ตัวคั่น<%%> โดยจะขยายโดยอัตโนมัติเมื่ออ่านจากการกำหนดค่า ประกอบด้วยคุณสมบัติสองประเภท -

• <%= prop.subprop %>คุณสมบัติถูกใช้เพื่อขยายค่าของprop.subpropใน config ซึ่งสามารถอ้างอิงค่าสตริงอาร์เรย์และอ็อบเจ็กต์อื่น ๆ

• <% %> คุณสมบัติรันโค้ด JavaScript แบบอินไลน์ซึ่งใช้สำหรับการควบคุมโฟลว์หรือการวนซ้ำ

ตัวอย่างเช่น -

grunt.initConfig({
   concat: {
      myfile: {
         options: {
            banner: '/* <%= val %> */\n',
         },
         src: ['<%= myval %>', 'file3/*.js'],
         dest: 'build/<%= file3 %>.js',
      },
   },
   // properties used in task configuration templates
   file1: 'c',
   file2: 'b<%= file1 %>d',
   file3: 'a<%= file2 %>e',
   myval: ['file1/*.js', 'file2/*.js'],
});

การนำเข้าข้อมูลภายนอก

คุณสามารถนำเข้าข้อมูลภายนอกจากไฟล์ package.json ปลั๊กอินgrunt-Contrib- uglifyสามารถใช้เพื่อลดขนาดไฟล์ต้นฉบับและสร้างความคิดเห็นแบนเนอร์โดยใช้ข้อมูลเมตา คุณสามารถใช้grunt.file.readJSONและgrunt.file.readYAMLสำหรับการนำเข้าข้อมูล JSON และ YAML

ตัวอย่างเช่น -

grunt.initConfig({
   pkg: grunt.file.readJSON('package.json'),
   uglify: {
      options: {
         banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      dist: {
         src: 'src/<%= pkg.name %>.js',
         dest: 'dist/<%= pkg.name %>.min.js'
      }
   }
});

ในบทนี้ให้เราสร้างไฟล์ Grunt ง่ายๆโดยใช้ปลั๊กอินต่อไปนี้ -

• grunt-contrib-uglify
• grunt-contrib-concat
• grunt-contrib-jshint
• grunt-contrib-watch

ติดตั้งปลั๊กอินด้านบนทั้งหมดและทำตามขั้นตอนด้านล่างเพื่อสร้างGruntfile.jsอย่างง่าย-

Step 1- คุณต้องสร้างฟังก์ชันWrapperซึ่งจะสรุปการกำหนดค่าสำหรับ Grunt ของคุณ

module.exports = function(grunt) {};

Step 2 - เริ่มต้นวัตถุการกำหนดค่าของคุณตามที่แสดงด้านล่าง -

grunt.initConfig({});

Step 3- จากนั้นอ่านการตั้งค่าโปรเจ็กต์จากไฟล์package.jsonลงในคุณสมบัติpkg ช่วยให้เราอ้างถึงค่าคุณสมบัติภายในไฟล์package.jsonของคุณ

pkg: grunt.file.readJSON('package.json')

Step 4- ถัดไปคุณสามารถกำหนดการกำหนดค่าสำหรับงานได้ ขอให้เราสร้างงานครั้งแรกของเราconcatเพื่อ concatenate ไฟล์ทั้งหมดที่มีอยู่ในsrc /โฟลเดอร์และเก็บตัดแบ่ง.jsไฟล์ภายใต้อ. /โฟลเดอร์

concat: {
   options: {
      // define a string to insert between files in the concatenated output
      separator: ';'
   },
   dist: {
      // files needs to be concatenated
      src: ['src/**/*.js'],
      // location of the concatenated output JS file
      dest: 'dist/<%= pkg.name %>.js'
   }
}

Step 5- ตอนนี้ให้เราสร้างงานอื่นที่เรียกว่าuglifyเพื่อย่อขนาด JavaScript ของเรา

uglify: {
   options: {
      // banner will be inserted at the top of the output which displays the date and time
      banner: '/*! <%= pkg.name %> <%= grunt.template.today() %> */\n'
   },
   dist: {
      files: {
         'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
      }
   }
}

งานข้างต้นสร้างไฟล์ภายในโฟลเดอร์dist / ซึ่งมีไฟล์. js ที่ย่อขนาด <%= concat.dist.dest %>จะสั่งทำให้น่าเกลียดที่จะลดขนาดของแฟ้มที่งาน concat สร้าง

Step 6- ให้เรากำหนดค่าปลั๊กอิน JSHint โดยสร้างงานjshint

jshint: {
   // define the files to lint
   files: ['Gruntfile.js', 'src/**/*.js'],
   // configure JSHint
   options: {
      // more options here if you want to override JSHint defaults
      globals: {
         jQuery: true,
      }
   }
}

งานjshintข้างต้นยอมรับอาร์เรย์ของไฟล์และอ็อบเจ็กต์ของอ็อพชัน งานดังกล่าวข้างต้นจะมองหาการละเมิดใด ๆ ในการเข้ารหัสGruntfile.jsและsrc / ** / *. jsไฟล์

Step 7- ต่อไปเรามีงานเฝ้าดูซึ่งค้นหาการเปลี่ยนแปลงในไฟล์ใด ๆ ที่ระบุและเรียกใช้งานที่คุณระบุ

watch: {
   files: ['<%= jshint.files %>'],
   tasks: ['jshint']
}

Step 8- ต่อไปเราต้องโหลดปลั๊กอินฮึดฮัดซึ่งทั้งหมดได้รับการติดตั้งผ่าน_npm

grunt.loadNpmTasks('grunt-contrib-uglify');

grunt.loadNpmTasks('grunt-contrib-jshint');

grunt.loadNpmTasks('grunt-contrib-watch');

grunt.loadNpmTasks('grunt-contrib-concat');

Step 9- สุดท้ายเราต้องกำหนดงานเริ่มต้น

grunt.registerTask('default', ['jshint', 'concat', 'uglify']);

เริ่มต้นงานสามารถทำงานได้โดยเพียงแค่พิมพ์แสมคำสั่งในบรรทัดคำสั่ง

นี่คือGruntfile.js ที่สมบูรณ์ของคุณ-

module.exports = function(grunt) {

   grunt.initConfig({
      pkg: grunt.file.readJSON('package.json'),
      concat: {
         options: {
            separator: ';'
         },
         dist: {
            src: ['src/**/*.js'],
            dest: 'dist/<%= pkg.name %>.js'
         }
      },
      uglify: {
         options: {
            banner: '/*! <%= pkg.name %> <%= grunt.template.today() %> */\n'
         },
         dist: {
            files: {
               'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
            }
         }
      },
      jshint: {
         // define the files to lint
         files: ['Gruntfile.js', 'src/**/*.js'],
         // configure JSHint
         options: {
            // more options here if you want to override JSHint defaults
            globals: {
               jQuery: true,
            }
         }
      },
      watch: {
         files: ['<%= jshint.files %>'],
         tasks: ['jshint']
      }
   });

   grunt.loadNpmTasks('grunt-contrib-uglify');
   grunt.loadNpmTasks('grunt-contrib-jshint');
   grunt.loadNpmTasks('grunt-contrib-watch');
   grunt.loadNpmTasks('grunt-contrib-concat');

   grunt.registerTask('default', ['jshint', 'concat', 'uglify']);

};

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

งานนามแฝง

เมื่อใดก็ตามที่ระบุรายการงานไว้งานอื่น ๆ อย่างน้อยหนึ่งงานสามารถถูกรวมนามโดยงานใหม่ได้ เล่นนามแฝงในทางกลับกันจะทำงานทุกงานที่ระบุไว้ในTasklist Tasklistอาร์กิวเมนต์ควรจะอาร์เรย์ของงานตามที่แสดงด้านล่าง -

grunt.registerTask(taskName, [description, ] taskList)

ตัวอย่างเช่นเมื่อคุณกำหนดtaskListด้วยงานjshint , concatและuglifyและระบุtaskNameเป็นค่าเริ่มต้นงานที่แสดงรายการทั้งหมดจะถูกรันโดยอัตโนมัติหากดำเนินการGruntโดยไม่ระบุงานใด ๆ

grunt.registerTask('default', ['jshint', 'concat', 'uglify']);

คุณยังสามารถระบุอาร์กิวเมนต์งานได้ตามที่แสดงด้านล่าง -

grunt.registerTask('dist', ['concat:dist', 'uglify:dist']);

ในงานข้างต้นนามแฝงdistจะทำงานทั้งconcatและuglifyงาน

หลายงาน

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

เมื่อคุณระบุทั้งงานและเป้าหมายระบบจะประมวลผลเฉพาะคอนฟิกูเรชันเป้าหมายที่ระบุเท่านั้น

grunt concat:foo

คำสั่งดังกล่าวจะทำงานเฉพาะเป้าหมายfoo

เมื่อคุณระบุเฉพาะงานเป้าหมายทั้งหมดจะถูกประมวลผล

grunt concat

คำสั่งดังกล่าวจะทำซ้ำบนเป้าหมายทั้งหมดของงานconcat

เมื่อคุณเปลี่ยนชื่องานด้วยgrunt.task.renameTaskคุณสมบัติที่มีชื่องานใหม่จะถูกค้นหาในวัตถุ config โดย Grunt

grunt.initConfig({
   log: {
      foo: [1, 2, 3],
      bar: 'Welcome to tutorialspoint',
      sap: true
   }
});

grunt.registerMultiTask('log', 'Log stuff.', function() {
   grunt.log.writeln(this.target + ': ' + this.data);
});

ในตัวอย่างข้างต้นหลายงานจะเข้าสู่ระบบfoo: 1,2,3ถ้าฮึดฮัดกำลังวิ่งผ่านบันทึกเสียงฮึดฮัด: fooหรือมันจะเข้าสู่ระบบบาร์: ยินดีต้อนรับสู่ tutorialspointเมื่อใดก็ตามที่วิ่งผ่านบันทึกเสียงฮึดฮัด: บาร์ มันจะเข้าสู่ระบบfoo: 1,2,3แล้วบาร์: ยินดีต้อนรับสู่ tutorialspointแล้วSAP: จริงเมื่อวิ่งฮึดฮัดเป็นบันทึกเสียงฮึดฮัด

งานพื้นฐาน

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

grunt.registerTask(taskName, [description, ] taskFunction)

ในตัวอย่างต่อไปนี้งานจะบันทึกfoo โดยทดสอบ 123ว่า Grunt ถูกดำเนินการผ่านคำสั่งgrunt foo: testing: 123หรือไม่ เมื่อใดก็ตามที่งานจะดำเนินการโดยไม่ขัดแย้งเป็นfoo แสมงานจะเข้าสู่ระบบ foo ไม่มี args

grunt.registerTask('foo', 'A simple task to logs stuff.', function(arg1, arg2) {
   if (arguments.length === 0) {
      grunt.log.writeln(this.name + ", no args");
   } else {
      grunt.log.writeln(this.name + ", " + arg1 + " " + arg2);
   }
});

งานที่กำหนดเอง

หากคุณไม่ต้องการทำตามโครงสร้างแบบหลายงานคุณสามารถกำหนดงานที่กำหนดเองได้ดังที่แสดงด้านล่าง -

grunt.registerTask('default', 'My "default" task description.', function() {
  grunt.log.writeln('Currently running the "default" task.');
});

เป็นไปได้ที่จะรันงานภายในงานอื่นดังที่แสดงด้านล่าง -

grunt.registerTask('foo', 'My "foo" task.', function() {
   // Enqueue bar and baz tasks, to run after foo completes, in-order.
   grunt.task.run('bar', 'baz');
   // Or:
   grunt.task.run(['bar', 'baz']);
});

คุณยังสามารถสร้างงานอะซิงโครนัสได้ดังที่แสดงด้านล่าง -

grunt.registerTask('asyncfoo', 'My "asyncfoo" task.', function() {
   // Force task into async mode and grab a handle to the done() function.
   var done = this.async();
   // Run some sync stuff.
   grunt.log.writeln('Processing your task..');
   // Run some async stuff.
   setTimeout(function() {
      grunt.log.writeln('Finished!');
      done();
   }, 1000);
});

คุณสามารถสร้างงานที่สามารถเข้าถึงชื่อและอาร์กิวเมนต์ดังที่แสดงด้านล่าง -

grunt.registerTask('foo', 'My task "foo" .', function(a, b) {
   grunt.log.writeln(this.name, a, b);
});

// Usage:
// grunt foo
//   logs: "foo", undefined, undefined
// grunt foo:bar
//   logs: "foo", "bar", undefined
// grunt foo:bar:baz
//   logs: "foo", "bar", "baz"

คุณสามารถสร้างงานของคุณในลักษณะที่เมื่อใดก็ตามที่มีการบันทึกข้อผิดพลาดงานอาจล้มเหลวดังที่แสดงด้านล่าง -

grunt.registerTask('foo', 'My task "foo" .', function() {
   if (failureOfSomeKind) {
      grunt.log.error('This is an error message.');
   }

   // If this task had errors then fail by returning false
   if (ifErrors) { return false; }

   grunt.log.writeln('This is success message');
});

เมื่อใดก็ตามที่งานล้มเหลวงานต่อไปนี้ทุกอย่างจะถูกยกเลิกเว้นแต่จะระบุ--force

grunt.registerTask('foo', 'My task "foo" .', function() {
   // Fail synchronously.
   return false;
});

grunt.registerTask('bar', 'My task "bar" .', function() {
   var done = this.async();
   setTimeout(function() {
      // Fail asynchronously.
      done(false);
   }, 1000);
});

งานอาจขึ้นอยู่กับงานอื่น ๆ เพื่อให้การดำเนินการสำเร็จ โปรดจำไว้ว่าgrunt.task.requiresจะไม่ดำเนินการงานอื่นจริง แต่จะตรวจสอบเพื่อดูว่าได้ดำเนินการแล้วและไม่ล้มเหลว

grunt.registerTask('foo', 'My task "foo" .', function() {
   return false;
});

grunt.registerTask('bar', 'My task "bar" .', function() {
   // Fail task if foo task failed or never ran.
   grunt.task.requires('foo');
   // This code executes if the foo task executed successfully.
   grunt.log.writeln('Hello, World.. Welcome to Tutorialspoint!..');
});

// Usage:
// grunt foo bar doesn't log, because foo failed to execute.
// **Note: This is an example of space-separated sequential commands,
// (similar to executing two lines of code: `grunt foo` then `grunt bar`)
// grunt bar doesn't log, because foo never ran.

งานอาจล้มเหลวเมื่อไม่พบคุณสมบัติการกำหนดค่าที่ต้องการ

grunt.registerTask('foo', 'My task "foo" .', function() {
   // Fail task if meta.name config properties is missing
   // Format 1: String 
   grunt.config.requires('meta.name');
   // or Format 2: Array
   grunt.config.requires(['meta', 'name']);
   // Log... conditionally.
   grunt.log.writeln('This only log if meta.name is defined in the config.');
});

Tasks สามารถเข้าถึงคุณสมบัติการกำหนดค่าดังที่แสดงด้านล่าง -

grunt.registerTask('foo', 'My task "foo" .', function() {
   // Log the value of the property. Returns null if the property is undefined.
   grunt.log.writeln('The meta.name property is: ' + grunt.config('meta.name'));
   // Also logs the value of the property. Returns null if the property is undefined.
   grunt.log.writeln('The meta.name property is: ' + grunt.config(['meta', 'name']));
});