วิธีควบคุมเครื่องจักร: ทำงานอย่างมีประสิทธิภาพ

ผู้ดำเนินภารกิจคือฮีโร่ (หรือวายร้าย ขึ้นอยู่กับมุมมองของคุณ) ที่ทำงานหนักอยู่เบื้องหลังเว็บและแอปพลิเคชั่นมือถือส่วนใหญ่อย่างเงียบๆ ตัวรันงานให้คุณค่าผ่านการทำงานอัตโนมัติของงานการพัฒนาจำนวนมาก เช่น การต่อไฟล์ การปั่นเซิร์ฟเวอร์การพัฒนา และการคอมไพล์โค้ด ในบทความนี้ เราจะพูดถึงสคริปต์ Grunt, Gulp, Webpack และ npm นอกจากนี้เรายังมีตัวอย่างของแต่ละตัวอย่างเพื่อให้คุณเริ่มต้น ในตอนท้าย ฉันจะพูดถึงชัยชนะและเคล็ดลับง่ายๆ ในการผสานรวมแนวคิดจากโพสต์นี้ในแอปพลิเคชันของคุณ

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

อ่านเพิ่มเติม เกี่ยวกับ SmashingMag:

• มาเป็นผู้ใช้พลังบรรทัดคำสั่งด้วย Oh-My-ZSH และ Z
• บทนำสู่ PostCSS
• ลุกขึ้นและวิ่งด้วย Grunt
• สร้างด้วยอึก

หมายเหตุเกี่ยวกับ Command Line

ตัวรันงานและเครื่องมือสร้างเป็นเครื่องมือบรรทัดคำสั่งเป็นหลัก ตลอดบทความนี้ ฉันจะถือว่ามีประสบการณ์และความสามารถในการทำงานกับบรรทัดคำสั่งในระดับที่เหมาะสม หากคุณเข้าใจวิธีใช้คำสั่งทั่วไป เช่น cd , ls , cp และ mv คุณก็ควรจะเข้าใจในตัวอย่างต่างๆ หากคุณรู้สึกไม่สบายใจที่จะใช้คำสั่งเหล่านี้ โพสต์แนะนำดีๆ มีอยู่ใน Smashing Magazine มาเริ่มเรื่องกับคุณปู่ของพวกเขากันเถอะ: Grunt

Grunt

Grunt เป็นผู้ดำเนินการงานบน JavaScript ที่ได้รับความนิยมเป็นรายแรก ฉันใช้ Grunt ในรูปแบบใดรูปแบบหนึ่งมาตั้งแต่ปี 2012 แนวคิดพื้นฐานเบื้องหลัง Grunt คือคุณใช้ไฟล์ JavaScript พิเศษ Gruntfile.js เพื่อกำหนดค่าปลั๊กอินต่างๆ เพื่อทำงานให้สำเร็จ มีระบบนิเวศน์ของปลั๊กอินมากมายและเป็นเครื่องมือที่มีความสมบูรณ์และเสถียรมาก Grunt มีเว็บไดเร็กทอรีที่ยอดเยี่ยมที่จัดทำดัชนีปลั๊กอินส่วนใหญ่ (ปัจจุบันมีประมาณ 5,500 ตัว) อัจฉริยะที่เรียบง่ายของ Grunt คือการรวมกันของ JavaScript และแนวคิดของไฟล์การกำหนดค่าทั่วไป (เช่น makefile) ซึ่งทำให้นักพัฒนาจำนวนมากขึ้นสามารถมีส่วนร่วมและใช้ Grunt ในโครงการของพวกเขา นอกจากนี้ยังหมายความว่า Grunt สามารถวางไว้ภายใต้ระบบควบคุมเวอร์ชันเดียวกันกับส่วนที่เหลือของโปรเจ็กต์

Grunt ผ่านการทดสอบการต่อสู้และมีเสถียรภาพ ในช่วงเวลาของการเขียน เวอร์ชัน 1.0.0 ได้รับการเผยแพร่ ซึ่งเป็นความสำเร็จที่ยิ่งใหญ่สำหรับทีม Grunt เนื่องจาก Grunt กำหนดค่าปลั๊กอินต่างๆ เพื่อทำงานร่วมกันเป็นส่วนใหญ่ มันจึงอาจพันกัน (เช่น ยุ่งและสับสนในการแก้ไข) ได้อย่างรวดเร็ว อย่างไรก็ตาม ด้วยความระมัดระวังและการจัดระเบียบเพียงเล็กน้อย (แบ่งงานออกเป็นไฟล์ลอจิคัล!) คุณสามารถทำให้มันทำสิ่งมหัศจรรย์สำหรับโครงการใดก็ได้

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

ตัวอย่าง

มาดูกันว่า Grunt ทำงานอย่างไร การเรียกใช้ grunt ในบรรทัดคำสั่งจะเรียกโปรแกรมบรรทัดคำสั่ง Grunt ที่ค้นหา Gruntfile.js ในรูทของไดเร็กทอรี Gruntfile.js มีการกำหนดค่าที่ควบคุมสิ่งที่ Grunt จะทำ ในแง่นี้ Gruntfile.js สามารถถูกมองว่าเป็นตำราอาหารประเภทหนึ่งที่พ่อครัว (เช่น Grunt โปรแกรม) ทำตาม; และเช่นเดียวกับตำราอาหารที่ดี Gruntfile.js จะมีสูตรอาหารมากมาย (เช่น งาน)

เรากำลังจะทำให้ Grunt ก้าวผ่านการใช้ปลั๊กอิน Grunticon เพื่อสร้างไอคอนสำหรับเว็บแอปสมมติ Grunticon รับไดเรกทอรีของ SVG และแยกเนื้อหาหลายรายการออก:

• ไฟล์ CSS ที่มีการเข้ารหัสฐาน SVG-64 เป็นภาพพื้นหลัง
• ไฟล์ CSS ที่มีเวอร์ชัน PNG ของ SVGs ที่เข้ารหัส base-64 เป็นภาพพื้นหลัง
• ไฟล์ CSS ที่อ้างอิงไฟล์ PNG แต่ละรายการสำหรับแต่ละไอคอน

ไฟล์ที่แตกต่างกันสามไฟล์แสดงถึงความสามารถที่หลากหลายของเบราว์เซอร์และอุปกรณ์มือถือ อุปกรณ์สมัยใหม่จะได้รับ SVG ที่มีความละเอียดสูงเป็นคำขอเดียว (เช่น ไฟล์ CSS ไฟล์เดียว) เบราว์เซอร์ที่ไม่รองรับ SVG แต่จัดการเนื้อหาที่เข้ารหัสแบบ base-64 จะได้รับสไตล์ชีต PNG แบบ base-64 สุดท้าย เบราว์เซอร์ใดๆ ที่ไม่สามารถจัดการกับทั้งสองสถานการณ์จะได้รับสไตล์ชีต "ดั้งเดิม" ที่อ้างอิงถึง PNG ทั้งหมดนี้จากไดเรกทอรีเดียวของ SVG!

การกำหนดค่าของงานนี้มีลักษณะดังนี้:

 module.exports = function(grunt) { grunt.config("grunticon", { icons: { files: [ { expand: true, cwd: 'grunticon/source', src: ["*.svg", ".png"], dest: 'dist/grunticon' } ], options: [ { colors: { "blue": "blue" } } ] } }); grunt.loadNpmTasks('grunt-grunticon'); };

มาดูขั้นตอนต่างๆ กันที่นี่:

1. คุณต้องติดตั้ง Grunt ไว้ทั่วโลก
2. สร้างไฟล์ Gruntfile.js ในรูทของโปรเจ็กต์ เป็นการดีที่สุดที่จะติดตั้ง Grunt เป็นการพึ่งพา npm ในไฟล์ package.json ของคุณพร้อมกับ Grunticon ผ่าน npm i grunt grunt-grunticon --save-dev
3. สร้างไดเร็กทอรีของ SVG และไดเร็กทอรีปลายทาง (ที่ซึ่งสินทรัพย์ที่สร้างขึ้นจะไป)
4. วางสคริปต์ขนาดเล็กไว้ที่ส่วน head ของ HTML ซึ่งจะกำหนดไอคอนที่จะโหลด

นี่คือลักษณะของไดเร็กทอรีของคุณก่อนที่คุณจะรันงาน Grunticon:

 |-- Gruntfile.js |-- grunticon | `-- source | `-- logo.svg `-- package.json
|-- Gruntfile.js |-- grunticon | `-- source | `-- logo.svg `-- package.json

เมื่อติดตั้งและสร้างสิ่งเหล่านี้แล้ว คุณสามารถคัดลอกข้อมูลโค้ดด้านบนไปยัง Gruntfile.js จากนั้นคุณควรจะสามารถเรียกใช้ grunt grunticon จากบรรทัดคำสั่งและดูงานของคุณดำเนินการได้

ตัวอย่างด้านบนทำบางสิ่ง:

• เพิ่มวัตถุกำหนด config ใหม่ให้กับ Grunt ในบรรทัดที่ 32 ชื่อ grunticon ;
• กรอกตัวเลือกและพารามิเตอร์ต่าง ๆ สำหรับ Grunticon ในวัตถุ icons
• ในที่สุด ดึงปลั๊กอิน Grunticon ผ่าน loadNPMTasks

ไดเร็กทอรีของคุณควรมีลักษณะดังนี้:

 |-- Gruntfile.js |-- dist | `-- grunticon | |-- grunticon.loader.js | |-- icons.data.png.css | |-- icons.data.svg.css | |-- icons.fallback.css | |-- png | | `-- logo.png | `-- preview.html |-- grunticon | `-- source | `-- logo.svg `-- package.json
|-- Gruntfile.js |-- dist | `-- grunticon | |-- grunticon.loader.js | |-- icons.data.png.css | |-- icons.data.svg.css | |-- icons.fallback.css | |-- png | | `-- logo.png | `-- preview.html |-- grunticon | `-- source | `-- logo.svg `-- package.json

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

อึก: บล็อกเลโก้สำหรับระบบงานสร้างของคุณ

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

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

ตัวอย่าง

เช่นเดียวกับในส่วน Grunt เราจะนำ Gulp ผ่านขั้นตอนต่างๆ ด้วยตัวอย่างที่ตรงไปตรงมา: การต่อโมดูล JavaScript ของเราเป็นไฟล์แอปเดียว

การวิ่งอึกก็เหมือนกับการวิ่ง Grunt โปรแกรมบรรทัดคำสั่ง gulp จะค้นหาตำราอาหารของสูตร (เช่น Gulpfile.js ) ในไดเร็กทอรีที่เรียกใช้

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

อึกมีระบบนิเวศของปลั๊กอินขนาดใหญ่เช่นเดียวกับ Grunt ดังนั้น เพื่อให้งานนี้ง่ายขึ้น เราจะใช้ปลั๊กอิน gulp-concat สมมติว่าโครงสร้างโครงการของเรามีลักษณะดังนี้:

 |-- dist | `-- app.js |-- gulpfile.js |-- package.json `-- src |-- bar.js `-- foo.js

ไฟล์ JavaScript สองไฟล์อยู่ในไดเร็กทอรี src ของเรา และเราต้องการรวมเป็นไฟล์เดียว app.js ในไดเร็กทอรี dist/ ของเรา เราสามารถใช้งานอึกต่อไปนี้เพื่อทำสิ่งนี้ให้สำเร็จ

 var gulp = require('gulp'); var concat = require('gulp-concat'); gulp.task('default', function() { return gulp.src('./src/*.js') .pipe(concat('app.js')) .pipe(gulp.dest('./dist/')); });

บิตที่สำคัญอยู่ในการโทรกลับ gulp.task ที่นั่น เราใช้ gulp.src API เพื่อรับไฟล์ทั้งหมดที่ลงท้ายด้วย . .js ในไดเร็กทอรี src ของเรา gulp.src API ส่งคืนสตรีมของไฟล์เหล่านั้น ซึ่งเราสามารถส่งผ่าน (ผ่านไพ pipe API) ไปยังปลั๊กอิน gulp-concat จากนั้นปลั๊กอินจะเชื่อมไฟล์ทั้งหมดในสตรีมและส่งต่อไปยังฟังก์ชัน gulp.dest ฟังก์ชัน gulp-dest เพียงเขียนอินพุตที่ได้รับไปยังดิสก์

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

1. รับไฟล์ทุกประเภท
2. ส่งไฟล์เหล่านั้นไปยังปลั๊กอิน (concat!) หรือทำการเปลี่ยนแปลงบางอย่าง
3. ส่งไฟล์ที่แปลงแล้วเหล่านั้นไปยังบล็อกอื่น (ในกรณีของเราคือบล็อก dest ซึ่งสิ้นสุดห่วงโซ่ของเรา)

เช่นเดียวกับในตัวอย่าง Grunt เพียงแค่เรียกใช้ gulp จากรูทของไดเร็กทอรีโครงการของเราจะทริกเกอร์งาน default ที่กำหนดไว้ในไฟล์ Gulpfile.js งานนี้เชื่อมไฟล์ของเราเข้าด้วยกันและให้เราเริ่มพัฒนาแอพหรือเว็บไซต์ของเรา

เว็บแพ็ค

สมาชิกใหม่ล่าสุดสำหรับชมรมวิ่งงาน JavaScript คือ Webpack Webpack เรียกตัวเองว่าเป็น “โมดูลบันเดิล” ซึ่งหมายความว่าสามารถสร้างบันเดิลของโค้ด JavaScript จากไฟล์ที่แยกจากกันหลายๆ ไฟล์โดยใช้รูปแบบโมดูล เช่น รูปแบบ CommonJS Webpack ยังมีปลั๊กอินซึ่งเรียกว่าตัวโหลด

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

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

ตัวอย่าง

Webpack มักใช้กับ Babel เพื่อแปลงรหัส ES6 เป็น ES5 การแปลงรหัสจาก ES6 เป็น ES5 ช่วยให้นักพัฒนาสามารถใช้มาตรฐาน ES6 ที่เกิดขึ้นใหม่ได้ในขณะที่ให้บริการ ES5 กับเบราว์เซอร์หรือสภาพแวดล้อมที่ยังไม่รองรับ ES6 อย่างสมบูรณ์ อย่างไรก็ตาม ในตัวอย่างนี้ เราจะเน้นที่การสร้างมัดง่ายๆ ของสองไฟล์ของเราจากตัวอย่างอึก ในการเริ่มต้น เราต้องติดตั้ง Webpack และสร้างไฟล์ webpack.config.js ไฟล์ของเรามีลักษณะดังนี้:

 module.exports = { entry: "./src/foo.js", output: { filename: "app.js", path: "./dist" } };

ในตัวอย่างนี้ เรากำลังชี้ Webpack ไปที่ไฟล์ src/foo.js เพื่อเริ่มต้นการทำงานของกราฟการขึ้นต่อกันของเรา เรายังอัปเดตไฟล์ foo.js ให้มีลักษณะดังนี้:

 //foo.js var bar = require("./bar"); var foo = function() { console.log('foo'); bar(); }; module.exports = foo;

และเราได้อัปเดตไฟล์ bar.js ของเราให้มีลักษณะดังนี้:

 //bar.js var bar = function() { console.log('bar'); }; module.exports = bar;

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

ยืดออก

Webpack นั้นคล้ายกับ Gulp ตรงที่ว่า “It's just JavaScript” สามารถขยายเพื่อทำงานอื่น ๆ ของ task runner ผ่านระบบ loader ตัวอย่างเช่น คุณสามารถใช้ css-loader และ sass-loader เพื่อคอมไพล์ Sass เป็น CSS และแม้กระทั่งใช้ Sass ใน JavaScript ของคุณด้วยการโอเวอร์โหลดรูปแบบที่ require CommonJS! อย่างไรก็ตาม โดยทั่วไปแล้ว ฉันสนับสนุนให้ใช้ Webpack เพื่อสร้างโมดูล JavaScript เพียงอย่างเดียว และสำหรับการใช้วิธีการทั่วไปอื่น ๆ สำหรับการรันงาน (เช่น สคริปต์ Webpack และ npm หรือ Webpack และ Gulp เพื่อจัดการอย่างอื่น)

สคริปต์ npm

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

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

คุณจับบิตสุดท้ายในตอนท้ายหรือไม่? การอุทธรณ์หลักของสคริปต์ npm คือมี "การกำหนดค่าขนาดเล็กมาก" นี่เป็นหนึ่งในสาเหตุหลักที่สคริปต์ npm เริ่มทำงาน (เกือบสี่ปีต่อมา น่าเศร้า) ด้วย Grunt, Gulp และแม้แต่ Webpack ในที่สุด ปลั๊กอินหนึ่งตัวก็เริ่มจมลงในปลั๊กอินที่รวมไบนารีและเพิ่มจำนวนการพึ่งพาในโปรเจ็กต์เป็นสองเท่า

Keith Cirkel มีบทช่วยสอนเบื้องต้นเกี่ยวกับการใช้ npm เพื่อแทนที่ Grunt หรือ Gulp เขาให้พิมพ์เขียวเกี่ยวกับวิธีการใช้ประโยชน์จากพลังของสคริปต์ npm อย่างเต็มที่ และเขาได้แนะนำปลั๊กอินที่จำเป็น Parallel Shell (และโฮสต์อื่นๆ ที่คล้ายกัน)

ตัวอย่าง

ในส่วนของเราเกี่ยวกับ Grunt เรานำโมดูลยอดนิยม Grunticon และสร้างไอคอน SVG (พร้อม PNG ทางเลือก) ในงาน Grunt สิ่งนี้เคยเป็นความเจ็บปวดจุดเดียวกับสคริปต์ npm สำหรับฉัน สักพักฉันจะติดตั้ง Grunt ไว้สำหรับโปรเจ็กต์เพื่อใช้ Grunticon แท้จริงฉันจะ "เชลล์ออก" ให้กับ Grunt ในงาน npm ของฉันเพื่อให้บรรลุเป้าหมายตัววิ่งงาน (หรือเมื่อเราเริ่มเรียกมันในที่ทำงาน turducken เครื่องมือสร้าง) โชคดีที่ The Filament Group ซึ่งเป็นกลุ่มที่ยอดเยี่ยมที่อยู่เบื้องหลัง Grunticon ได้เปิดตัวเครื่องมือ Grunticon-Lib เวอร์ชันสแตนด์อโลน ลองใช้มันเพื่อสร้างไอคอนด้วยสคริปต์ npm!

ตัวอย่างนี้มีความล้ำหน้ากว่างานสคริปต์ npm ทั่วไปเล็กน้อย งานสคริปต์ npm ทั่วไปคือการเรียกใช้เครื่องมือบรรทัดคำสั่งพร้อมแฟล็กหรือไฟล์ปรับแต่งที่เหมาะสม นี่เป็นงานทั่วไปที่รวบรวม Sass ของเราเป็น CSS:

 "sass": "node-sass src/scss/ -o dist/css",

ดูว่าเป็นแค่บรรทัดเดียวที่มีตัวเลือกต่างๆ ได้อย่างไร? ไม่จำเป็นต้องใช้ไฟล์งาน ไม่มีเครื่องมือสร้างให้ทำงาน เพียงแค่ npm run sass จากบรรทัดคำสั่ง และตอนนี้คุณคือ Sass ที่เปลี่ยนเป็น CSS คุณลักษณะที่ดีอย่างหนึ่งของสคริปต์ npm คือวิธีที่คุณสามารถเชื่อมโยงงานสคริปต์เข้าด้วยกัน ตัวอย่างเช่น สมมติว่าเราต้องการเรียกใช้งานบางอย่างก่อนที่งาน Sass ของเราจะทำงาน เราจะสร้างรายการสคริปต์ใหม่ดังนี้:

 "presass": "echo 'before sass',

ถูกต้อง: pre- เข้าใจคำนำหน้า นอกจากนี้ยังเข้าใจคำนำหน้า post- รายการสคริปต์ใด ๆ ที่มีชื่อเดียวกันกับรายการสคริปต์อื่นที่มีคำนำหน้าหรือ pre- คำนำหน้าจะทำงานก่อนหรือ post- รายการนั้น

การแปลงไอคอนของเราจะต้องใช้ไฟล์ Node.js จริง มันไม่ซีเรียสเกินไป เพียงสร้างไดเร็กทอรี tasks และสร้างไฟล์ใหม่ชื่อ grunticon.js หรือ icons.js หรืออะไรก็ตามที่เหมาะสมกับผู้ที่ทำงานในโครงการ เมื่อสร้างไฟล์แล้ว เราสามารถเขียน JavaScript เพื่อปิดกระบวนการ Grunticon ของเรา

หมายเหตุ: ตัวอย่างทั้งหมดเหล่านี้ใช้ ES6 ดังนั้นเราจะใช้ babel-node เพื่อรันงานของเรา คุณสามารถใช้ ES5 และ Node.js ได้อย่างง่ายดาย หากสะดวกกว่า

 import icons from "grunticon-lib"; import globby from "globby"; let files = globby.sync('src/icons/*'); let options = { colors: { "blue": "blue" } }; let icon = new icons(files, 'dist/icons', options); icon.process();

มาเข้าโค้ดกันเลยดีกว่า ว่าเกิดอะไรขึ้น

1. เรา import (เช่นต้องการ) สองไลบรารี grunticon-lib และ globby Globby เป็นหนึ่งในเครื่องมือที่ฉันโปรดปราน และทำให้การทำงานกับไฟล์และ globs เป็นเรื่องง่าย Globby ปรับปรุง Node.js Glob (เลือกไฟล์ JavaScript ทั้งหมดผ่าน ./*.js ) ด้วยการสนับสนุน Promise ในกรณีนี้ เราใช้มันเพื่อรับไฟล์ทั้งหมดในไดเร็กทอรี src/icons
2. เมื่อเราทำเช่นนั้น เราจะตั้งค่าตัวเลือกสองสามตัวในอ็อบเจ็กต์ options จากนั้นเรียก Grunticon-Lib ด้วยอาร์กิวเมนต์สามตัว:
   • ไฟล์ไอคอน,
   • ปลายทาง,
   • ตัวเลือก ไลบรารีจะเข้ามาแทนที่ไอคอนเหล่านั้นและในที่สุดก็สร้างเวอร์ชัน SVG และ PNG ในไดเร็กทอรีที่เราต้องการ
3. เราเกือบเสร็จแล้ว จำไว้ว่าไฟล์นี้อยู่ในไฟล์แยกต่างหาก และเราจำเป็นต้องเพิ่ม "hook" เพื่อเรียกไฟล์นี้จากสคริปต์ npm ของเรา เช่น "icons": "babel-node tasks/icons.js"
4. ตอนนี้เราสามารถเรียกใช้ npm run icons และไอคอนของเราจะถูกสร้างขึ้นทุกครั้ง

สคริปต์ npm ให้ระดับพลังและความยืดหยุ่นในระดับที่ใกล้เคียงกับงานอื่น ๆ โดยไม่มีภาระผูกพันของปลั๊กอิน

รายละเอียดของ Task Runners ครอบคลุมที่นี่

ชนะง่าย ๆ

ตัวอย่างและตัวดำเนินการทั้งหมดเหล่านี้อาจดูล้นหลาม เรามาทำลายมันกัน อันดับแรก ฉันหวังว่าคุณจะไม่นำบทความนี้ไปใช้ ว่า task runner หรือ build system ใด ๆ ที่คุณกำลังใช้อยู่ จะต้องถูกแทนที่ทันทีด้วยตัวที่กล่าวถึงในที่นี้ การเปลี่ยนระบบที่สำคัญเช่นนี้ไม่ควรทำโดยปราศจากการพิจารณามากนัก นี่คือคำแนะนำของฉันสำหรับการอัพเกรดระบบที่มีอยู่: ทำทีละน้อย

สคริปเปอร์!

แนวทางที่เพิ่มขึ้นวิธีหนึ่งคือการดูการเขียนสคริปต์ npm "wrapper" สองสามตัวรอบๆ task runners ที่มีอยู่ของคุณเพื่อจัดเตรียมคำศัพท์ทั่วไปสำหรับขั้นตอนการสร้างที่อยู่นอกตัวรันงานจริงที่ใช้ สคริปต์ตัวตัดอาจทำได้ง่ายดังนี้:

 { "scripts": { "start": "gulp" } }

หลายโครงการใช้การ start และ test บล็อกสคริปต์ npm เพื่อช่วยให้นักพัฒนารายใหม่ปรับตัวให้ชินกับสภาพแวดล้อมได้อย่างรวดเร็ว สคริปต์ตัวตัดจะแนะนำชั้นของนามธรรมอีกชั้นหนึ่งให้กับสายงาน build runner ของคุณ แต่ฉันคิดว่ามันคุ้มค่าที่จะสามารถสร้างมาตรฐานรอบ npm primitives (เช่น test ) คำสั่ง npm มีอายุการใช้งานยาวนานกว่าเครื่องมือแต่ละตัว

โรยใน Webpack เล็กน้อย

หากคุณหรือทีมของคุณรู้สึกเจ็บปวดกับการรักษา “คำสั่งมัดรวม” ที่เปราะบางสำหรับ JavaScript ของคุณ หรือคุณต้องการอัปเกรดเป็น ES6 ให้พิจารณาว่าเป็นโอกาสในการแนะนำ Webpack ให้กับระบบที่ทำงานอยู่ของคุณ Webpack นั้นยอดเยี่ยมตรงที่คุณสามารถใช้มากหรือน้อยก็ได้ตามที่คุณต้องการแต่ยังคงได้รับคุณค่าจากมัน เริ่มต้นด้วยการรวมโค้ดแอปพลิเคชันของคุณ แล้วเพิ่ม babel-loader ลงในมิกซ์ Webpack มีคุณลักษณะเชิงลึกที่สามารถรองรับส่วนเพิ่มเติมหรือคุณลักษณะใหม่ ๆ ได้ในบางครั้ง

ใช้ PostCSS อย่างง่ายดายด้วย npm Scripts

PostCSS เป็นคอลเลกชันที่ยอดเยี่ยมของปลั๊กอินที่แปลงและปรับปรุง CSS เมื่อเขียนและประมวลผลล่วงหน้า กล่าวอีกนัยหนึ่งก็คือโพสต์โปรเซสเซอร์ ง่ายพอที่จะใช้ประโยชน์จาก PostCSS โดยใช้สคริปต์ npm สมมติว่าเรามีสคริปต์ Sass เหมือนในตัวอย่างก่อนหน้านี้:

 "sass": "node-sass src/scss/ -o dist/css",

เราสามารถใช้คีย์เวิร์ด lifecycle ของสคริปต์ npm เพื่อเพิ่มสคริปต์ให้ทำงานโดยอัตโนมัติหลังจากงาน Sass:

 "postsass": "postcss --use autoprefixer -c postcss.config.json dist/css/*.css -d dist/css",

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

บทสรุป

นักวิ่งงานสามารถแก้ปัญหาได้จริง ฉันเคยใช้ task runners เพื่อคอมไพล์บิลด์ต่างๆ ของแอปพลิเคชัน JavaScript ขึ้นอยู่กับว่าเป้าหมายคือการผลิตหรือการพัฒนาในพื้นที่ ฉันยังใช้ task runners เพื่อรวบรวมเทมเพลต Handlebars เพื่อปรับใช้เว็บไซต์เพื่อใช้งานจริง และเพิ่มคำนำหน้าผู้ขายที่พลาดไปใน Sass ของฉันโดยอัตโนมัติ สิ่งเหล่านี้ไม่ใช่งานเล็ก ๆ น้อย ๆ แต่เมื่อพวกเขาถูกรวมเข้ากับนักวิ่งงานแล้ว พวกเขาก็กลายเป็นเรื่องง่าย

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