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

เพื่อนนักพัฒนาของฉัน: ไม่มีข้อแก้ตัวในการให้บริการขยะในเบราว์เซอร์ของคุณ ทวีต

ในโพสต์นี้เราจะดูเครื่องมือที่สามารถเป็นส่วนหนึ่งของสิ่งที่จะช่วยให้เราบรรลุระบบอัตโนมัติดังกล่าวได้ เครื่องมือนี้เป็นแพ็คเกจ npm ที่เรียกว่า Gulp.js เพื่อให้คุ้นเคยกับคำศัพท์ Gulp.js พื้นฐานที่ใช้ในโพสต์นี้โปรดดูที่“ บทนำสู่ JavaScript Automation ด้วย Gulp ” ที่เคยเผยแพร่ในบล็อกโดย Antonios Minas หนึ่งในนักพัฒนา ApeeScape คนหนึ่งของเรา เราจะถือว่าความคุ้นเคยพื้นฐานกับสภาพแวดล้อม npm เนื่องจากมีการใช้อย่างกว้างขวางตลอดโพสต์นี้เพื่อติดตั้งแพ็คเกจ

การให้บริการเนื้อหาส่วนหน้า

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

public/ |- build/ |- js/ |- bundle-{hash}.js |- css/ |- stylesheet-{hash}.css assets/ |- js/ |- vendor/ |- jquery.js |- site.js |- module1.js |- module2.js |- css/ |- main.css |- custom.css gulpfile.js package.json

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

แนวทางดั้งเดิมอย่างหนึ่งในการแก้ปัญหาเหล่านี้คือการรวมเนื้อหาแต่ละประเภทเข้าด้วยกันด้วยตนเองโดยใช้โปรแกรมแก้ไขข้อความจากนั้นเรียกใช้ผลลัพธ์ผ่านบริการ minifier เช่น http://jscompress.com/ . สิ่งนี้พิสูจน์ได้ว่าเป็นเรื่องน่าเบื่อมากที่ต้องทำอย่างต่อเนื่องในระหว่างขั้นตอนการพัฒนา การปรับปรุงเล็กน้อย แต่น่าสงสัยคือการโฮสต์เซิร์ฟเวอร์ minifier ของเราเองโดยใช้หนึ่งในแพ็คเกจที่มีอยู่ใน GitHub จากนั้นเราสามารถทำสิ่งที่ดูคล้ายกับสิ่งต่อไปนี้:

package.json

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

ทำงานอัตโนมัติด้วย Gulp.js

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

ความแตกต่างระหว่าง บริษัท กับ c

เราจะสร้างไดเร็กทอรีและโครงสร้างไฟล์ต่อไปนี้ในตัวอย่างของเรา:

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

ไฟล์ gulpfile.js คือที่ที่เราจะกำหนดงานที่ Gulp จะดำเนินการให้เรา npm install --save-dev gulp gulp-concat ถูกใช้โดย npm เพื่อกำหนดแพ็กเกจของแอปพลิเคชันและติดตามการอ้างอิงที่เราจะติดตั้ง ไดเรกทอรีสาธารณะคือสิ่งที่ควรกำหนดค่าให้หันหน้าเข้าหาเว็บ ไดเร็กทอรีสินทรัพย์คือที่ที่เราจะจัดเก็บไฟล์ต้นฉบับของเรา ในการใช้ Gulp ในโปรเจ็กต์เราจะต้องติดตั้งผ่าน npm และบันทึกเป็นการพึ่งพาของนักพัฒนาสำหรับโปรเจ็กต์ เราจะเริ่มต้นด้วย var gulp = require('gulp'); var concat = require('gulp-concat'); gulp.task('pack-js', function () { return gulp.src(['assets/js/vendor/*.js', 'assets/js/main.js', 'assets/js/module*.js']) .pipe(concat('bundle.js')) .pipe(gulp.dest('public/build/js')); }); gulp.task('pack-css', function () { return gulp.src(['assets/css/main.css', 'assets/css/custom.css']) .pipe(concat('stylesheet.css')) .pipe(gulp.dest('public/build/css')); }); gulp.task('default', ['pack-js', 'pack-css']); ปลั๊กอินสำหรับ Gulp ซึ่งจะช่วยให้เราสามารถเชื่อมต่อไฟล์หลายไฟล์เข้าด้วยกัน

ในการติดตั้งสองรายการนี้เราจะเรียกใช้คำสั่งต่อไปนี้:

pack-js

ต่อไปเราจะเริ่มเขียนเนื้อหาของ gulpfile.js

bundle.js

ที่นี่เรากำลังโหลดไลบรารี gulp และปลั๊กอิน concat จากนั้นเรากำหนดงานสามอย่าง

งานแรก (public/build/js) กำหนดขั้นตอนในการบีบอัดไฟล์ต้นฉบับ JavaScript หลายไฟล์ลงในบันเดิลเดียว เราแสดงรายการไฟล์ต้นฉบับซึ่งจะถูกรวมอ่านและเรียงต่อกันตามลำดับที่ระบุ เราต่อท่อลงในปลั๊กอิน concat เพื่อรับไฟล์สุดท้ายชื่อ pack-css สุดท้ายเราบอกอึกให้เขียนไฟล์เป็น stylesheet.css

งานที่สอง (public/build/css) ทำสิ่งเดียวกันกับด้านบน แต่สำหรับสไตล์ชีต CSS มันบอกให้ Gulp เก็บเอาท์พุทที่ต่อกันเป็น default ใน gulp .

ภารกิจที่สาม (public/build/js/bundle.js) คือ Gulp ทำงานเมื่อเราเรียกใช้โดยไม่มีข้อโต้แย้ง ในพารามิเตอร์ที่สองเราส่งผ่านรายการของงานอื่น ๆ เพื่อดำเนินการเมื่องานดีฟอลต์ถูกรัน

มาวางโค้ดนี้ลงใน gulpfile.js โดยใช้ตัวแก้ไขซอร์สโค้ดที่เราใช้ตามปกติจากนั้นบันทึกไฟล์ลงในรูทแอปพลิเคชัน

ความยืดหยุ่นของราคาของอุปทานใช้เพื่อวัด

ต่อไปเราจะเปิดบรรทัดคำสั่งและเรียกใช้:

public/build/css/stylesheet.css

หากเราดูไฟล์ของเราหลังจากรันคำสั่งนี้เราจะพบไฟล์ใหม่สองไฟล์: npm install --save-dev gulp-clean-css gulp-minify และ var minify = require('gulp-minify'); var cleanCss = require('gulp-clean-css'); . ไฟล์เหล่านี้เป็นการเชื่อมต่อกันของไฟล์ต้นฉบับของเราซึ่งช่วยแก้ปัญหาเดิมได้ส่วนหนึ่ง อย่างไรก็ตามพวกเขาไม่ได้ถูกลดขนาดและยังไม่มีการป้องกันแคช มาเพิ่มการลดขนาดอัตโนมัติ

การเพิ่มประสิทธิภาพสินทรัพย์ที่สร้างขึ้น

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

.pipe(minify()) .pipe(cleanCss())

ปลั๊กอินตัวแรกมีไว้สำหรับการลดขนาด CSS และปลั๊กอินตัวที่สองใช้สำหรับการย่อขนาด JavaScript อันแรกใช้แพ็คเกจ clean-css และอันที่สองใช้แพ็คเกจ UglifyJS2 เราจะโหลดสองแพ็คเกจนี้ใน gulpfile.js ของเราก่อน:

ความยืดหยุ่นของราคาของอุปสงค์วัดได้อย่างไร

var gulp = require('gulp'); var concat = require('gulp-concat'); var minify = require('gulp-minify'); var cleanCss = require('gulp-clean-css'); gulp.task('pack-js', function () { return gulp.src(['assets/js/vendor/*.js', 'assets/js/main.js', 'assets/js/module*.js']) .pipe(concat('bundle.js')) .pipe(minify()) .pipe(gulp.dest('public/build/js')); }); gulp.task('pack-css', function () { return gulp.src(['assets/css/main.css', 'assets/css/custom.css']) .pipe(concat('stylesheet.css')) .pipe(cleanCss()) .pipe(gulp.dest('public/build/css')); }); gulp.task('default', ['pack-js', 'pack-css']);

จากนั้นเราจะต้องใช้มันในงานของเราก่อนที่เราจะเขียนผลลัพธ์ลงในดิสก์:

stylesheet.css

ตอนนี้ gulpfile.js ควรมีลักษณะดังนี้:

bundle.js

มาเริ่มกันอีกครั้ง เราจะเห็นว่าไฟล์ bundle.js ถูกบันทึกในรูปแบบย่อส่วนและไฟล์ .pipe(minify({ ext:{ min:'.js' }, noSource: true })) ยังคงบันทึกไว้ตามที่เป็นอยู่ เราจะสังเกตได้ว่าตอนนี้เรามีบันเดิล -min.js ซึ่งถูกลดขนาด เราต้องการเฉพาะไฟล์ที่ย่อขนาดและเราต้องการให้บันทึกเป็น npm install --save-dev gulp-rev ดังนั้นเราจะแก้ไขโค้ดของเราด้วยพารามิเตอร์เพิ่มเติม:

var rev = require('gulp-rev');

ตามเอกสารประกอบของปลั๊กอิน gulp-minify (https://www.npmjs.com/package/gulp-minify) สิ่งนี้จะตั้งชื่อที่ต้องการสำหรับเวอร์ชันที่ย่อขนาดและบอกปลั๊กอินว่าอย่าสร้างเวอร์ชันที่มีแหล่งต้นฉบับ หากเราลบเนื้อหาของไดเร็กทอรีบิลด์และเรียกใช้อึกจากบรรทัดคำสั่งอีกครั้งเราจะได้ไฟล์ที่ย่อขนาดเพียงสองไฟล์ เราเพิ่งดำเนินการขั้นตอนการลดขนาดของกระบวนการสร้างของเราเสร็จสิ้น

การป้องกันแคช

ต่อไปเราจะเพิ่มการป้องกันแคชและเราจะต้องติดตั้งปลั๊กอินสำหรับสิ่งนั้น:

var gulp = require('gulp'); var concat = require('gulp-concat'); var minify = require('gulp-minify'); var cleanCss = require('gulp-clean-css'); var rev = require('gulp-rev'); gulp.task('pack-js', function () { return gulp.src(['assets/js/vendor/*.js', 'assets/js/main.js', 'assets/js/module*.js']) .pipe(concat('bundle.js')) .pipe(minify({ ext:{ min:'.js' }, noSource: true })) .pipe(rev()) .pipe(gulp.dest('public/build/js')) .pipe(rev.manifest()) .pipe(gulp.dest('public/build')); }); gulp.task('pack-css', function () { return gulp.src(['assets/css/main.css', 'assets/css/custom.css']) .pipe(concat('stylesheet.css')) .pipe(cleanCss()) .pipe(rev()) .pipe(gulp.dest('public/build/css')) .pipe(rev.manifest()) .pipe(gulp.dest('public/build')); }); gulp.task('default', ['pack-js', 'pack-css']);

และต้องการมันในไฟล์อึกของเรา:

public/build

การใช้ปลั๊กอินนั้นค่อนข้างยุ่งยาก เราต้องไปป์ minified output ผ่านปลั๊กอินก่อน จากนั้นเราต้องเรียกปลั๊กอินอีกครั้งหลังจากที่เราเขียนผลลัพธ์ลงในดิสก์ ปลั๊กอินจะเปลี่ยนชื่อไฟล์เพื่อให้ถูกแท็กด้วยแฮชที่ไม่ซ้ำกันและยังสร้างไฟล์รายการ ไฟล์รายการคือแผนที่ที่แอปพลิเคชันของเราสามารถใช้เพื่อกำหนดชื่อไฟล์ล่าสุดที่เราควรอ้างถึงในโค้ด HTML ของเรา หลังจากที่เราแก้ไขไฟล์ gulp มันควรจะมีลักษณะดังนี้:

var gulp = require('gulp'); var concat = require('gulp-concat'); var minify = require('gulp-minify'); var cleanCss = require('gulp-clean-css'); var rev = require('gulp-rev'); gulp.task('pack-js', function () { return gulp.src(['assets/js/vendor/*.js', 'assets/js/main.js', 'assets/js/module*.js']) .pipe(concat('bundle.js')) .pipe(minify({ ext:{ min:'.js' }, noSource: true })) .pipe(rev()) .pipe(gulp.dest('public/build/js')) .pipe(rev.manifest('public/build/rev-manifest.json', { merge: true })) .pipe(gulp.dest('')); }); gulp.task('pack-css', function () { return gulp.src(['assets/css/main.css', 'assets/css/custom.css']) .pipe(concat('stylesheet.css')) .pipe(cleanCss()) .pipe(rev()) .pipe(gulp.dest('public/build/css')) .pipe(rev.manifest('public/build/rev-manifest.json', { merge: true })) .pipe(gulp.dest('')); }); gulp.task('default', ['pack-js', 'pack-css']); ด้วยการป้องกันแคชที่เหมาะสมคุณสามารถใช้งานไฟล์ JS และ CSS ที่หมดอายุได้นานและแทนที่ด้วยเวอร์ชันที่ใหม่กว่าได้อย่างน่าเชื่อถือเมื่อจำเป็น

มาลบเนื้อหาในไดเร็กทอรีบิวด์ของเราและเรียกใช้อีกครั้ง เราจะพบว่าตอนนี้เรามีสองไฟล์ที่มีแฮชแท็กติดอยู่ในชื่อไฟล์แต่ละไฟล์และไฟล์ manifest.json ที่บันทึกไว้ใน rev.manifest() หากเราเปิดไฟล์ manifest เราจะเห็นว่ามีเพียงการอ้างอิงไปยังไฟล์ที่ย่อขนาดและติดแท็กของเราเท่านั้น สิ่งที่เกิดขึ้นคือแต่ละงานเขียนไฟล์ manifest แยกกันและงานหนึ่งจะเขียนทับอีกไฟล์หนึ่ง เราจะต้องแก้ไขงานด้วยพารามิเตอร์เพิ่มเติมที่จะบอกให้พวกเขาค้นหาไฟล์รายการที่มีอยู่และรวมข้อมูลใหม่เข้าด้วยกันหากมีอยู่ ไวยากรณ์ของสิ่งนั้นมีความซับซ้อนเล็กน้อยดังนั้นเรามาดูกันว่าโค้ดควรมีลักษณะอย่างไรจากนั้นจึงกล่าวต่อไป:

rev-manifest.json

เรากำลังวางเอาต์พุตไปที่ rev.manifest() อันดับแรก. สิ่งนี้จะสร้างไฟล์ที่ติดแท็กแทนไฟล์ที่เรามีมาก่อน เรากำลังจัดเตรียมเส้นทางที่ต้องการของ npm install --save-dev del และบอก var del = require('del'); gulp.task('clean-js', function () { return del([ 'public/build/js/*.js' ]); }); gulp.task('clean-css', function () { return del([ 'public/build/css/*.css' ]); }); เพื่อรวมเข้ากับไฟล์ที่มีอยู่หากมีอยู่ จากนั้นเราจะบอกให้อึกเขียนรายการไปยังไดเร็กทอรีปัจจุบันซึ่ง ณ จุดนั้นจะเป็นสาธารณะ / สร้าง ปัญหาเส้นทางเกิดจากข้อบกพร่องที่กล่าวถึงในรายละเอียดเพิ่มเติมเกี่ยวกับ GitHub

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

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

gulp.task('pack-js', ['clean-js'], function () { gulp.task('pack-css', ['clean-css'], function () {

เราจะกำหนดให้ใช้ในโค้ดของเราและกำหนดงานใหม่สองอย่างงานหนึ่งสำหรับซอร์สไฟล์แต่ละประเภท:

gulp

จากนั้นเราจะตรวจสอบให้แน่ใจว่างานใหม่ทำงานเสร็จสิ้นก่อนภารกิจหลักสองอย่างของเรา:

gulp.task('watch', function() { gulp.watch('assets/js/**/*.js', ['pack-js']); gulp.watch('assets/css/**/*.css', ['pack-css']); });

ถ้าเราเรียกใช้ gulp.task('default', ['watch']); อีกครั้งหลังจากการแก้ไขนี้เราจะมีไฟล์ที่ย่อขนาดล่าสุด

ปัญหาที่สองคือเราไม่ต้องการทำงานอึกใหญ่ทุกครั้งที่ทำการเปลี่ยนแปลง ในการแก้ปัญหานี้เราจะต้องกำหนดภารกิจเฝ้าดู:

pack-js

เราจะเปลี่ยนคำจำกัดความของงานเริ่มต้นของเราด้วย:

pack-css

หากตอนนี้เราเรียกใช้อึกจากบรรทัดคำสั่งเราจะพบว่ามันไม่ได้สร้างอะไรอีกต่อไปเมื่อมีการร้องขอ เนื่องจากตอนนี้เรียกว่างานเฝ้าดูที่จะเฝ้าดูไฟล์ต้นฉบับของเราสำหรับการเปลี่ยนแปลงใด ๆ และสร้างเฉพาะเมื่อตรวจพบการเปลี่ยนแปลง ถ้าเราลองเปลี่ยนไฟล์ต้นฉบับของเราแล้วดูที่คอนโซลของเราอีกครั้งเราจะเห็นว่า gulp(‘bundle.js’) และ

งานจะทำงานโดยอัตโนมัติพร้อมกับการอ้างอิง

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

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

คุณสามารถดูซอร์สโค้ดสุดท้ายของบทความนี้พร้อมกับเนื้อหาตัวอย่างบางส่วนได้ใน ที่เก็บ GitHub นี้ .

สรุป

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

หมายเลขบัตรเครดิตที่ถูกแฮ็กด้วย cvv และรหัสไปรษณีย์ 2017

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

ที่เกี่ยวข้อง: Gulp Under the Hood: การสร้างเครื่องมือทำงานอัตโนมัติบนสตรีม