บทนำสู่การทำงานอัตโนมัติของ JavaScript ด้วย Gulp

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

ในบทช่วยสอนการทำงานอัตโนมัติของ JavaScript นี้ คุณจะได้เรียนรู้วิธีทำให้กระบวนการออกแบบและการพัฒนาของคุณเป็นแบบอัตโนมัติด้วย Gulp หากคุณเน้นการออกแบบมากขึ้น เราขอแนะนำให้คุณเอาชนะความกลัวที่คุณมีและอ่านต่อ ในทางกลับกัน หากคุณเป็นนักพัฒนา คุณจะสามารถทำความเข้าใจสิ่งนี้ได้เมื่อคุณเข้าใจตรรกะที่อยู่เบื้องหลัง

อึกเป็นระบบบิลด์ที่ใช้สตรีมของ Node.js เพื่อนำวิธีการปลายทางต้นทางแบบอะซิงโครนัสไปสู่การทำงานอัตโนมัติ ทุกอย่างเขียนด้วย JavaScript ดังนั้นจึงเป็นเรื่องง่ายสำหรับทุกคนที่มีความรู้ด้านการเขียนโปรแกรมระดับกลางในการเริ่มต้น กระบวนการสร้างอึกประกอบด้วยกลุ่มผู้เฝ้าดูและงานต่างๆ นอกจากนี้ ชุมชนที่อยู่เบื้องหลัง Gulp ยังคงรักษาไดเร็กทอรีปลั๊กอินขนาดใหญ่ไว้ภายใน npm ซึ่งช่วยให้งานต่างๆ บรรลุผลสำเร็จตั้งแต่การต่อ JavaScript ไปจนถึงการสร้างแบบอักษรไอคอนจาก SVG

ทางเลือกอื่นของ Gulp

มีทางเลือกอื่นมากมาย ซึ่งส่วนใหญ่เกิดขึ้นในช่วงสองสามปีที่ผ่านมา - ทางเลือกที่โดดเด่นที่สุดคือ Grunt การแข่งขันระหว่าง Gulp และ Grunt จะไม่มีวันได้ผู้ชนะที่ชัดเจน เพราะพวกเขาทั้งคู่มีข้อดีและข้อเสีย ดังนั้นฉันจะหลีกเลี่ยงการเจาะลึกลงไปในนั้น โดยสรุป การพึ่งพาการกำหนดค่าอย่างมากของ Grunt คือสิ่งที่นำพาผู้คนไปสู่แนวทาง JavaScript ของ Gulp ในระหว่างนี้ การใช้งาน GUI ดั้งเดิมเช่น Koala ได้รับความสนใจ ส่วนใหญ่มาจากผู้ที่ยับยั้งการเขียนโค้ด อย่างไรก็ตาม ด้วยแอพพลิเคชั่นที่รวมเข้าด้วยกัน มันเป็นไปไม่ได้ที่จะไปถึงระดับของความสามารถในการปรับแต่งและขยายที่ Gulp นำเสนอ

ความรู้พื้นฐานเกี่ยวกับกระบวนการอัตโนมัติ

ปลั๊กอิน

ปลั๊กอินเป็นวิธีการที่ทำให้แต่ละขั้นตอนสำเร็จ ปลั๊กอินถูกติดตั้งผ่าน npm และเริ่มต้นโดยใช้ “require”

งาน

สำหรับอึก งานมีต้นทางและปลายทางเสมอ ระหว่างนั้นวางท่อที่เรียกแต่ละปลั๊กอินและส่งออกผลลัพธ์ที่แปลงไปยังไพพ์ถัดไป

Globs

Globs คือรูปแบบสัญลักษณ์แทนที่อ้างอิงถึงไฟล์ Globs หรืออาร์เรย์ของ globs ถูกใช้เป็นอินพุตในแหล่งงาน

ผู้เฝ้าดู

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

gulpfile.js

นี่คือไฟล์ JavaScript ที่คำสั่ง "อึก" ชี้ไปที่ มันมีทุกอย่างตั้งแต่งานไปจนถึงผู้ดูหรือโค้ดอื่น ๆ ที่ใช้โดยงาน

งานที่ตรงไปตรงมา

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

 sudo npm install npm -g

แฟล็ก -g ระบุว่าการติดตั้งจะเป็นแบบโกลบอล

ตอนนี้คุณพร้อมที่จะติดตั้ง Gulp และเริ่มเรียกใช้งานง่ายๆ ใช้คำสั่งต่อไปนี้เพื่อติดตั้ง Gulp ทั่วโลก

 sudo npm install gulp -g

โปรดทราบว่าคุณยังสามารถใช้คำสั่งเดียวกันเพื่ออัปเดตได้

คุณสามารถดาวน์โหลดชุดเริ่มต้นที่จะช่วยคุณทำงานแรกได้จาก toptal-gulp-tutorial/step1 ประกอบด้วยงานที่ง่ายมากที่คอมไพล์ไฟล์ SCSS เป็น CSS มันใช้ปลั๊กอิน gulp-sass ซึ่งใช้ libsass ฉันเลือก libsass ที่นี่เพราะมันเร็วกว่าทางเลือก Ruby มาก แม้ว่ามันจะขาดฟังก์ชันการทำงานบางอย่างก็ตาม เมื่ออยู่ในไดเรกทอรีรากของโครงการ คุณสามารถใช้คำสั่งต่อไปนี้เพื่อติดตั้งปลั๊กอินทั้งหมดที่จำเป็น

 npm install

คำสั่งนี้อ่านไฟล์ package.json และติดตั้งการพึ่งพาทั้งหมดที่จำเป็น เรากำลังใช้ "npm install" ที่นี่เป็นชวเลขสำหรับสิ่งต่อไปนี้:

 npm install gulp --save-dev npm install gulp-sass --save-dev

แฟล็ก “–save-dev” จะเพิ่มปลั๊กอินที่เลือกไปยัง package.json devDependencies ดังนั้นในครั้งต่อไปที่คุณต้องการติดตั้งทุกอย่าง คุณสามารถใช้ “npm install” ที่มีประโยชน์ได้

ณ จุดนี้ คุณสามารถเรียกใช้งานแรกของคุณได้ รันคำสั่งต่อไปนี้และดูไฟล์ SCSS ทั้งหมดในโฟลเดอร์ /scss ถูกคอมไพล์เป็น CSS ในไดเร็กทอรีที่เกี่ยวข้อง:

 gulp scss

โปรดทราบว่าในตัวอย่างนี้ เรากำลังระบุงานที่จะรัน หากเราละเว้นชื่องาน ชื่อ "ค่าเริ่มต้น" จะถูกเรียกใช้

รหัสเกมส์

ข้างต้นทำได้ในโค้ด JavaScript เพียง 7 บรรทัดเท่านั้น แน่นอน คุณจะรู้สึกเหมือนอยู่บ้านเมื่อเข้าใจความเรียบง่ายของมันแล้ว:

 var gulp = require('gulp'); var scss = require('gulp-sass');

ในตอนเริ่มต้น เราจะเริ่มต้นปลั๊กอินทั้งหมดที่เราจะใช้ อึกเป็นสิ่งเดียวที่เราไม่สามารถทำได้หากไม่มี:

 gulp.task('scss', function() {

เรากำหนดงานชื่อ "scss":

 return gulp.src('scss/*.scss')

ตั้งค่าไฟล์ต้นทางสำหรับงาน สิ่งเหล่านี้ถูกกำหนดให้เป็น globs ในตัวอย่างนี้ เราหมายถึงไฟล์ทั้งหมดในโฟลเดอร์ "scss/" ที่ลงท้ายด้วย ".scss"

 .pipe(scss())

ณ จุดนี้ เราเรียกปลั๊กอิน gulp-sass ที่เรากำหนดไว้ก่อนหน้านี้:

 .pipe(gulp.dest('css'));

สุดท้าย เราใช้ "gulp.dest" เพื่อกำหนดโฟลเดอร์ปลายทางสำหรับไฟล์ของเรา นี่อาจเป็นชื่อไฟล์เดียวหากไฟล์ที่ต่อกัน

เพื่อปรับปรุงการดำเนินการอัตโนมัติของกระบวนการนี้ คุณอาจลองรวมปลั๊กอิน Gulp อื่นๆ สองสามตัว ตัวอย่างเช่น คุณอาจต้องการย่อผลิตภัณฑ์ขั้นสุดท้ายของงานของคุณโดยใช้ gulp-minify-css และเพิ่มคำนำหน้าผู้ขายโดยอัตโนมัติด้วย gulp-autoprefixer

จ้างคนเฝ้ายาม

ฉันได้สร้างชุดเครื่องมือเฝ้ายามที่คุณสามารถใช้ได้ทันที คุณสามารถดาวน์โหลดได้จาก toptal-gulp-tutorial/step2 ประกอบด้วยเวอร์ชันปรับปรุงของงาน SCSS ที่สร้างไว้ก่อนหน้านี้ และผู้เฝ้าดูที่เฝ้าดูไฟล์ต้นฉบับและเรียกใช้งาน ในการเริ่มต้นให้ใช้คำสั่งต่อไปนี้:

 gulp

คำสั่งนี้เริ่มงาน "เริ่มต้น" ซึ่งเริ่มต้นผู้สังเกตการณ์ ณ จุดนี้ คุณสามารถแก้ไขไฟล์ SCSS ใดก็ได้ และดูไฟล์ CSS ที่ได้รับการคอมไพล์ใหม่ คุณจะสามารถเห็นการแจ้งเตือนของอึกในบรรทัดคำสั่ง

รหัสเกมส์

เราได้ตั้งค่าตัวเฝ้าระวังสำหรับงานของเราด้วยโค้ดพิเศษเพียง 3 บรรทัดเท่านั้น ที่กล่าวว่าชุดเริ่มต้นสำหรับ watcher นั้นไม่แตกต่างจากตัวอย่างเบื้องต้นมากนัก ในส่วนนี้ เราจะพูดถึงการเพิ่มเติมและการเปลี่ยนแปลงทั้งหมด

 return gulp.src(['scss/**/*.scss', '!scss/**/_*'])

ในตัวอย่างนี้ แหล่งที่มาของ Gulp มีอาร์เรย์ของ globs ไฟล์แรกรวมไฟล์ทั้งหมดที่ลงท้ายด้วย ".scss" ในโฟลเดอร์ย่อยด้วย และไฟล์ที่สองไม่รวมไฟล์ที่ขึ้นต้นด้วย "_" ด้วยวิธีนี้ เราสามารถใช้ฟังก์ชัน @import ในตัวของ SCSS เพื่อเชื่อมไฟล์ _page.scss

 gulp.task('default', ['scss'], function() {

ที่นี่เรากำหนดงาน "เริ่มต้น" งาน "scss" ถูกรันเป็นการพึ่งพาก่อน "default"

 gulp.watch('scss/**/*.scss', ['scss']);

สุดท้ายนี้ เราเรียกฟังก์ชันนาฬิกาของอึกเพื่อชี้ไปที่ไฟล์ใดๆ ที่ลงท้ายด้วย “.scss” และเมื่อใดก็ตามที่เกิดเหตุการณ์การเปลี่ยนแปลงขึ้น เพื่อเรียกใช้งาน “scss”

ตอนนี้คุณพร้อมที่จะสร้างผู้ดูรายใหม่สำหรับกระบวนการอัตโนมัติอื่นๆ เช่น การต่อ JavaScript การบอกใบ้รหัส การคอมไพล์ CoffeeScript หรือสิ่งอื่นๆ ที่อาจอยู่ในใจ หากต้องการเจาะลึกถึงการใช้งาน JavaScript แบบอัตโนมัตินี้ ฉันขอเสนอให้เพิ่ม gulp-notify ซึ่งจะแจ้งให้คุณทราบเมื่อมีการเรียกใช้งาน นอกจากนี้ คุณสามารถสร้างงานแยกต่างหากเพื่อลดขนาดโค้ด CSS ที่เป็นผลลัพธ์และทำให้งาน "scss" ทำงานเป็นการพึ่งพานั้นได้ สุดท้าย คุณสามารถใช้ gulp-rename เพื่อเพิ่มส่วนต่อท้าย “.min” ให้กับไฟล์ผลลัพธ์ได้

ปลั๊กอิน Gulp ขั้นสูงสำหรับการทำงานอัตโนมัติของ JavaScript

มีปลั๊กอินหลายพันตัวในฐานปลั๊กอินของ Gulp ซึ่งบางปลั๊กอินมีมากกว่าระบบอัตโนมัติ JavaScript ธรรมดาของกระบวนการสร้าง ต่อไปนี้คือตัวอย่างที่โดดเด่นบางส่วน:

BrowserSync

BrowserSync แทรก CSS, JavaScript และรีเฟรชเบราว์เซอร์โดยอัตโนมัติทุกครั้งที่มีการเปลี่ยนแปลง นอกจากนี้ยังมีคุณลักษณะ ghostMode ที่สามารถใช้เพื่อทำให้เพื่อนร่วมงานของคุณหวาดกลัวหรือเพิ่มความเร็วในการทดสอบเบราว์เซอร์ของคุณอย่างมาก

Browserify

Browserify วิเคราะห์การเรียก "ต้องการ" ในแอปพลิเคชันของคุณและแปลงเป็นไฟล์ JavaScript แบบบันเดิล นอกจากนี้ยังมีรายการแพ็คเกจ npm ที่สามารถแปลงเป็นโค้ดของเบราว์เซอร์ได้

เว็บแพ็ค

เช่นเดียวกับ Browserify Webpack มีเป้าหมายเพื่อแปลงโมดูลที่มีการพึ่งพาเป็นไฟล์แบบคงที่ สิ่งนี้ให้อิสระแก่ผู้ใช้มากขึ้นในการตั้งค่าการพึ่งพาโมดูลและไม่ได้มุ่งหมายที่จะทำตามสไตล์โค้ดของ Node.js

กรรม

อึก-กรรมนำสภาพแวดล้อมการทดสอบที่น่าอับอายมาสู่อึก กรรมเป็นไปตามแนวทางการกำหนดค่าขั้นต่ำที่ Gulp ยังรับรอง

บทสรุป

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

คอยติดตามการสอนอึกขั้นสูงในเร็ว ๆ นี้