ค้นหาเว็บไซต์

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 เป็นชุดเครื่องมือที่มีประโยชน์ซึ่งสามารถช่วยคุณปรับปรุงประสิทธิภาพการทำงานได้ หากคุณสนใจเครื่องมือนี้ ฉันขอแนะนำให้คุณตรวจสอบหน้าเอกสารประกอบซึ่งมีให้ที่นี่