رفتن به مطلب

پست های پیشنهاد شده

getting_started_with_gulp.png

با سلام خدمت دوستان عزیز

در این تاپیک، قصد دارم درمورد فریم‌ورک Gulp که تحت NodeJS هست، آموزش بدم.

آموزش‌های این تاپیک، کاربردی هستند، بنابراین بعد از جلسه اول و دوم، شروع به توضیح مثال‌های کاربردی Gulp می‌کنیم که البته شما کاربران هم می‌تونن مثال ارسال کنن.

خب:

1. در این تاپیک نه سؤال بپرسید و نه اسپم بدید. بعد از جلسه سوم، می‌تونید مثال‌های خودتون رو در همین تاپیک ارسال کنید.

2. آموزش‌های پیوسته هستند و در آخر یه فایل PDF در اختیار کاربران قرار میگیره.

3. برای این آموزش، باید Javascript را در حد متوسط بلد باشید، می‌تونید از این آموزش Black_Sky عزیز کمک بگیرید.

4. اگه پیشنهاد یا انتقادی درمورد تاپیک دارید، به صورت پیام خصوصی برای من ارسال کنید.

موفق باشید.

لینک به ارسال

nodejs.png

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

پیش از شروع با Gulp باید آن را نصب کنیم. نصب Gulp بسیار ساده است و با اجرای یک دستور در خط فرمان به راحتی انجام می‌شود. برای نصب Gulp شما باید اول NodeJS را نصب کرده باشید.

برای دانلود و نصب NodeJS می‌توانید به وب‌سایت آن مراجعه کنید و نسخه متناسب با سیستم‌عامل خودتون رو دانلود و نصب کنید. بعد از نصب، در صورتی که در سیستم‌عامل ویندوز هستید، وارد Node.js command prompt شوید و در صورتی که در از سیستم‌عامل Unix (لینوکس و مک و ...) استفاده می‌کنید، ترمینال رو باز کنید.

سپس با واردکردن دستور node از نصب‌بودن اون مطمئن بشید.

هم‌چنین شما به Node Package Manager یا همون npm هم نیاز دارید. npm کارش دانلود و نصب پکیج‌های ناد مثل gulp و browser-sync هست. معمولاً npm همراه با NodeJS نصب میشه، شما می‌تونید اینو با واردکردن دستور npm در ترمینال یا خط‌فرمان امتحان کنید. در صورتی که npm نصب نبود، با یه گوگل ساده می‌تونید نحوه نصب npm رو با توجه به سیستم‌عاملتون پیدا کنید.

بعد از این‌که از نصب‌بودن npm و NodeJS مطمئن شدید، با واردکردن دستور زیر در ترمینال یا خط‌فرمان Gulp رو نصب کنید:


npm install -g gulp

نکته: برای سیستم‌های یونیکس نیاز دارید که از sudo استفاده کنید.

در این حین که Gulp دانلود و نصب می‌شه، ما هم درمورد Gulp کمی صحبت کنیم.

Gulp چیه؟

Gulp یک سیستم اجرای وظیفه (Task Runner) اتوماتیکه که به شما کمک می‌کنه تا Productivity شما رو در توسعه فرانت‌اند افزایش بده. مثلاً Gulp می‌تونه شما رو از شر F5 زدن برای تست CSS نجات بده. اگه از Sass یا Less استفاده می‌کنید، به شما این امکان رو میده که بلافاصله بعد از این‌که فایل سورس خودتون رو سیو کردید، فایل CSS هم Build بشه و به مرورگر منتقل بشه.

شگفت‌انگیز نیست؟

Gulp چی نیست؟

* Gulp یه زبان برنامه‌نویسی نیست، بلکه یک پکیج برای NodeJSه.

* Gulp به درد بک‌اند (Back-End) نمیخوره، مگر در مواردی، مثلاً ایجاد فایل POT برای ترجمه قالب و پلاگین وردپرس

* Gulp این همه کار رو انجام نمیده، برای انجام بقیه موارد شما باید پلاگین‌های گالپ رو نصب کنید.

فکر می‌کنم حالا Gulp نصب و دانلود شده! میتونید با تایپ دستور gulp اینو امتحان کنید، اگه خطای no gulpfile.js found رو دریافت کردید، نگران نباشید! همه چیز طبیعیه!

----

جلسه بعد: اولین Task

موفق باشید.

لینک به ارسال

first_task_topic.png

ساخت اولین Task - مقدمات

در پست قبلی اشاره‌ای کردم که Gulp یک سیستم Task Runner اتوماتیکه. حالا این که گفتی یعنی چی؟ :D

- گالپ به ما قابلیت ایجاد Task یا همون وظایف رو میده. مثلاً ما میتونیم یه Task تعریف کنیم که وقتی ما Task را اجرا کردیم، شما فلان کار رو انجام بده. مثلاً شما تعریف می‌کنی که وقتی دستور gulp رو اجرا کردی، تمام فایل‌های Sassت رو تبدیل به CSS کنه یا به قول اجنبی‌ها Build کنه!

اما گالپ قابلیت دیگه‌ای به نام Watch به ماه میده، به این معنا که ما میتونیم فایل‌های موردنظرمون رو به گالپ بدیم که زیرنظر بگیره و هرموقع که تغییر کرد، اون‌وقت Taskیی رو اجرا کنه، مثلاً می‌تونیم تعریف کنیم که اگر فایل‌های sass تغییر کرد (مثلاً در ویرایشگر تغییرات خودتون رو Save کردید)، بلافاصله همه رو Buid کنه.

برای ایجاد اولین Task، از یک Task معمولی شروع می‌کنیم که خودتون باید به گالپ بگید که این Task رو اجرا کنه و کاری به Saveشدن فایل نداره. Task موردنظرمون، ایجاد یه برنامه هست که فایل‌های CSS رو بخونه و Minify کنه و در قالب یک فایل ذخیره کنه.

باید کدهای Task را در فایلی به نام gulpfile.js بنویسیم تا اجرا شود، احتمالاً دلیل ارور no gulpfile.js found که در پست قبل اشاره کردم رو فهمیدید. گالپ برای اجرا به gulpfile.js که خودمان می‌نویسیم احتیاج دارد. خب، منتظر چی هستیم؟ بریم gulpfile.js بنویسیم! در دایرکتوری موردنظر خودتون gulpfile.js رو ایجاد کنید و با ویرایشگر موردعلاقه‌تون بازش کنید.

از کدهای ابتدایی و اساسی gulpfile.js شروع می‌کنیم:


var gulp = require( 'gulp' );

gulp.task( 'default', function() {
// ...
} );

برای اساس کار، ما ابتدا کلاس خود Gulp را فراخوانی می‌کنیم، سپس با استفاده از gulp.task یک Task جدید تعریف می‌کنیم. پارامتر اول gulp.task همیشه نام Task هست که باید انگلیسی باشه و برای اجرای اون‌هم نیاز داریم تا این اسم رو فراخوانی کنید.

حالا برای اجرای Task کافیه که توی ترمینال خودتون (که قبلاً به دایرکتوری cd کردید) فرمان gulp default رو اجرا کنید. با اجرای دستور، Task به نام default اجرا می‌شود. اگر در کد بنویسیم ehsaan و در ترمینال هم gulp ehsaan را فراخوانی کنیم، گالپ سراغ Task به نام ehsaan می‌رود.

نکته‌ای که قابل توجه هست اینه که در صورتی که Task به نام default تعریف کنید، با اجرای دستور gulp به تنهایی، همون default اجرا میشه. :)

فایل gulpfile.js زیر رو در نظر بگیرید:



var gulp = require( 'gulp' );

gulp.task( 'task1', function() {
// ...
} );

gulp.task( 'task2', function() {
// ...
} );

gulp.task( 'task3', function() {
// ...
} );

فرض کنید که ما باید حتماً اول task1 رو اجرا کنیم، بعد task2 و بعد task3، خب احتمالاً راه‌حل اینه:


gulp task1
gulp task2
gulp task3

اما چندان منطقی به نظر نمیاد! Gulp به ما امکان تعریف پیش‌نیاز برای اجرای Taskها رو میده، کافیه بعد از پارامتر نام Task، یک آرایه از نام Taskهای پیش‌نیاز را تعریف کنید! به همین راحتی! مثلاً در مثال زیر، برای اجرای task2 نیاز به task1 هست و اجرای task3 نیاز به task2 هست.



var gulp = require( 'gulp' );

gulp.task( 'task1', function() {
// ...
} );

gulp.task( 'task2', [ 'task1' ], function() {
// ...
} );

gulp.task( 'task3', [ 'task2' ], function() {
// ...
} );

حالا اگر تنها task3 رو اجرا کنید، می‌بینید که task1 و task2 به ترتیب اجرا خواهند شد.

در قسمت بعد، ایده‌ی خودمون رو عملی می‌کنیم ;)

----

قسمت بعدی: نوشتن یک Task کاربری

موفق باشید.

لینک به ارسال

gulp_task_2.png

ساخت یک gulpfile.js حسابی!

اینم آخرین پست آموزشی در تاپیک آموزش کاربردی Gulp! بعد از خوندن پست، شما می‌تونید یه محیط اتوماتیک حسابی با Gulp برای خودتون طراحی کنید و حالشو ببرید! بعد از این پست، شروع به مثال‌زدن می‌کنیم، مثلاً این‌که چطور پلاگین باحال browser-sync رو با گالپ هماهنگ کنیم یا تو چند دقیقه یه CSS رو راست‌چین کنیم!

خب توی پست قبل گفتم که میخوایم یه gulpfile.js بسازیم که تا بهش گفتیم فایل‌های CSS ما رو بخونه، minify کنه و در قالب یه فایل جمع کنه! همتون می‌دونید که هرچی فایل‌های CSS و JS یک فایل کم‌حجم‌تر باشن خیلی بهتره و روی سئو تأثیر داره (شخصاً به سئو هیچ اعتقادی ندارم) و چه بهتر که این فایل‌ها در قالب یک فایل واحد جمع بشن.

خب برای کم‌حجم‌کردن (که بهش میگیم Minify) و بعد هم یکی‌کردن (بهش می‌گیم concat) سایت و سرویس‌های خیلی زیادی وجود دارن که البته یه کم کار سخت میشه که مرتب بخواید روی سرویس‌ها و سایت‌ها آپلود کنید و بعد دوباره دانلود کنید، بنابراین از GulpJS کمک می‌گیریم که با اجرای یه دستور، همه‌ی این کارها رو انجام بده.

به قول یکی از دوستان بعد از مدتی متوجه میشید که گالپ تنها کاری که نمی‌تونه انجام بده، اینه که بره از سر کوچه نون بخره :D

اما این Minifyکردن و Concat رو گالپ به تنهایی نمیتونه انجام بده و باید از پلاگین‌های گالپ استفاده کنیم. پلاگین‌هایی که برای این مورد کار ما نوشته‌شده‌اند اسمشون gulp-minify-css و gulp-concat هست، بنابراین برای انجام این‌کار باید این دوتا پلاگین رو نصب کنیم.

1. نصب پلاگین‌ها

یه کم از تئوریات بیایم بیرون، اگه جایی از تئوریات رو نفهمیدید، با یه سرچ ساده می‌تونید به نتایج خوبی برسید. کارمون رو با نصب دوتا پلاگین gulp-minify-css و gulp-concat شروع می‌کنیم.

برای نصب از npm کمک می‌گیریم، توی خط‌فرمان یا ترمینالتون این دستور رو وارد کنید:


npm install -g gulp-minify-css gulp-concat

نکته: sudo فراموشتون نشه!

2. استفاده از پلاگین‌ها

گر صبر کنید، بعد از مدتی ز گالپ حلوا سازید و پلاگین‌هاتون نصب میشه. حالا برمی‌گردیم سر gulpfile.js خودمون:


var gulp = require( 'gulp' );

gulp.task( 'default', function() {

} );

باید پلاگین‌های موردنظر خودمون رو در gulpfile.js فراخوانی کنیم، مثلاً اینطوری:



var gulp = require( 'gulp' );
var minifyCss = require( 'gulp-minify-css' );
var concat = require( 'gulp-concat' );

حالا پلاگین‌های ما آماده هست!

حالا یه Task می‌سازیم که فایل‌های CSS رو minify کنه و یکی کنه و بریزه توی دایرکتوری dist.

خب من یه Task به نام build-css تعریف می‌کنم و کدهای خودم رو می‌نویسم:



gulp.task( 'build-css', function() {
return gulp.src( './css/*.css' )
.pipe( minifyCss() )
.pipe( concat( 'style.css' ) )
.pipe( gulp.dest( './dist/' ) );
} );

نترسیدید که؟! :D

کد خیلی ساده و خوانا هست!

اول که از gulp.src برای خوندن فایل‌های موردنظرمون استفاده می‌کنیم، به gulp.src می‌گیم که هر فایلی که در مسیر /css/ با پسوند css هست رو پیدا کنه، بعد minifyCss رو روش اجرا کنه و بعد concat رو اجرا کنه. به concat هم پارامتر نام فایل حاصل رو میدیم که همه رو که یکی کرد توی چه فایلی بریزه و در آخر هم با gulp.dest می‌گیم که حاصل رو کجا بریزه که ما بهش گفتیم در دایرکتوری dist بریزه!

خب حالا کافیه که دستور gulp build-css رو اجرا کنید و جادوی gulp رو ببینید! :D

راحت بود، نه؟ البته اینطوری کسی یاد نمی‌گیره :D

ان‌شاءالله پست‌های بعدی با هم مثال کار می‌کنیم. خودتون هم gulp plugins رو گوگل کنید و هر کدوم که به نظرتون جالب‌تره رو دانلود کنید و ازش استفاده کنید!

-----

منتظر گذوشتن مثال‌هاتون توی همین تاپیک هستم.

موفق باشید.

لینک به ارسال
  • Morteza unpinned this موضوع

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...