การไหลของงานใน Gulp

ตอนนี้เรามาเรียนรู้วิธีการดำเนินการหลายขั้นตอนกับไฟล์กัน ตัวอย่างเช่น แปลง LESS เป็น CSS ก่อน จากนั้นจึงบีบอัด CSS ที่ได้ให้มีขนาดเล็กลง

เริ่มต้นด้วยการนำเข้าทุกสิ่งที่จำเป็น:

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

ตอนนี้เรามาดำเนินการตามขั้นตอนที่อธิบายไว้:

function task(cb) {
	return src('src/*.less')
		.pipe(less())
		.pipe(cleanCSS())
		.pipe(dest('dist'));
}

แปลงไฟล์ Stylus เป็น CSS โดยใช้ปลั๊กอิน gulp-stylus จากนั้นเพิ่มคำนำหน้า (prefix) ให้กับคุณสมบัติ CSS โดยใช้ปลั๊กอิน gulp-autoprefixer แล้วจึงทำการบีบอัด CSS ที่ได้โดยใช้ปลั๊กอิน gulp-csso