กวดวิชาอึกง่ายสุดสำหรับผู้เริ่มต้น

ทุกวันนี้ การใช้เครื่องมือสร้างเป็นส่วนสำคัญของเวิร์กโฟลว์การพัฒนาเว็บของคุณ

อึกเป็นหนึ่งในเครื่องมือสร้างที่ได้รับความนิยมมากที่สุดในปัจจุบัน (พร้อมกับ Webpack)

แต่มีช่วงการเรียนรู้ที่แน่นอนสำหรับการเรียนรู้อึก

อุปสรรคที่ใหญ่ที่สุดประการหนึ่งคือการหาชิ้นส่วนต่างๆ ที่ดูเหมือนหลายร้อยส่วนที่เกี่ยวข้องกัน

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

บทช่วยสอนนี้จะแนะนำคุณเกี่ยวกับพื้นฐานของ npm (ตัวจัดการแพ็คเกจโหนด) และการตั้งค่าอึกสำหรับโปรเจ็กต์ส่วนหน้าของคุณ

เมื่อเสร็จแล้ว คุณจะรู้สึกมั่นใจมากขึ้นในการตั้งค่าเวิร์กโฟลว์และการใช้บรรทัดคำสั่ง!

แล้วเรื่องใหญ่ของอึกคืออะไร

อึกช่วยประหยัดเวลาได้มาก การใช้อึกจะทำให้คอมพิวเตอร์ของคุณจัดการกับงานที่น่าเบื่อได้ เช่น:

• รวบรวมไฟล์ Sass เป็น CSS
• เชื่อม (รวม) ไฟล์ JavaScript หลายไฟล์เข้าด้วยกัน
• ย่อ (บีบอัด) ไฟล์ CSS และ JS ของคุณ
• และเรียกใช้งานด้านบนโดยอัตโนมัติเมื่อตรวจพบการเปลี่ยนแปลงไฟล์

อึกสามารถทำงานที่ซับซ้อนกว่างานที่ฉันได้กล่าวไว้ข้างต้นได้มาก อย่างไรก็ตาม บทช่วยสอนนี้จะเน้นเฉพาะพื้นฐานของอึกและวิธีการทำงาน

โครงร่างด่วนของสิ่งที่เราจะทำ

ต่อไปนี้คือขั้นตอนในบทช่วยสอนนี้:

1. ติดตั้ง Node.js และ npm ลงในคอมพิวเตอร์ของคุณ
2. ติดตั้ง Gulp และแพ็คเกจอื่นๆ ที่จำเป็นสำหรับโครงการของคุณ
3. กำหนดค่าไฟล์ gulpfile.js ของคุณเพื่อเรียกใช้งานที่คุณต้องการ
4. ให้คอมพิวเตอร์ทำงานแทนคุณ! 🙂

อย่ากังวลหากคุณไม่เข้าใจข้อกำหนดทั้งหมดข้างต้นโดยสิ้นเชิง ฉันจะอธิบายทุกอย่างทีละขั้นตอน

เริ่มกันเลย!

ตั้งค่าสภาพแวดล้อมของคุณ

Node.js

เพื่อให้ Gulp ทำงานได้บนคอมพิวเตอร์ของคุณ คุณต้องติดตั้ง Node.js ลงบนสภาพแวดล้อมภายในของคุณ

Node.js อธิบายตัวเองว่าเป็น “รันไทม์ JavaScript” ซึ่งถือเป็น JavaScript แบ็คเอนด์ อึกทำงานโดยใช้ Node ดังนั้นคุณจำเป็นต้องติดตั้ง Node ก่อนเริ่มใช้งาน

คุณสามารถดาวน์โหลดได้จากเว็บไซต์ Node.js เมื่อคุณติดตั้ง Node มันจะติดตั้ง npm บนคอมพิวเตอร์ของคุณด้วย

คุณถาม npm คืออะไร

Npm (ตัวจัดการแพ็คเกจโหนด)

Npm คือคอลเล็กชันปลั๊กอิน JavaScript ที่อัปเดตอย่างต่อเนื่อง (เรียกว่าแพ็คเกจ) ซึ่งเขียนโดยนักพัฒนาทั่วโลก อึกเป็นหนึ่งในปลั๊กอินเหล่านั้น (คุณยังต้องการอีกเล็กน้อย ซึ่งเราจะอธิบายในภายหลัง)

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

นี่คือไวยากรณ์พื้นฐานในการติดตั้งแพ็คเกจ:

npm install [Package Name]

ดูเหมือนตรงไปตรงมาใช่ไหม

โฟลเดอร์ node_modules

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

หากคุณเคยมีโครงการที่มีโฟลเดอร์ node_modules และกล้าที่จะเห็นสิ่งที่อยู่ภายใน คุณอาจเห็นว่ามีโฟลเดอร์และไฟล์ที่ซ้อนกันจำนวนมาก (และฉันหมายถึง LOTS)

ทำไมสิ่งนี้ถึงเกิดขึ้น

นี่เป็นเพราะแพ็คเกจ npm มักจะพึ่งพาแพ็คเกจ npm อื่น ๆ เพื่อเรียกใช้ฟังก์ชันเฉพาะ แพ็คเกจอื่นๆ เหล่านี้เรียกว่าการพึ่งพาอาศัยกัน

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

ดังนั้น เมื่อคุณติดตั้งปลั๊กอินลงในโฟลเดอร์ node_modules ของคุณ ปลั๊กอินนั้นจะติดตั้งแพ็คเกจเพิ่มเติมที่ *it* ต้องการลงในโฟลเดอร์ node_modules ของตัวเอง

และอื่นๆ จนกว่าคุณจะซ้อนโฟลเดอร์ออกจาก wazoo

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

การติดตามแพ็คเกจด้วย package.json

ฟีเจอร์เด็ดอีกประการของ npm คือสามารถจดจำแพ็คเกจเฉพาะที่คุณติดตั้งสำหรับโปรเจ็กต์ของคุณ

นี่เป็นสิ่งสำคัญในกรณีที่คุณต้องติดตั้งใหม่ทั้งหมดด้วยเหตุผลบางประการ

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

มันจัดการได้อย่างไร

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

การสร้าง package.json ของคุณ

ในการเริ่มต้นไฟล์นี้ คุณสามารถใช้บรรทัดคำสั่งได้อีกครั้ง

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

จากนั้นพิมพ์คำสั่งต่อไปนี้ npm init

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

เมื่อเสร็จแล้ว npm จะสร้างไฟล์ package.json ในโฟลเดอร์โปรเจ็กต์ของคุณ! หากคุณเปิดขึ้นมาในโปรแกรมแก้ไข คุณจะเห็นสิ่งนี้:

{
  "name": "super-simple-gulp-file",
  "version": "1.0.0",
  "description": "Super simple Gulp file",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/thecodercoder/Super-Simple-Gulp-File.git"
  },
  "keywords": [
    "gulp"
  ],
  "author": "Jessica @thecodercoder",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/thecodercoder/Super-Simple-Gulp-File/issues"
  },
  "homepage": "https://github.com/thecodercoder/Super-Simple-Gulp-File#readme"
}

แน่นอนสำหรับโครงการของคุณ คุณจะมีชื่อและข้อมูลของคุณเอง แทนที่จะเป็นสิ่งที่ฉันมี

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

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

มาดูกันว่าคุณจะเพิ่มพวกเขาได้อย่างไร:

การติดตั้งแพ็คเกจ

ในส่วนก่อนหน้านี้ เราได้พูดถึงการพิมพ์ npm install [Package Name]

ลงในบรรทัดคำสั่งของคุณเพื่อดาวน์โหลดและติดตั้งแพ็คเกจลงในโฟลเดอร์ node_modules ของคุณ

มันจะติดตั้งแพ็คเกจและบันทึกลงในไฟล์ package.json ของคุณโดยอัตโนมัติเป็นการพึ่งพา

ดังนั้นถ้าเราต้องการติดตั้งอึกในแพ็คเกจของเรา เราจะพิมพ์ใน:npm install gulp

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

ตอนนี้ หากคุณเปิดไฟล์ package.json คุณจะเห็นว่าอึกถูกเพิ่มเป็นการพึ่งพา:

"dependencies": {
  "gulp": "^3.9.1"
}

รายการการพึ่งพานี้จะเพิ่มขึ้นเมื่อคุณติดตั้งแพ็คเกจ npm เพิ่มเติม

แพ็คเกจอื่นๆ ที่จำเป็นสำหรับอึก

ในขั้นต้น เราต้องการใช้อึกเพื่อเรียกใช้งานต่างๆ เช่น การคอมไพล์ไฟล์ SCSS/CSS และ JS ของคุณ เพื่อให้บรรลุสิ่งนี้ เราจะใช้แพ็คเกจต่อไปนี้:

• gulp-sass — รวบรวมไฟล์ Sass ของคุณเป็น CSS
• gulp-cssnano — ลดขนาดไฟล์ CSS ของคุณ
• gulp-concat — เชื่อม (รวม) ไฟล์ JS หลายไฟล์เป็นไฟล์ขนาดใหญ่ไฟล์เดียว
• gulp-uglify — ลดขนาดไฟล์ JS ของคุณ

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

npm install gulp-sass
npm install gulp-cssnano
npm install gulp-concat
npm install gulp-uglify

อึก-คลิ เทียบกับอึกทั่วโลก

ในอดีต หากต้องการเรียกใช้ “อึก” จากบรรทัดคำสั่ง คุณจะต้องติดตั้งอึกทั่วโลกบนคอมพิวเตอร์ในพื้นที่ของคุณ โดยใช้คำสั่ง “npm install –global gulp”

อย่างไรก็ตาม การมี Gulp เวอร์ชันเดียวทั่วโลกอาจทำให้เกิดปัญหาได้หากคุณมีหลายโครงการที่ต้องใช้ Gulp เวอร์ชันต่างๆ กัน

ฉันทามติในปัจจุบันแนะนำให้ติดตั้งแพ็คเกจอื่น Gulp-cli ทั่วโลกแทน Gulp เอง

วิธีนี้จะช่วยให้คุณยังคงเรียกใช้คำสั่ง "อึก" ได้ แต่คุณสามารถใช้อึกเวอร์ชันต่างๆ ในโครงการต่างๆ ของคุณได้

นี่คือรหัสสำหรับสิ่งนั้น:

npm install --global gulp-cli

หากคุณสนใจ คุณสามารถอ่านบริบทเพิ่มเติมในหัวข้อบ้านต้นไม้นี้

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

ตั้งค่าโครงสร้างไฟล์ของคุณ

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

วิธีการพื้นฐานนี้จะช่วยให้คุณเข้าใจฟังก์ชันพื้นฐานของชิ้นส่วนที่เคลื่อนไหวได้ทั้งหมด จากนั้นคุณสามารถสร้างหรือเปลี่ยนการตั้งค่าตามที่คุณต้องการได้ในอนาคต!

แผนผังโครงการจะมีลักษณะดังนี้:

• รูทโฟลเดอร์โปรเจ็กต์
  • index.html
  • gulpfile.js
  • package.json
  • node_modules (โฟลเดอร์)
  • แอป (โฟลเดอร์)
  • script.js
  • style.scss
  • dist (โฟลเดอร์)

เราได้ตรวจสอบไฟล์ package.json และโฟลเดอร์ node_modules แล้ว และแน่นอนว่าไฟล์ index.html จะเป็นไฟล์เว็บไซต์หลักของคุณ

ไฟล์ gulpfile.js คือที่ที่เราจะกำหนดค่า Gulp ให้ทำงานทั้งหมดที่เราพูดถึงในตอนต้นของบทความนี้ เราจะเข้าใจกันในอีกสักครู่

แต่ตอนนี้ ฉันต้องการพูดถึงสองโฟลเดอร์ คือ แอปและ dist เนื่องจากมีความสำคัญสำหรับเวิร์กโฟลว์อึก

แอปและโฟลเดอร์ dist

ในโฟลเดอร์แอป เรามีไฟล์ JavaScript พื้นฐาน (script.js) และไฟล์ SCSS พื้นฐาน (style.scss) ไฟล์เหล่านั้นเป็นที่ที่คุณจะเขียนโค้ด JS และ CSS ทั้งหมดของคุณ

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

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

ไปที่เนื้อหาของบทช่วยสอนนี้ กำหนดค่าอึก!

สร้างและกำหนดค่า Gulpfile ของคุณ

Gulpfile มีโค้ดสำหรับโหลดแพ็คเกจที่ติดตั้งและเรียกใช้ฟังก์ชันต่างๆ รหัสทำหน้าที่พื้นฐานสองอย่าง:

1. เริ่มต้นแพ็คเกจที่ติดตั้งของคุณเป็นโมดูลโหนด
2. สร้างและเรียกใช้งาน Gulp

เริ่มต้นแพ็คเกจ

เพื่อใช้ประโยชน์จากคุณลักษณะทั้งหมดของแพ็กเกจ npm ที่คุณเพิ่มลงในโปรเจ็กต์ของคุณ คุณต้องเอ็กซ์พอร์ตเป็นโมดูลใน Node (เพราะฉะนั้นชื่อโฟลเดอร์ “node_modules”)

ที่ด้านบนสุดของ Gulpfile ของคุณ ให้เพิ่มโมดูลดังนี้:

var gulp = require('gulp');
var cssnano = require('gulp-cssnano');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');

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

สร้างงานอึกของคุณ

การสร้างงาน Gulp ทำได้โดยใช้รหัสต่อไปนี้:

gulp.task('[Function Name]', function(){
   // Do stuff here
}

สิ่งนี้ทำให้คุณสามารถเรียกใช้งานอึกได้โดยพิมพ์ gulp [Function Name] ลงในบรรทัดคำสั่ง นี่เป็นสิ่งสำคัญเนื่องจากคุณสามารถเรียกใช้ฟังก์ชันที่มีชื่อจากงานอึกอื่น ๆ ได้

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

ฟังก์ชันหลักที่เราจะใช้มีดังนี้:

• .task() — สร้างงานตามที่กล่าวไว้ข้างต้น
• .src() — ระบุไฟล์ที่คุณจะคอมไพล์ในงานเฉพาะ
• .pipe() — เพิ่มฟังก์ชันให้กับ Node stream ที่ Gulp ใช้อยู่ คุณสามารถไพพ์หลายฟังก์ชันในงานเดียวกันได้ (อ่านบทความที่ยอดเยี่ยมในหัวข้อนี้ใน florian.ec)
• .dest() — เขียนไฟล์ผลลัพธ์ไปยังตำแหน่งเฉพาะ
• .watch() — ระบุไฟล์ที่จะตรวจจับการเปลี่ยนแปลงใดๆ บน

หากสงสัย คุณสามารถอ่านเอกสาร Gulp เพิ่มเติมได้ที่นี่

ทุกชุด? มาลงมือทำธุรกิจกันเถอะ (เพลงคิวมู่หลาน) และเขียนงานเหล่านั้น!

นี่คืองานต่อไปนี้ที่เราต้องการให้ Gulp ทำงาน:

• งาน Sass เพื่อคอมไพล์ SCSS เป็นไฟล์ CSS และย่อ
• งาน JS เพื่อเชื่อมไฟล์ JS และย่อ/uglify
• ดูงานเพื่อตรวจจับเมื่อไฟล์ SCSS หรือ JS มีการเปลี่ยนแปลง และเรียกใช้งานอีกครั้ง
• งานเริ่มต้นเพื่อเรียกใช้งานที่จำเป็นทั้งหมดเมื่อคุณพิมพ์ gulp ลงในบรรทัดคำสั่ง

งาน Sass

สำหรับงาน Sass ก่อนอื่นเราต้องการสร้างงานในอึกโดยใช้ task() และเราจะตั้งชื่อมันว่า "sass"

จากนั้นเราเพิ่มในแต่ละองค์ประกอบที่งานจะทำงาน อันดับแรก เราจะกำหนดว่าแหล่งที่มาจะเป็นไฟล์ app/scss/style.scss โดยใช้ src() จากนั้นเราจะไพพ์ในฟังก์ชันเพิ่มเติม

อันแรกรันฟังก์ชัน sass() (โดยใช้โมดูล gulp-sass ซึ่งเราเรียกว่า "sass" ที่ด้านบนสุดของ Gulpfile) มันจะบันทึกไฟล์ CSS โดยอัตโนมัติด้วยชื่อเดียวกับไฟล์ SCSS ดังนั้นไฟล์ของเราจึงถูกตั้งชื่อว่า style.css

อันที่สองย่อขนาดไฟล์ CSS ด้วย cssnano() และสุดท้ายวางไฟล์ CSS ที่ได้ไว้ในโฟลเดอร์ dist/css

นี่คือรหัสสำหรับทั้งหมด:

gulp.task('sass', function(){
   return gulp.src('app/style.scss')
      .pipe(sass())
      .pipe(cssnano())
      .pipe(gulp.dest('dist/css'));
});

ในการทดสอบ ฉันเพิ่งใส่ฟิลเลอร์ SCSS ในไฟล์ style.scss:

div {
    display: block;

    &.content {
        position: relative;
    }
}

.red {
    color: red;
}

คุณสามารถเรียกใช้งานอึกแต่ละรายการบนบรรทัดคำสั่งได้หากคุณพิมพ์ gulp และชื่องาน เพื่อทดสอบงาน Sass ฉันพิมพ์ gulp sass เพื่อตรวจสอบว่าทำงานโดยไม่มีข้อผิดพลาดหรือไม่ และสร้างไฟล์ dist/style.css ที่ย่อขนาด

หากทุกอย่างถูกต้อง คุณจะเห็นข้อความแบบนี้ในบรรทัดคำสั่ง:

[15:04:53] Starting 'sass'...
[15:04:53] Finished 'sass' after 121 ms

การตรวจสอบในโฟลเดอร์ dist แสดงว่ามีไฟล์ style.css อยู่จริง และการเปิดไฟล์นั้นจะแสดง CSS ที่ย่อขนาดอย่างถูกต้อง:

div{display:block}div.content{position:relative}.red{color:red}

ตกลง งาน Sass ของเราเสร็จสิ้นแล้ว สู่ JavaScript!

งาน JS

งาน JavaScript Gulp นั้นคล้ายกับงาน Sass แต่มีองค์ประกอบที่แตกต่างกันเล็กน้อย

ขั้นแรก เราจะสร้างงานและเรียกมันว่า "js" จากนั้นเราจะระบุไฟล์ต้นทาง ในฟังก์ชัน src() คุณสามารถระบุไฟล์หลายไฟล์ได้หลายวิธี

หนึ่งคือใช้ไวด์การ์ด (*) เพื่อบอกให้ Gulp ใช้ไฟล์ทั้งหมดที่มีนามสกุล *.js ดังนี้:

gulp.src('app/*.js')

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

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

gulp.src(['app/script.js', 'app/script2.js'])

หากคุณมีไฟล์ JS จำนวนมาก คุณสามารถตรวจสอบให้แน่ใจว่าคุณโหลดการขึ้นต่อกันก่อนโดยเก็บไว้ในโฟลเดอร์ย่อยแยกต่างหาก เช่น พูดว่า “app/js/plugins” จากนั้นเก็บไฟล์ JS อื่นๆ ไว้ในโฟลเดอร์หลัก “app/js”

จากนั้น คุณสามารถใช้สัญลักษณ์แทนเพื่อโหลดสคริปต์ lib (ไลบรารี) ทั้งหมด ตามด้วยสคริปต์ปกติ:

gulp.src(['app/js/lib/*.js', 'app/js/script/*.js'])

วิธีการของคุณจะแตกต่างกันไปตามจำนวนและประเภทของไฟล์ JS ที่คุณมี

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

จากนั้นคุณจะอัปลักษณ์ไฟล์ JS และบันทึกไว้ในตำแหน่งปลายทาง

นี่คือโค้ดที่สมบูรณ์สำหรับงาน JavaScript:

gulp.task('js', function(){
    return gulp.src(['app/js/plugins/*.js', 'app/js/*.js'])
        .pipe(concat('all.js'))
        .pipe(uglify())
        .pipe(gulp.dest('dist'));
});

เช่นเดียวกับงาน Sass คุณสามารถทดสอบว่างาน JS ใช้งานได้โดยพิมพ์ gulp js ลงในบรรทัดคำสั่ง

[14:38:31] Starting 'js'...
[14:38:31] Finished 'js' after 36 ms

ตอนนี้เราทำงานอึกผู้ปฏิบัติงานสองหลักเสร็จแล้ว เราก็ไปต่อที่งาน Watch ได้

ดูงาน

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

เราจะสร้างฟังก์ชันนาฬิกาสองแบบ ฟังก์ชันหนึ่งสำหรับดูไฟล์ SCSS และอีกฟังก์ชันหนึ่งสำหรับดูไฟล์ JS

ฟังก์ชัน watch() ใช้พารามิเตอร์ 2 ตัว ได้แก่ ตำแหน่งต้นทาง และงานที่จะดำเนินการเมื่อตรวจพบการเปลี่ยนแปลง

ฟังก์ชัน Sass Watch จะดูไฟล์ SCSS ใดๆ ในโฟลเดอร์แอป จากนั้นเรียกใช้งาน Sass หากตรวจพบการเปลี่ยนแปลง

ฟังก์ชันจะมีลักษณะดังนี้:

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

สำหรับฟังก์ชัน JavaScript Watch เราจะต้องใช้ประโยชน์จากคุณลักษณะ Node ที่มีประโยชน์จริงๆ ซึ่งเรียกว่า "globbing" Globbing หมายถึงการใช้สัญลักษณ์ "**" เป็นสัญลักษณ์แทนสำหรับโฟลเดอร์และโฟลเดอร์ย่อย เราต้องการมันสำหรับไฟล์ JS เนื่องจากเรามีไฟล์ JS ในโฟลเดอร์ app/js และไฟล์ JS ในโฟลเดอร์ app/js/plugins

และนี่คือหน้าตาของฟังก์ชันนั้น:

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

วิธีการทำงานของ glob (“**”) คือค้นหาไฟล์ JS ที่ใดก็ได้ในโฟลเดอร์ app/js โดยจะมีลักษณะโดยตรงในโฟลเดอร์หรือในโฟลเดอร์ย่อยที่ตามมา เช่น โฟลเดอร์ปลั๊กอิน Globbing มีประโยชน์โดยที่คุณไม่ต้องกำหนดแต่ละโฟลเดอร์ย่อยเป็นแหล่งแยกต่างหากในฟังก์ชัน watch()

นี่คือภารกิจการรับชมที่สมบูรณ์:

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

ตอนนี้เราเกือบจะเสร็จแล้ว! งานสุดท้ายที่จะสร้างคืองาน Gulp เริ่มต้น

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

งาน Gulp เริ่มต้นคือสิ่งที่คุณต้องการเรียกใช้เมื่อคุณเพียงแค่พิมพ์ gulp ในบรรทัดคำสั่ง เมื่อคุณสร้างงาน คุณต้องเรียกว่า "ค่าเริ่มต้น" เพื่อให้ Gulp รู้ว่านั่นคือสิ่งที่คุณต้องการเรียกใช้

สิ่งที่เราอยากทำคือเรียกใช้งาน Sass และ JS หนึ่งครั้ง จากนั้นเรียกใช้งาน Watch เพื่อเรียกใช้งานอีกครั้งเมื่อไฟล์มีการเปลี่ยนแปลง

gulp.task('default', ['sass', 'js', 'watch']);

คุณสามารถสร้างงานอื่นๆ เพื่อเรียกใช้งานบิลด์ของคุณได้ เพียงแค่อย่าใช้ชื่อ "ค่าเริ่มต้น" ซ้ำ ตัวอย่างเช่น สมมติว่าคุณต้องการปล่อยให้ไฟล์ CSS และ JS ของคุณไม่มีการลดขนาดตามค่าเริ่มต้น แต่คุณต้องการลดขนาดไฟล์สำหรับการผลิต

คุณสามารถสร้างงานอึกแยกกันเพื่อลดขนาดไฟล์ CSS และ JS ของคุณที่เรียกว่า “minifyCSS” และ “minifyJS” จากนั้น คุณจะไม่เพิ่มงานเหล่านั้นลงในงาน Gulp เริ่มต้นของคุณ แต่คุณสามารถสร้างงาน Gulp ใหม่ที่เรียกว่า “prod” ที่มีทุกอย่างที่งานเริ่มต้นมี และยังมีงานย่อขนาดของคุณด้วย

ข้อมูลอ้างอิงใน index.html ของคุณ

เมื่อคุณได้กระบวนการอึกแล้ว ตรวจสอบให้แน่ใจว่าไฟล์ index.html ของคุณอ้างอิงถึงไฟล์ CSS และ JS ที่ถูกต้องทั้งหมด

สำหรับตัวอย่างที่ฉันให้ไว้ที่นี่ คุณจะต้องเพิ่มการอ้างอิง CSS ไปที่ dist/style.css ใน ของคุณ:

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

และเพิ่มแท็กสคริปต์ที่อ้างอิง dist/all.js ใน ของคุณ:

<script src="dist/all.js"></script>

กำลังปิด

ยินดีด้วยที่ผ่านมันไปได้! ฉันหวังว่าคุณจะพบว่าบทแนะนำ Gulp พื้นฐานนี้มีประโยชน์

เช่นเดียวกับที่ฉันได้กล่าวไว้ตอนต้น นี่เป็นเพียงบทแนะนำง่ายๆ เกี่ยวกับพื้นฐานของ npm และอึก

ผู้พัฒนาส่วนใหญ่เพิ่มงานเพิ่มเติมมากมายให้กับ Gulpfile แจ้งให้เราทราบหากคุณสนใจที่จะดูบทความอื่นในหัวข้อขั้นสูงเหล่านั้น!

สุดท้ายนี้ คุณสามารถตรวจสอบรหัสทั้งหมดจากบทช่วยสอนนี้ในบัญชี GitHub ของฉันได้ที่นี่

หากคุณชอบบทแนะนำนี้ โปรดแชร์และ/หรือแสดงความคิดเห็นด้านล่างพร้อมกับความคิดเห็นของคุณ!