บทช่วยสอนอึก 4 สำหรับผู้เริ่มต้น (เวิร์กโฟลว์ Sass และ JS)

บทแนะนำเกี่ยวกับ Gulp 4 จะอธิบายทีละขั้นตอน วิธีการตั้งค่า Gulp ในเวิร์กโฟลว์ของคุณเพื่อคอมไพล์ไฟล์ Sass และ JavaScript

หากคุณยังไม่เคยใช้ Gulp เราขอแนะนำอย่างยิ่งให้คุณลองดู! คุณสามารถใช้ Gulp เพื่อทำงานที่เป็นประโยชน์มากมาย เช่น รวบรวมไฟล์ Sass ของคุณเป็น CSS ประมวลผลไฟล์ JavaScript และเพิ่มประสิทธิภาพไฟล์ของคุณ

ต่อไปนี้คือขั้นตอนพื้นฐานในการติดตั้งและเรียกใช้ Gulp ที่เราจะกล่าวถึงในบทแนะนำนี้:

1. ติดตั้ง gulp-cli บนบรรทัดคำสั่งของคุณโดยเรียกใช้ npm install gulp-cli -g .
2. ติดตั้ง Gulp โดยเรียกใช้ npm install gulp .
3. ติดตั้งแพ็คเกจ npm อื่นๆ สำหรับเวิร์กโฟลว์อึกของคุณ
4. สร้าง gulpfile.js ไฟล์ในรูทโปรเจ็กต์ของคุณ
5. นำเข้าแพ็คเกจ npm ของคุณเป็นโมดูลใน gulpfile ของคุณ
6. เพิ่มงานของคุณไปที่ gulpfile เพื่อคอมไพล์ไฟล์ SCSS/JS และเรียกใช้งานการเฝ้าดู
7. เรียกใช้ gulp คำสั่งให้รันงานทั้งหมดของคุณ

อึกคืออะไรและทำหน้าที่อะไร

อึกเป็นเครื่องมือที่จะทำงานต่างๆ ให้กับคุณในเวิร์กโฟลว์การพัฒนาเว็บของคุณ มันอาจจะเรียกว่าบันเดิล เครื่องมือสร้าง หรือตัวดำเนินการงาน เครื่องมือที่คล้ายกันคือ Webpack และ Grunt (แม้ว่า Grunt จะล้าสมัยอย่างรวดเร็ว)

นี่คือสิ่งที่เราจะให้ Gulp ทำเพื่อเรา:

1. รวบรวมไฟล์ Sass ของเราเป็น CSS
2. เพิ่มคำนำหน้าผู้ขายใน CSS ของเรา
3. ย่อไฟล์ CSS สุดท้ายของเรา
4. ต่อ (เช่น รวม) ไฟล์ JS ของเรา
5. อัปลักษณ์ไฟล์ JS สุดท้ายของเรา
6. ย้ายไฟล์ CSS/JS สุดท้ายไปยัง /dist . ของเรา โฟลเดอร์

เจ๋งมากใช่มั้ย!

วิธีการทำงานคือ การตั้งค่าและงานทั้งหมดของคุณจะถูกเก็บไว้ใน gulpfile.js ไฟล์. และคุณเรียกใช้ Gulp บนบรรทัดคำสั่งของคุณ

ส่วนที่ดีเกี่ยวกับเรื่องนั้นก็คือเมื่อคุณตั้งค่า gulpfile เรียบร้อยแล้ว คุณจะนำไฟล์ gulpfile ไปใช้กับโปรเจ็กต์อื่นๆ ได้อย่างง่ายดาย ประหยัดเวลาได้มาก!

ไปที่การติดตั้งและตั้งค่า Gulp บนคอมพิวเตอร์ของคุณกัน

วิธีการติดตั้งอึก 4

ก่อนที่คุณจะเรียกใช้ Gulp ได้ คุณจะต้องติดตั้งสองสามสิ่ง:

• ติดตั้ง Node.js หากยังไม่มี
• ติดตั้งยูทิลิตี้บรรทัดคำสั่งอึกโดยเรียกใช้ npm install --global gulp-cli .

เมื่อคุณใช้ Gulp ได้แล้ว ลองดูโปรเจ็กต์ตัวอย่างที่ฉันสร้างซึ่งใช้ Gulp!

เป็นโครงการต้นแบบส่วนหน้าซึ่งเป็นวิธีที่รวดเร็วสำหรับฉันในการเริ่มต้นกับเว็บไซต์ส่วนหน้าง่ายๆ

(ฉันยังมีข้อมูลโค้ดมากมายในส่วนที่เหลือของบทช่วยสอนนี้ คุณจึงสามารถอ้างอิงถึงสิ่งเหล่านั้นได้เช่นกัน!)

ในการตั้งค่าโปรเจ็กต์ต้นแบบส่วนหน้า:

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

ตอนนี้คุณควรมีไฟล์โปรเจ็กต์ที่ตั้งค่า และแพ็คเกจ npm ทั้งหมดที่ติดตั้งไว้ที่เราจะใช้เพื่อรันงานอึก

เนื่องจากไฟล์จาก repo พร้อมใช้งานแล้ว หากคุณพิมพ์ gulp ในบรรทัดคำสั่ง คุณควรเห็นผลลัพธ์ดังนี้:

> gulp
[22:29:48] Using gulpfile ~\Documents\GitHub\frontend-boilerplate\gulpfile.js
[22:29:48] Starting 'default'...
[22:29:48] Starting 'scssTask'...
[22:29:48] Starting 'cacheBustTask'...
[22:29:48] Finished 'cacheBustTask' after 39 ms
[22:29:48] Starting 'jsTask'...
[22:29:48] Finished 'jsTask' after 340 ms
[22:29:48] Finished 'scssTask' after 347 ms
[22:29:48] Starting 'watchTask'...

และคุณได้วิ่งอึก!

เกิดอะไรขึ้นในโปรเจ็กต์เมื่อคุณเรียกใช้ Gulp

เอาล่ะ คุณมีโครงการที่ทำงานสำเร็จแล้ว! ตอนนี้ มาดูรายละเอียดเพิ่มเติมว่ามีอะไรอยู่ในโครงการและทำงานอย่างไร

อันดับแรก ต่อไปนี้คือข้อมูลสรุปสั้นๆ เกี่ยวกับโครงสร้างไฟล์ของโครงการของเรา:

• index.html — ไฟล์ HTML หลักของคุณ
• package.json — มีแพ็คเกจ npm ทั้งหมดที่จะติดตั้งเมื่อคุณเรียกใช้ npm install .
• gulpfile.js — มีการกำหนดค่าและรันงาน Gulp ทั้งหมด
• /แอป — โฟลเดอร์ที่ทำงาน คุณจะแก้ไขไฟล์ SCSS/JS ที่นี่
• /dist — อึกจะส่งออกไฟล์ที่นี่ อย่าแก้ไขไฟล์เหล่านี้

ในเวิร์กโฟลว์ของคุณ คุณจะต้องแก้ไขไฟล์ HTML, SCSS และ JS อึกจะตรวจจับการเปลี่ยนแปลงและรวบรวมทุกอย่าง จากนั้นคุณจะโหลดไฟล์ CSS/JS สุดท้ายจาก /dist โฟลเดอร์ใน index.html . ของคุณ ไฟล์.

ตอนนี้เรามี Gulp ทำงานอย่างไร มาดูวิธีการทำงานของ Gulp กันดีกว่า

สิ่งที่อยู่ใน gulpfile.js คืออะไร

นี่คือคำอธิบายเชิงลึกของแต่ละส่วนของ gulpfile และสิ่งที่พวกเขาทำ:

ขั้นตอนที่ 1:เริ่มต้นโมดูล npm

ที่ด้านบนสุดของ gulpfile.js เรามีค่าคงที่มากมายที่นำเข้าแพ็คเกจ npm ที่เราติดตั้งไว้ก่อนหน้านี้ โดยใช้ require() ฟังก์ชัน

นี่คือสิ่งที่แพ็คเกจของเราทำ:

แพ็คเกจอึก:

• gulp — รันทุกอย่างใน gulpfile.js เรากำลังส่งออกเฉพาะฟังก์ชันอึกเฉพาะที่เราจะใช้ เช่น src , dest , watch , และคนอื่น ๆ. ซึ่งช่วยให้เราสามารถเรียกใช้ฟังก์ชันเหล่านั้นได้โดยตรงโดยไม่ต้องใช้ gulp เช่น เราก็แค่พิมพ์ src() แทนที่จะเป็น gulp.src() .

แพ็คเกจ CSS:

• gulp-sourcemaps — แมปสไตล์ CSS กลับไปที่ไฟล์ SCSS ดั้งเดิมในเครื่องมือพัฒนาเบราว์เซอร์ของคุณ
• gulp-sass — รวบรวม SCSS เป็น CSS
• gulp-postcss — เรียกใช้คำเติมหน้าอัตโนมัติและ cssnano (ดูด้านล่าง)
• autoprefixer — เพิ่มคำนำหน้าผู้ขายให้กับ CSS
• cssnano — ลดขนาด CSS

แพ็คเกจ JS:

• gulp-concat — เชื่อมไฟล์ JS หลายไฟล์เป็นไฟล์เดียว
• gulp-uglify — ลดขนาด JS

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

แพ็คเกจแทนที่สตริง:

• gulp-replace — เพิ่มพารามิเตอร์สตริงในการอ้างอิง CSS/JS สำหรับการป้องกันแคช

ตอนนี้เราได้เพิ่มโมดูลแล้ว มาเริ่มกันเลย!

ขั้นตอนที่ 2:ใช้โมดูลเพื่อเรียกใช้งานอึกของคุณ

"งาน" ในอึกนั้นเป็นฟังก์ชันที่ดำเนินการตามวัตถุประสงค์เฉพาะ

เรากำลังสร้างงานยูทิลิตี้สองสามงานเพื่อคอมไพล์ไฟล์ SCSS และ JS ของเรา และดูไฟล์เหล่านั้นสำหรับการเปลี่ยนแปลงใดๆ จากนั้นงานยูทิลิตี้เหล่านั้นจะทำงานในงานอึกเริ่มต้นของเราเมื่อเราพิมพ์ gulp บนบรรทัดคำสั่ง

การสร้างค่าคงที่สำหรับเส้นทางของไฟล์

ก่อนที่จะเขียนงานของเรา เรามีโค้ดสองสามบรรทัดที่บันทึกเส้นทางของไฟล์เป็นค่าคงที่ นี่เป็นทางเลือก แต่ฉันชอบใช้ตัวแปรพาธ เพื่อที่เราจะได้ไม่ต้องพิมพ์ซ้ำทุกครั้ง:

รหัสนี้สร้าง scssPath และ jsPath ค่าคงที่ที่เราจะใช้เพื่อบอก Gulp ว่าพบไฟล์ใด

งาน Sass

นี่คือรหัสสำหรับงาน Sass ของเรา:

function scssTask(){    
    return src(files.scssPath)
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(postcss([ autoprefixer(), cssnano() ]))
        .pipe(sourcemaps.write('.'))
        .pipe(dest('dist')
    );
}

งาน Sass ของเราเรียกว่า scssTask() ,กำลังทำหลายอย่าง. ใน Gulp คุณสามารถโยงหลายฟังก์ชันได้โดยใช้ฟังก์ชัน Gulp pipe() หลังจากใช้งานครั้งแรก

ในงานของเรา Gulp กำลังเรียกใช้ src() . เป็นครั้งแรก เพื่อโหลดไดเร็กทอรีต้นทางของไฟล์ SCSS มันใช้ค่าคงที่ที่เราสร้างไว้ก่อนหน้านี้ files.scssPath .

จากนั้นหลังจาก src() เรากำลังนำทุกสิ่งทุกอย่างเข้าสู่กระบวนการสร้าง คุณสามารถคิดได้เหมือนกับการเพิ่มส่วนต่างๆ ของไพพ์ลงในไพพ์ที่มีอยู่

ฟังก์ชันที่ทำงานอยู่คือ:

• sourcemaps.init() — ต้องเพิ่ม sourcemap ก่อนหลังจาก src()
• sass() รวบรวมไฟล์ SCSS ทั้งหมดเป็นไฟล์ CSS เดียว
• postcss() รันปลั๊กอินอื่นอีกสองตัว:
  • autoprefixer() เพื่อเพิ่มคำนำหน้าผู้ขายให้กับ CSS
  • cssnano() เพื่อลดขนาดไฟล์ CSS
• sourcemaps.write() สร้างไฟล์ sourcemaps ในไดเร็กทอรีเดียวกัน
• dest() บอกให้อึกใส่ไฟล์ CSS สุดท้ายและไฟล์ซอร์สแมป CSS ลงใน /dist โฟลเดอร์

งาน JS

นี่คือรหัสสำหรับงานของเราในการรวบรวมไฟล์ JS:

function jsTask(){
    return src([files.jsPath])
        .pipe(concat('all.js'))
        .pipe(uglify())
        .pipe(dest('dist')
    );
}

งาน JavaScript ของเราที่เรียกว่า jsTask() , ยังใช้งานหลายฟังก์ชัน:

• src() เพื่อโหลดไฟล์ JS จาก files.jsPath .
• concat() เพื่อเชื่อมไฟล์ JS ทั้งหมดเป็นไฟล์ JS เดียว
• uglify() เพื่อทำให้อัปลักษณ์/ย่อขนาดไฟล์ JS
• dest() เพื่อย้ายไฟล์ JS สุดท้ายไปไว้ใน /dist โฟลเดอร์

งานทำลายแคช

นี่คือรหัสสำหรับงานป้องกันแคช:

var cbString = new Date().getTime();
function cacheBustTask(){
    return src(['index.html'])
        .pipe(replace(/cb=\d+/, 'cb=' + cbString))
        .pipe(dest('.'));
}

ในไฟล์ index.html ฉันใช้ข้อมูลอ้างอิงต่อไปนี้สำหรับไฟล์ CSS และ JS:

<link rel="stylesheet" href="dist/style.css?cb=123">

<script src="dist/all.js?cb=123"></script>

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

ปัญหาคือบางครั้งคุณไม่ต้องการโหลดเวอร์ชันเก่าที่บันทึกไว้ เมื่อคุณได้ทำการเปลี่ยนแปลงในไฟล์ CSS หรือ JS ของคุณและปรับใช้กับเซิร์ฟเวอร์อีกครั้ง คุณต้องการบังคับให้ผู้อื่นดาวน์โหลดไฟล์เหล่านั้นอีกครั้ง

วิธีหนึ่งในการบังคับให้ดาวน์โหลดใหม่คือการเพิ่มสตริงการสืบค้นเล็กน้อย
?cb=123 ต่อท้ายไฟล์อ้างอิงเหล่านั้น หากเบราว์เซอร์โหลดหน้าซ้ำและสตริงการสืบค้นแตกต่างจากครั้งที่แล้ว ไฟล์จะรีเฟรช

ฉันกำลังใช้อึ replace() ฟังก์ชั่นเพื่อค้นหาสตริงที่มี “cb=” และตัวเลขใดๆ และแทนที่ตัวเลขนั้นด้วยตัวเลขใหม่ที่ประกอบด้วยเวลาปัจจุบันที่แปลงเป็นมิลลิวินาทีตั้งแต่ปี 1970

ด้วยวิธีนี้ทุกครั้งที่อึกทำงาน สตริงการสืบค้นจะแตกต่างออกไป และคุณจะต้องแน่ใจว่าไฟล์ CSS และ JS ใหม่ได้รับการโหลดในเบราว์เซอร์ของผู้ใช้

อึกติดตามงาน

อึก watch() ฟังก์ชั่นเป็นคุณสมบัติที่มีประโยชน์อย่างยิ่ง เมื่อคุณเรียกใช้ มันจะทำงานอย่างต่อเนื่อง ดูไฟล์ของคุณเพื่อตรวจจับการเปลี่ยนแปลงใดๆ เมื่อตรวจพบการเปลี่ยนแปลง ระบบจะเรียกใช้งานตามจำนวนที่คุณแจ้ง

วิธีนี้ยอดเยี่ยมเพราะคุณไม่จำเป็นต้องเรียกใช้ gulp . ด้วยตนเอง หลังจากเปลี่ยนโค้ดทุกครั้ง

นี่คือโค้ดตัวอย่างงานดูอึกของเรา:

function watchTask(){
    watch(
        [files.scssPath, files.jsPath],
        parallel(scssTask, jsTask)
    );
}

watch() ฟังก์ชันใช้พารามิเตอร์สามตัว แต่เราแค่ใช้สองตัว:

• globs หมายถึงสตริงพาธของไฟล์
• ตัวเลือก (ไม่ได้ใช้) และ
• งาน หมายถึงงานใดที่เราต้องการเรียกใช้

งานที่เราทำคือดูไฟล์ใน scssPath และ jsPath ไดเรกทอรี จากนั้นหากมีการเปลี่ยนแปลงใดๆ ให้เรียกใช้ scssTask และ jsTask งานพร้อมกัน

ตอนนี้เราได้ตั้งค่างานยูทิลิตี้แล้ว เราต้องตั้งค่างาน Gulp หลักของเรา

เริ่มต้นงานอึก

นี่คืองาน Gulp หลัก ซึ่งจะทำงานโดยอัตโนมัติหากคุณพิมพ์ gulp บนบรรทัดคำสั่ง

exports.default = series(
    parallel(scssTask, jsTask), 
    watchTask);

อึกจะค้นหา default . โดยอัตโนมัติ งานใน gulpfile.js . ของคุณ เมื่อคุณใช้ gulp สั่งการ. ดังนั้นคุณต้องส่งออกงานเริ่มต้นเพื่อให้มันทำงานได้

งานเริ่มต้นของเราจะทำดังต่อไปนี้:

• เรียกใช้ scssTask และ jsTask พร้อมกันโดยใช้ parallel()
• จากนั้นเรียกใช้ watchTask

คุณจะสังเกตเห็นว่าเรากำลังใส่งานทั้งหมดเหล่านั้นไว้ใน series() ฟังก์ชัน

นี่เป็นหนึ่งในการเปลี่ยนแปลงครั้งสำคัญในอึก 4 สำหรับวิธีจัดการงาน คุณต้องห่องานทั้งหมด (แม้แต่งานเดียว) ทั้งใน series() หรือ parallel() .

การเปลี่ยนแปลงในอึก 4

หากคุณเคยใช้ tasks() เพื่อเรียกใช้ทุกอย่าง คุณอาจสังเกตเห็นว่าตอนนี้มีความแตกต่าง

แทนที่จะใช้ gulp.task() เพื่อให้มีฟังก์ชันงานทั้งหมดของคุณ เรากำลังสร้างฟังก์ชันจริง เช่น scssTask() และ watchTask() .

ทั้งนี้เป็นไปตามหลักเกณฑ์อย่างเป็นทางการของ Gulp ในการสร้างงาน

ทีม Gulp แนะนำให้ใช้ exports แทนที่จะเป็น tasks() :

ดังนั้นในขณะที่ยังให้คุณใช้ task() ฟังก์ชัน การสร้างฟังก์ชัน JS สำหรับแต่ละงานแล้วส่งออกเป็นปัจจุบันมากกว่า หากทำได้ ฉันขอแนะนำให้อัปเดตไวยากรณ์ของคุณเพื่อให้เป็นไปตามนี้ เนื่องจากเป็นไปได้ที่อึกจะเลิกใช้ task() ในบางจุด

มีปัญหาในการย้ายข้อมูลจากอึ 3 หรือไม่

หากคุณเคยใช้ Gulp 3 และต้องการเพียงทำให้สิ่งที่แดงๆ ใช้งานได้กับ Gulp 4 แสดงว่าคุณโชคดี!

การเปลี่ยนแปลงที่สำคัญคือวิธีการรันงานของคุณ

อึก 4 แนะนำสองฟังก์ชันใหม่เพื่อเรียกใช้งาน:series() และ parallel() . ช่วยให้คุณมีตัวเลือกในการทำงานหลายงานพร้อมกัน หรือทำงานทีละงาน

ก่อนหน้านี้ ในอึก 3 คุณสามารถแสดงรายการฟังก์ชันเดียวหรือหลายฟังก์ชันในอาร์เรย์ได้ อย่างไรก็ตาม ในอึก 4 ทำได้โดยไม่ใส่ series() หรือ parallel() จะโยนข้อผิดพลาดในขณะนี้

สิ่งที่ชอบ:

AssertionError [ERR_ASSERTION]: Task function must be specified

วิธีแก้ไขอย่างรวดเร็วมีดังนี้

งานในรูปแบบ (เก่า) อึก 3

ในอึก 3 คุณอาจเรียกใช้งานด้วยวิธีนี้:

gulp.task('default', ['sass', 'js', 'watch']);
gulp.watch('app/scss/*.scss', ['sass']);

งานในรูปแบบ Gulp 4

ใส่งานเหล่านั้นลงในฟังก์ชัน series() ดังนี้:

gulp.task('default', gulp.series('sass', 'js', 'watch'));
gulp.watch('app/scss/*.scss', gulp.series('sass'));

และนั่นจะแก้ไขข้อผิดพลาดของฟังก์ชันงานด้วยการเปลี่ยนแปลงที่น้อยที่สุด! 🙂

ดาวน์โหลดไฟล์โครงการ

รหัสทั้งหมดที่ฉันแสดงที่นี่มาจากที่เก็บ GitHub ที่ฉันมีสำหรับต้นแบบส่วนหน้า หมายถึงชุดเริ่มต้นอย่างรวดเร็วสำหรับโครงการเว็บไซต์ส่วนหน้าแบบง่ายๆ

คุณสามารถตรวจสอบ ปรับแต่ง และใช้สำหรับโครงการของคุณเองได้!

ตรวจสอบที่เก็บ GitHub ที่นี่