ES6 در Gulp با استفاده از Babel

ES6 در Gulp با استفاده از Babel

امروزه Gulp به یکی از ابزارهای مدرن برای توسعه وب تبدیل شده است و حتما در پروژه ها وجود Gulp را احساس کردید. ما در گذشته چندین پست را در رابطه با Gulp در بابون قرار داده ایم و به اندازه کافی با آن آشنا شده اید.

امروز می خواهیم با استفاده از Babel از ES6‌ در فایل Gulp استفاده کنیم و همچنین نشان دهیم که چطور آن را برای کارهای خود پیکربندی کنیم.


نصب Node.js

قبل از هر چیز اطمینان حاصل کنید که Node.js را روی سیستم نصب دارید. اگر اینطور نیست پیشنهاد می شود از nvm برای نصب Node استفاده کنید.

اگر آشنایی کافی با npm دارید پیشنهاد می شود از YARN برای نصب پکیج های node استفاده کنید. اما با این حال ما در این پست از NPM برای نصب پکیج های استفاده خواهیم کرد.

نصب Gulp.js

ابتدا Gulp را با دستور زیر نصب کنی:

دستور فوق gulp را بصورت global در سیستم نصب می کنید (این کار اجباری است).

حال دستور زیر را در خط فرمان اجرا کنید:

این دستور باعث می شود Gulp را بصورت local به عتوان development dependency در پروژه شما ذخیره کند.

نصب و راه اندازی babel

مرحله بعدی نصب babel است. از طریق دستور زیر آن را نصب کنید:

پکیج اول پکیج های لازم برای Babel را نصب می کند و از پکیج دوم شامل پیکربندی هایی است که به Babel اجازه می دهد ES6 / ES5 را کامپایل کند.

در این مورد ما از ES6  استفاده خواهیم کرد. برای این کار در ریشه پروژه خود یک فایل babelrc. ایجاد کنید که شامل مقدار زیر باشد:

ES6

حال که تنظیمات لازم را انجام دادیم وقت آن است ES6 بنویسیم. همانطور که شاید بدانید قبلا ما تمام دستورات را در فایل gulpfile.js می نوشتیم. اما از آنجایی که از Babel استفاده می کنیم این فایل را به نام gulpfile.babel.js تغییر نام می دهیم.

Hello, World

حال برای اینکه اطمینان حاصل کنیم مراحل فوق را درست انجام داده ایم کدهای زیر را به فایل gulpfile.babel.js اضافه کنید. این کدها تنها برای تست است:

با اجرا دستور gulp در خط فرمان باید Hello, World را در کنسول مشاهده کنید:

آموزش gulp

چه کاری را انجام خواهیم داد

در این پروژه قصد داریم فایل های نوشته شده با sass را به فایل های css کامپایل کنیم و همچنین خواهیم دید چطور بقیه منابع مثل جاوا اسکریپت، فونت ها، تصاویر را به همین صورت کامپایل کنیم و آنها را در یک دایرکتوری مجزا به نام dist قرار دهیم.

ساختار پروژه

ابتدا ساختار پروژه ای که می خواهیم درست کنیم را بصورت زیر سازماندهی کنید:

در پوشه sass ما یک فایل main.scss داریم که به عنوان یک فایل مادر عمل می کند. آن را ایجاد کرده و SASS زیر را به آن اضافه کنید:

همانطور که مشخص است این فایل تمام فایل های scss. دیگری که در بخش های مختلف است را فراخوانی می کند تا به عنوان یک فایل واحد عمل کند. همچنین برای نتیجه بهتر باید فایل های globalheaderfooter با Sass پر کنید تا در هنگام کامپایل شدن چیزی را در فایل کامپایل شده مشاهده کنید.

قبل از اینکه کار نوشتن تسک ها در Gulp را شروع کنیم، ابتدا پکیج های لازم برای کامپایل کردن، بهینه کردن، ادغام و … را نصب کنید:

برای فراخوانی این پکیج ها به صورت ES6 در فایل gulpfile.babel.js بصورت زیر عمل می کنیم:

Sass

حال وقت آن است که اولین تسک واقعی gulp را بنویسم، این تسک را در ادامه خط‌های فوق قرار دهید:

همانطور که مشاهده می کنید، ما ابتدا مسیر فایل main.scss که شامل دیگر فایل های .scss دیگر است را در ()gulp.src تعریف کرده ایم و به دنبال آن sourcemaps را مقدارهای کرده ایم، آنگاه در ادامه تابع ()sass فایل های کامپایل و فشرده سازی می کند. در ادامه از rename برای تغییر نام فایل کامپایل شده استفاده کرده ایم و همچنین آدرس پوشه ایی که sourcemap در آن قرار داده می شود را تعریف کردیم، در خط آخر مسیری که می خواهیم فایل کامپایل شده در آن قرار گیرد را مشخص می کنیم. پوشه ای که فایل های کامپایل شده در آن قرار داده می شود dist است. این پوشه بطور خودکار هنگام پردازش ایجاد می شود:

JavaScripts

همین کار برای فایل های جاوا اسکریپت انجام می دهیم:

fonts

Images

تعریف تسک watch

حال که تسک های خود را ایجاد کردیم وقت آن است که آخرین تسک خود را نیز ایجاد کنید، با تعریف تسک watch این قابلیت را در هنگام توسعه به پروژه می دهید که وقتی هر فایلی در پوشه assets تغییر داده شد بلافاصله این تغییر بطور خودکار شناسایی شده و تسک مورد نظر اجرا شود (تسک هایی که در فوق تعریف کردیم).

در آخر تست زیر را در انتهای کد خود وارد کنید:

حال به کنسول خود مراجعه کنید و دستور gulp را تایپ و اجرا کنید، خواهید دید که فایل ها کامپایل شده و در دایرکتوری dist قرار داده می شود و به دنبال آن تسک watch اجرا می شود.