Gulp - ชุดเครื่องมือสำหรับการทำงานอัตโนมัติที่เจ็บปวดในการพัฒนา
Gulp เป็นชุดเครื่องมือขนาดเล็กที่ทำงานซ้ำๆ โดยอัตโนมัติ งานที่ทำซ้ำๆ เหล่านั้นมักจะรวบรวมไฟล์ CSS, JavaScript หรือโดยทั่วไปเมื่อคุณใช้เฟรมเวิร์กที่เกี่ยวข้องกับไฟล์ JavaScript/CSS ที่ไม่เป็นมาตรฐาน คุณจะต้องใช้เครื่องมืออัตโนมัติที่รวบรวมไฟล์เหล่านั้น รวมเข้าด้วยกันและรวบรวมทุกอย่างเพื่อให้เบราว์เซอร์ของคุณสามารถเข้าใจได้ง่าย มัน.
อึกมีประโยชน์ในการทำงานต่อไปนี้โดยอัตโนมัติ:
- รวบรวมไฟล์ JS และ CSS
- กำลังรีเฟรชหน้าเบราว์เซอร์เมื่อคุณบันทึกไฟล์
- เรียกใช้การทดสอบหน่วย
- การวิเคราะห์โค้ด
- การคัดลอกไฟล์ที่แก้ไขไปยังไดเร็กทอรีเป้าหมาย
หากต้องการติดตามไฟล์ทั้งหมดที่คุณต้องการสร้างไฟล์ Gulp พัฒนาเครื่องมืออัตโนมัติ หรือทำงานอัตโนมัติ คุณต้องสร้างไฟล์ package.json โดยพื้นฐานแล้วไฟล์จะมีคำอธิบายว่ามีอะไรอยู่ภายในโปรเจ็กต์ของคุณ สิ่งอ้างอิงที่คุณต้องการเพื่อให้โปรเจ็กต์ของคุณทำงานได้
ในบทช่วยสอนนี้ คุณจะได้เรียนรู้วิธีการติดตั้ง Gulp และวิธีทำให้งานพื้นฐานบางอย่างสำหรับโปรเจ็กต์ของคุณเป็นแบบอัตโนมัติ เราจะใช้ npm ซึ่งย่อมาจาก node package manager มีการติดตั้งด้วย Node.js และคุณสามารถตรวจสอบได้ว่าคุณติดตั้ง Nodejs และ npm ด้วยสิ่งต่อไปนี้แล้วหรือไม่
node --version
npm --version
หากคุณยังไม่ได้ติดตั้งบนระบบของคุณ ฉันขอแนะนำให้คุณตรวจสอบบทช่วยสอน: ติดตั้ง Nodejs ล่าสุดและเวอร์ชัน NPM ในระบบ Linux
วิธีการติดตั้ง Gulp ใน Linux
การติดตั้ง gulp-cli สามารถทำได้ด้วย npm โดยใช้คำสั่งต่อไปนี้
npm install --global gulp-cli
หากคุณต้องการติดตั้ง โมดูล gulp ในเครื่อง (สำหรับโครงการปัจจุบันเท่านั้น) คุณสามารถใช้คำแนะนำด้านล่าง:
สร้างไดเร็กทอรีโปรเจ็กต์และนำทางไปในนั้น:
mkdir myproject
cd myproject
จากนั้น ใช้คำสั่งต่อไปนี้เพื่อเริ่มต้นโครงการของคุณ:
npm init
หลังจากรันคำสั่งข้างต้น คุณจะถูกถามคำถามเพื่อตั้งชื่อโปรเจ็กต์ คำอธิบายเวอร์ชัน และอื่นๆ สุดท้ายยืนยันข้อมูลทั้งหมดที่คุณให้ไว้:
ตอนนี้เราสามารถติดตั้งแพ็คเกจ gulp ในโครงการของเราด้วย:
npm install --save-dev gulp
ตัวเลือก --save-dev
บอกให้ npm อัปเดตไฟล์ package.json ด้วย devDependencies ใหม่
โปรดทราบว่า devDependencies จำเป็นต้องได้รับการแก้ไขในระหว่างการพัฒนา ในขณะที่การพึ่งพาระหว่างรันไทม์ เนื่องจาก Gulp เป็นเครื่องมือที่ช่วยเราในการพัฒนา จึงจำเป็นต้องได้รับการแก้ไข ณ เวลาการพัฒนา
สร้างไฟล์อึก
ตอนนี้เรามาสร้าง gulpfile กันดีกว่า งานที่เราต้องการเรียกใช้จะพบได้ในไฟล์นั้น จะถูกโหลดโดยอัตโนมัติเมื่อใช้ คำสั่ง gulp ใช้โปรแกรมแก้ไขข้อความสร้างไฟล์ชื่อ gulpfile.js เพื่อจุดประสงค์ของบทช่วยสอนนี้ เราจะสร้างการทดสอบง่ายๆ
คุณสามารถแทรกโค้ดต่อไปนี้ลงใน gulpfile.js ของคุณ:
var gulp = require('gulp');
gulp.task('hello', function(done) {
console.log('Hello world!');
done();
});
บันทึกไฟล์และตอนนี้ลองเรียกใช้ด้วย:
gulp hello
คุณควรเห็นผลลัพธ์ต่อไปนี้:
นี่คือสิ่งที่โค้ดข้างต้นทำ:
- var gulp=need('gulp'); – นำเข้าโมดูล gulp
- gulp.task('hello', function(done) { – กำหนดงานที่จะพร้อมใช้งานจากบรรทัดคำสั่ง
- console.log('Hello world!'); – เพียงพิมพ์ “Hellow world! ” ลงบนหน้าจอ
- done(); – เราใช้ฟังก์ชัน callback นี้เพื่อสั่งให้อึกว่างานของเราเสร็จสิ้นแล้ว
แน่นอนว่าข้างต้นเป็นเพียงตัวอย่างที่แสดงให้เห็นว่าสามารถจัดระเบียบ gulpfile.js ได้อย่างไร หากคุณต้องการดูงานที่พร้อมใช้งานจาก gulpfile.js คุณสามารถใช้คำสั่งต่อไปนี้:
gulp --tasks
ปลั๊กอินอึก
Gulp มีปลั๊กอินหลายพันรายการให้เลือกใช้งาน โดยทั้งหมดมีฟังก์ชันการใช้งานที่แตกต่างกัน คุณสามารถตรวจสอบได้ที่หน้าปลั๊กอินของ Gulp
ด้านล่างนี้เราจะใช้ปลั๊กอิน minify-html ในตัวอย่างที่เป็นประโยชน์มากขึ้น ด้วยฟังก์ชันด้านล่าง คุณสามารถย่อขนาดไฟล์ HTML และวางลงในไดเร็กทอรีใหม่ได้ แต่ก่อนอื่น เราจะติดตั้งปลั๊กอิน gulp-minify-html:
npm install --save-dev gulp-minify-html
คุณสามารถทำให้ gulpfile.js มีลักษณะดังนี้:
cat gulpfile.js
ผลลัพธ์ตัวอย่าง
// including plugins
var gulp = require('gulp')
, minifyHtml = require("gulp-minify-html");
// task
gulp.task('minify-html', function (done) {
gulp.src('./src/*.html') // path to your files
.pipe(minifyHtml())
.pipe(gulp.dest('./dest'));
done()
});
จากนั้นคุณสามารถย่อขนาดไฟล์ HTML โดยใช้คำสั่งต่อไปนี้
gulp minify-html
du -sh /src dest/
บทสรุป
Gulp เป็นชุดเครื่องมือที่มีประโยชน์ซึ่งสามารถช่วยคุณปรับปรุงประสิทธิภาพการทำงานได้ หากคุณสนใจเครื่องมือนี้ ฉันขอแนะนำให้คุณตรวจสอบหน้าเอกสารประกอบซึ่งมีให้ที่นี่