دوره آموزش gulpjs قسمت سوم: الحاق فایل ها و فشرده سازی

در این قسمت قصد داریم به اهمیت الحاق فایل‌ها و نحوه پیاده سازی این کار با GulpJS بپردازیم.

یکی از فاکتورهای سرعت یک وب سایت، کاهش تعداد درخواست‌ها از سرور است. فرض کنید در یک پروژه تحت وب خود از ده پلاگین استفاده کنید و هر پلاگین یک فایل js و یک فایل css و خود سایت شما چند js و چند css داشته باشد.

همانطور که متوجه شدید در این مثال ما مجموعا ده‌ها فایل داریم که به این معناست که قرار است ده‌ها در خواست به سرور ارسال شود که خود این کار سرعت بارگذاری سایت را کاهش می‌دهد.

برای حل این مشکل باید یکی از پلاگین‌های مفید Gulp را نصب و استفاده کنید تا تمام فایل‌های js را در یک فایل و تمام فایل‌های css را در یک فایل خلاصه نمایید.

ابتدا در پوشه پروژه خود و با استفاده از CMD پوشه جاری دستور زیر را اجرا کنید، تا پلاگین gulp-concat نصب شود:

npm i -D gulp-concat

برای مشاهده لیست پلاگین‌ها به سایت gulpjs.com و مسیر Plugins رفته و در آن جا کلیه پلاگین‌های gulp را مشاهده کنید.

فایل gulpfile.js را به شکل زیر ویرایش می‌کنیم:

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

gulp.task('concat_js_files', function(){
	gulp
		.src([
			'js/jquery.countdown.js',
			'js/jquery.countdown.min.js'
		])
		.pipe(concat("app.js"))
		.pipe(gulp.dest("dest"));
});

در سطر دوم یک متغیر concat را ایجاد کردیم و آن را برابر require('gulp-concat')  قرار دادیم.

اساسا این فاکتورهایی که در سطر اول و دوم require شده اند در واقع پلاگین‌های gulp هستند که همه در پوشه node_modules موجود اند.

در سطر چهارم یک task با نام concat_js_files ایجاد کردیم و در بخش function دستورات مورد نیاز برای ادغام کردن فایل‌ها را درج نمودیم.

دستور src یک آرایه می‌پذیرد که در آن فایل‌هایی که قصد ادغام آن‌ها را داریم را مشخص می‌کند.

دستور pipe نیز برای اجرای پلاگین‌ها کاربرد دارد که با concat("app.js") فایل نتیجه که قرار است تمام اطلاعات در آن ادغام شود را مشخص می‌کند.

دستور gulp.dest("dest") مسیر فایل ادغام شده را مشخص می‌کند، بنابراین این فایل ادغام شده app.js در پوشه dest قرار خواهد گرفت.

در cmd دستور gulp concat_js_files را در خواست دهید و نتیجه را مشاهده کنید. اگر دستورات درست باشند باید در پوشه dest یک فایل به نام app.js شامل کلیه سورس‌ها ایجاد گردد.

نکته‌ای که در اینجا بسیار مهم است، این می‌باشد که می‌توان ورودی‌های src را به شکل‌های دیگری نیز تعیین کرد. مثال زیر را ببینید:

.src([
	'js/*.js'
])

در بالا منظور این است که کلیه فایل‌ها با پسوند js را از پوشه js انتخاب کن.

مثال زیر را ببینید:

.src([
	'js/*.js',
	'!js/sim.js'
])

در بالا منظور این است که کلیه فایل‌ها با پسوند js را از پوشه js انتخاب کن به جز فایل sim.js که به هر دلیل نمی‌خواهیم در فایل app.js ادغام شود.

مثال زیر را ببینید:

.src([
	'js/**/*.js'
])

با دستور بالا تمام فایل‌های موجود در پوشه js و یا پوشه‌های درون js که پسورند .js دارند را انتخاب می‌کنیم.

فشرده سازی کدهای جاوا اسکریپت با GulpJS

با پلاگین gulp-uglify به سادگی می‌توان کدهای جاوا اسکریپت را بسیار فشرده و کم حجم کرد. در ابتدا پلاگین uglify را با دستور زیر دانلود کنید:

npm i -D gulp-uglify

دستور زیر را ببینید:

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');

gulp.task('task_one', function(){
	gulp
		.src([
			'js/*.js'
		])
		.pipe(concat("app.js"))
		.pipe(uglify())
		.pipe(gulp.dest("dest"));
});

در بالا در سطر سوم gulp-uglify را در متغیر uglify قرار دادیم.

در سطر 11 با دستور uglify() سورس کدها فشرده می‌شوند.

نتیجه اجرای دستورات فوق ادغام کلیه فایل‌های جاوا اسکریپت پوشه js در یک فایل با نام app.js در پوشه dest با حداکثر فشرده سازی است.

فشرده سازی کدهای CSS با GulpJS

با پلاگین clean-css به سادگی می‌توان کدهای CSS را بسیار فشرده و کم حجم کرد. در ابتدا پلاگین clean-css را با دستور زیر دانلود کنید:

npm i -D gulp-clean-css

با کدهای زیر عملیات فشرده سازی CSS را انجام می‌دهیم:

var gulp = require('gulp');
var cleanCSS = require('gulp-clean-css');

gulp.task('task_one', function(){
	gulp
		.src([
			'css/*.css'
		])
		.pipe(concat("css.css"))
		.pipe(cleanCSS())
		.pipe(gulp.dest("dest"));
});

با کدهای بالا ابتدا فایل‌های css در هم الحاق شده و سپس فشرده و در پوشه dest قرار می‌گیرد.

اجرای همزمان وظایف

در این قسمت و قسمت‌های قبل گفتیم task های درون gulpfile.js به ترتیب و پشت سر هم اجرا می‌شوند. ولی در این جا قصد داریم راه کاری به شما معرفی کنیم که تمام دستورات به صورت همزان اجرا شوند. مثال زیر را ببینید:

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

gulp.task('task1', function(){
	return gulp
		.src([
			'js/*.js'
		])
		.pipe(concat("app.js"))
		.pipe(gulp.dest("dest"));
});

gulp.task('task2', function(){
	return gulp
		.src([
			'js/*.js'
		])
		.pipe(concat("app2.js"))
		.pipe(gulp.dest("dest"));
});

gulp.task('task3', function(){
	return gulp
		.src([
			'js/*.js'
		])
		.pipe(concat("app3.js"))
		.pipe(gulp.dest("dest"));
});

gulp.task('default', ['task1', 'task2', 'task3']);

در دستورات فوق سه task داریم و در نهایت یک task از نوع default تعریف کردیم که هر سه task بالا را در خود دارد. اگر دقت کرده باشید در بالا قبل از دستور gulp از دستور return استفاده کردیم. با استفاده از این دستور، وظایف به صورت همزان اجرا می‌شوند و هر کدام زودتر تمام شد در خروجی به عنوان تمام شده اعلام می‌شود. یک نمونه از نتیجه اجرای کدهای فوق به شرح زیر است:

[15:34:10] Starting 'task1'...
[15:34:10] Starting 'task2'...
[15:34:10] Starting 'task3'...
[15:34:10] Finished 'task3' after 238 ms
[15:34:11] Finished 'task1' after 382 ms
[15:34:11] Finished 'task2' after 377 ms
[15:34:11] Starting 'default'...
[15:34:11] Finished 'default' after 184 μs

همانطور که می‌بینید ابتدا task1 و task2 و task3 اجرا می‌شوند ولی اولین وظیفه‌ای که تمام می‌شود task3 است سپس task1 و در نهایت task2. با حذف دستور return خواهید دید که نتیجه مانند زیر در CMD نمایش داده خواهد شد:

[15:38:54] Starting 'task1'...
[15:38:54] Finished 'task1' after 7.14 ms
[15:38:54] Starting 'task2'...
[15:38:54] Finished 'task2' after 1.02 ms
[15:38:54] Starting 'task3'...
[15:38:54] Finished 'task3' after 539 μs
[15:38:54] Starting 'default'...
[15:38:54] Finished 'default' after 35 μs

ابتدا task1 اجرا سپس خاتمه پیدا کرد سپس task2 و بعد task3 و در نهایت default اجرا و تمام می‌شد.