เริ่มต้นด้วย Gulp.js

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

ในบทความนี้เราจะดูพื้นฐานของการใช้ Gulp ตั้งแต่การติดตั้งไปจนถึงไวยากรณ์พื้นฐานและตัวอย่างสองสามตัวอย่าง ในตอนท้ายของบทความคุณควรจะสามารถ ค้นหาติดตั้งและใช้แพ็คเกจที่ผู้อื่นสร้างไว้สำหรับอึก เพื่อรวบรวม SASS, ปรับภาพให้เหมาะสม, สร้างสไปรต์, เชื่อมไฟล์เข้าด้วยกันและอื่น ๆ!

การติดตั้งอึก

ไม่ต้องกังวลการติดตั้งนั้นง่ายมาก เราจะต้องใช้เทอร์มินัลใน OSX และ Linux หรือพร้อมท์คำสั่งสำหรับ Windows ฉันจะเรียกมันว่าเป็นเทอร์มินัลนับจากนี้เป็นต้นไป.

เปิดขึ้นและพิมพ์ npm -v แล้วกด Enter หากคุณเห็นหมายเลขเวอร์ชันแสดงว่าคุณได้ติดตั้งโหนดแล้วนี่คือการพึ่งพาสำหรับอึก.

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

การติดตั้งอึกนั้นง่ายมาก วางคำสั่งต่อไปนี้ลงในเทอร์มินัลนั่นคือมัน:

NPM ติดตั้ง - อึกโกลบอล

สิ่งนี้จะติดตั้งคำสั่ง Gulp ซึ่งจะสามารถใช้ได้ทั่วโลกในระบบของคุณ.

เพิ่มอึกไปยังโครงการ

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

npm ติดตั้ง - บันทึก-dev อึก

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

เหตุผลที่เราต้องเพิ่มอึกลงในแต่ละโครงการที่เฉพาะเจาะจงก็คือ แต่ละโครงการมีข้อกำหนดที่แตกต่างกัน. บางคนอาจเรียก SASS และอีกอันสำหรับ Less หนึ่งอาจใช้ Coffeescript อื่น ๆ อาจไม่และอื่น ๆ.

Gulpfile

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

var gulp = ต้องการ ('gulp'); gulp.task ('ค่าเริ่มต้น', ฟังก์ชั่น () // นี่ไม่ได้ทำอะไรเลยตอนนี้เราจะเพิ่มฟังก์ชั่นเร็ว ๆ นี้);

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

ไม่มีอะไรเกิดขึ้นจริงที่นี่เนื่องจากงานว่างเปล่า แต่ทำงานได้ดี ทีนี้มาดูตัวอย่างที่เหมาะสมกันดีกว่า!

คัดลอกไฟล์

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

ในโฟลเดอร์โครงการของคุณสร้างไฟล์ชื่อ to_copy.txt , และชื่อโฟลเดอร์ dev. ไปที่ Gulpfile ของเราและสร้างงานใหม่ที่ชื่อว่า สำเนา.

gulp.task ('copy', function () return gulp.src ('to_copy.txt') .pipe (gulp.dest ('dev')););

บรรทัดแรกกำหนดงานที่ชื่อการคัดลอก ภายในนี้เราใช้ gulp.src เพื่อระบุไฟล์ที่เรากำหนดเป้าหมายด้วยงานนี้ - ในกรณีนี้มันเป็นไฟล์เดียวชื่อ to_copy.txt.

จากนั้นเราจะวางไฟล์เหล่านี้ไปยังฟังก์ชัน gulp.dest ซึ่งระบุตำแหน่งที่เราต้องการวางไฟล์เหล่านี้ - ฉันใช้ไดเรกทอรี dev แล้ว.

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

คำสั่งไพพ์เป็นหัวใจของอึก เป็นวิธีที่มีประสิทธิภาพในการย้ายข้อมูลระหว่างคำสั่ง คำสั่ง src ระบุไฟล์ที่ถูกไพพ์ไปยังคำสั่ง dest ในสถานการณ์ที่ซับซ้อนมากขึ้นเราจะส่งไฟล์ไปยังคำสั่งอื่น ๆ ก่อนที่จะระบุปลายทาง.

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

gulp.task ('copy', function () return gulp.src ('development / *') .pipe (gulp.dest ('การผลิต')););

อักขระดาวจะตรงกับสิ่งใดก็ตามในไดเรกทอรี คุณสามารถจับคู่ไฟล์ทั้งหมดภายในไดเรกทอรีย่อยทั้งหมดและทำการจับคู่แฟนซีอื่น ๆ ได้ทุกประเภท ดูที่เอกสารคู่มือ node-glob สำหรับข้อมูลเพิ่มเติม.

รวบรวม SASS

การรวบรวมสไตล์ชีทจากไฟล์ SASS เป็นงานทั่วไปสำหรับนักพัฒนา มันสามารถทำได้ด้วย Gulp ค่อนข้างง่ายเราจะต้องเตรียมการบางอย่าง นอกเหนือจากคำสั่งพื้นฐานเช่น src, ปลายทางและอื่น ๆ จำนวนมาก, ฟังก์ชั่นทั้งหมดจะถูกเพิ่มผ่านทาง addons บุคคลที่สาม นี่คือวิธีที่ฉันจะใช้มัน.

ฉันพิมพ์ SASS อึก ใน Google ผลลัพธ์แรกคือสิ่งที่ฉันต้องการคุณควรหาหน้าสำหรับแพ็คเกจ SASS มันแสดงให้คุณเห็นวิธีการติดตั้ง (npm install gulp-sass) โอกาสที่คุณจะต้องใช้ sudo เพื่อติดตั้งเป็นผู้ดูแลระบบดังนั้นอาจจะเป็น (sudo npm install gulp-sass) .

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

$ primary: # ff9900; body background: $ primary; 

ตอนนี้สร้างภารกิจ Gulp ต่อไปนี้ใน Gulpfile.

gulp.task ('sass', function () gulp.src ('*. scss') .pipe (sass ()) .pipe (gulp.dest ('./ css')););

ก่อนเรียกใช้คำสั่งอย่าลืม 'ต้อง' แพ็คเกจที่ด้านบนของ Gulpfile ดังนี้:

var sass = ต้องการ ('gulp-sass');

เมื่อคุณวิ่ง เขมือบ, ไฟล์ทั้งหมดที่มีนามสกุล scss จะถูกไพพ์ไปยังฟังก์ชัน sass ซึ่งจะแปลงเป็นไฟล์ css สิ่งเหล่านี้จะถูกไพพ์ไปยังฟังก์ชันปลายทางที่วางไว้ในโฟลเดอร์ css.

การดูไฟล์และโฟลเดอร์

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

ใน Gulpfile สร้างคำสั่งชื่อ โดยอัตโนมัติ ซึ่งจะใช้คำสั่ง watch เพื่อดูชุดไฟล์สำหรับการเปลี่ยนแปลงและรันคำสั่งเฉพาะเมื่อไฟล์มีการเปลี่ยนแปลง.

gulp.task ('อัตโนมัติ', ฟังก์ชัน () gulp.watch ('*. scss', ['sass']););

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

หากคุณเปลี่ยนไฟล์ style.scss ของคุณแล้วควรจะรวบรวมไฟล์ css ภายในไดเรกทอรี css โดยอัตโนมัติ.

ใช้งานหลายงาน

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

หากงานที่เกี่ยวข้องฉันชอบที่จะ โซ่พวกเขา. ตัวอย่างที่ดีคือการต่อข้อมูลและการย่อขนาดของไฟล์จาวาสคริปต์ ก่อนอื่นเราทำการไพพ์ไฟล์ของเราไปที่การกระทำแบบ concat จากนั้นก็ทำการไพล์ไปที่ gulp-uglify จากนั้นใช้ฟังก์ชั่นปลายทางเพื่อส่งออกไฟล์เหล่านั้น.

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

var gulp = ต้องการ ('gulp'); var uglify = require ('gulp-uglify'); var concat = ต้องการ ('gulp-concat'); var sass = ต้องการ ('gulp-sass'); gulp.task ('สคริปต์', ฟังก์ชัน () gulp.src ('js / ** / *. js') .pipe (concat ('scripts.js')) .pipe (gulp.dest ('.') ) .pipe (uglify ()) .pipe (gulp.dest ('.'))); gulp.task ('styles', function () gulp.src ('/ *. scss') .pipe (sass ()) .pipe (gulp.dest ('./ css'));); gulp.task ('อัตโนมัติ' ฟังก์ชัน () gulp.watch (['*. scss', 'js / ** / *. js'], ['สคริปต์', 'สไตล์']);); gulp.task ('ค่าเริ่มต้น', ['สคริปต์', 'สไตล์']);

ถ้าคุณพิมพ์ สคริปต์อึก ในเทอร์มินัลไฟล์ javascript ทั้งหมดภายในไดเรกทอรี js จะถูกต่อกันเอาท์พุทไปยังไดเรกทอรีหลักจากนั้น uglified และบันทึกลงในไดเรกทอรีหลัก.

ถ้าคุณพิมพ์ เขมือบ, ไฟล์ scss ทั้งหมดของคุณจะถูกรวบรวมและบันทึกลงในไดเรกทอรี css.

ถ้าคุณพิมพ์ อึก (งานเริ่มต้น) ของคุณ สคริปต์ จะมีการเรียกใช้งานตามด้วยของคุณ รูปแบบ งาน.

อึกโดยอัตโนมัติ task เฝ้าดูหลาย ๆ โฟลเดอร์สำหรับการเปลี่ยนแปลงในไฟล์ scss และ js ของเราและจะทำงานทั้งสองอย่างที่เรากำหนดไว้หากตรวจพบการเปลี่ยนแปลง.

ภาพรวม

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

• ค้นหาปลั๊กอิน
• ติดตั้งปลั๊กอิน
• ต้องการปลั๊กอินใน Gulpfile ของคุณ
• ใช้ไวยากรณ์ในเอกสาร

คำสั่งห้าคำสั่งที่มีใน Gulp (ภารกิจ, เรียกใช้, ดู, src, ปลายทาง) เป็นคำสั่งเดียวที่คุณจำเป็นต้องรู้ addons ของบุคคลที่สามทั้งหมดมีเอกสารที่ยอดเยี่ยม นี่คือรายการของบางสิ่งที่ฉันใช้ซึ่งคุณสามารถเริ่มต้นได้ในตอนนี้:

• ปรับภาพให้เหมาะสมด้วยการเพิ่มประสิทธิภาพอิมเมจ
• การสร้างสไปรต์รูปภาพด้วย gulp-sprite
• การต่อไฟล์เข้ากับ gulp-concat
• การย่อไฟล์ด้วย gulp-uglify
• การลบไฟล์ด้วย gulp-del
• Javascript linting ด้วย gulp-jslint
• JSON linting ด้วย gulp-jsonlint
• CSS อัตโนมัติพร้อมกับ gulp-autoprefixer
• ค้นหาและแทนที่ด้วย gulp-frep
• ลดขนาด CSS ด้วย gulp-minify-css