การเปลี่ยนชื่อไฟล์ใน Gulp

เมื่อทำการย่อขนาดไฟล์ CSS หรือ JavaScript มันจะสะดวกมากถ้าไฟล์ที่ถูกปรับให้เหมาะที่สุด มีการระบุไว้ในชื่อไฟล์ว่า min ตัวอย่างเช่น styles.min.css

สำหรับสิ่งนี้เราใช้ปลั๊กอิน gulp-rename ซึ่งทำหน้าที่เปลี่ยนชื่อไฟล์ก่อนที่จะบันทึก ในการติดตั้งปลั๊กอิน จำเป็นต้องรันคำสั่งต่อไปนี้ ในบรรทัดคำสั่ง:

npm install gulp-rename --save-dev

ตอนนี้เรามาเชื่อมต่อตัวย่อขนาด CSS และปลั๊กอินที่ติดตั้งไว้ สำหรับการเปลี่ยนชื่อ:

let {src, dest} = require('gulp');
let cleanCSS = require('gulp-clean-css');
let rename = require('gulp-rename');

ตอนนี้เราจะดำเนินการเปลี่ยนชื่อไฟล์ก่อน ที่จะบันทึกไฟล์เหล่านั้น:

function task(cb) {
	return src('src/*.css')
		.pipe(cleanCSS())
		.pipe(rename({
				extname: '.min.css'
			})
		)
		.pipe(dest('dist'));
}

ทำการย่อขนาดไฟล์ JavaScript โดยใช้ ปลั๊กอิน gulp-uglify โดยที่ไฟล์ที่ได้ จะต้องมีนามสกุลไฟล์เป็น .min.js