حتما برای شما هم پیش آمده است که پس از طراحی کامل یک وب سایت، برای بهینه سازی آن بخواهید حجم تصاویر به کار رفته را کاهش دهید.
فایل های Sass و Less را کامپایل کنید و یا فایل های جاوااسکریپت پروژه را کوچک سازی نمایید.
این موارد و بسیاری موارد دیگر از جمله کارهایی است که انجام مداوم آن گاه باعث هدررفت زمان می شود و شاید عملا احتیاجی به صرف زمان زیاد برای این قبیل کارها نباشد.
گالپ چیست؟
گالپ یک task runner یا اجرا کننده فرامین است که به وسیله آن می توان به بسیاری از کارها و پروسه های تکراری و زمان بر طراحی و توسعه وب، سرعت ببخشید و از طراحی سایت لذت ببرید!
برای شروع باید مراحل زیر در طراحی سایت را قدم به قدم انجام دهید:
1-نصب Node.js:
به دلیل اینکه Gulp بر پایه NodeJs ساخته شده است، اولین قدم نصب NodeJs می باشد.
از اینجا NodeJs را دریافت نمایید.
مراحل نصب را تا انتها پیش بروید تا نود جی اس بر روی سیستم شما نصب شود.
2-نصب گالپ
در این مرحله نوبت به نصب گالپ می رسد. صفحه CMD را باز کنید و دستور زیر را در آن بنویسید:
npm install --global gulp
به وسیله این دستور، گالپ بر روی سیستم شما نصب می شود.
برای استفاده از گالپ در هر پروژه باید از طریقcmd به مکان پروژه دسترسی پیدا کنیم و دستور مورد نظر را اجرا نماییم. همان طور که در تصویر زیر مشاهده می کنید، برای دسترسی به مکان پروژه مورد نظر cd را می نویسیم و سپس آدرس دقیق محل پروژه را وارد می کنیم و اینتر می زنیم:
سپس با وارد کردن دستور زیر، پوشه مورد نیاز گالپ برای اجرای دستورات ساخته می شود:
npm install --save-dev gulp
از این مرحله به بعد، می توانیم به گالپ برای اجرای فرامین خود دستور بدهیم. در این مقاله ابتدا با فرمان بسیار کاربردی Refresh خودکار صفحات پس از هر بار تغییرات شما در پروژه، دستورات را پیش می بریم.
برای این منظور یک فایل جاواسکریپت با نام gulpfile.js در Root پروژه ایجاد کنید و کد زیر را در آن بنویسید:
var gulp =require('gulp');
gulp.task('default',function(){
//Tasks that we want to run
}
این کدها اسکلت بندی اصلی فایل gulpfile.js را نشان می دهد. مسلما این خطوط دراین مرحله کار خاصی را انجام نمی دهند. برای ایجاد دستور رفرش خودکار صفحات یا browser-sync ابتدا بسته مورد نظر را به وسیله کد زیر در ترمینال نصب کنید:
npm install browser-sync
سپس کد زیر را در gulpfile.js بنویسید:
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
// Static server
gulp.task('default', function() {
browserSync.init({
server: {
baseDir: "./"
}
});
gulp.watch("*.html").on('change', browserSync.reload);
gulp.watch("styles/*.css").on('change', browserSync.reload);
});
به دو خط انتهای دستور توجه کنید. خط اول همه فایل های html موجود در root پروژه شما را رصد می کند و به محض هر تغییر و طراحی سایت مرورگر را به روز می نماید.
خط بعدی نیز همه فایل های css موجود در پوشه styles را بررسی می کند و هر تغییر را در مرورگر به روز می نماید.