راه اندازی Grunt برای پروژه بعدی شما

راه اندازی Grunt برای پروژه بعدی شما

در اولین پست از این مجموعه آموزش، من مقدمه ی کوتاهی از Grunt را معرفی کردم و در این پست می خواهم درباره گام های لازم در Grunt که می تواند به شما در دانش توسعه وردپرس کمک کند بحث کنم.

به طور خاص، درباره فایل های ضروری مثل package.json و Gruntfile.js بیشتر آشنا می شویم، اما در حال حاضر ما تعدادی فایل نمونه را ایجاد می کنیم که می توانید گرانت را با قالب وردپرس یا پلاگین پروژه اجرا کنید.

 

ایجاد فایل های پروژه

قبل از اینکه شروع کنیم، ممکن است بهتر باشد برای درک بهتر قسمت اول از این سری از آموزش را مشاهده کنید

اگر مشکلی در راه اندازی دارید، به پست قبلی مراجعه کنید تا با ایجاد فایل های پروژه کار را شروع کنید. این کار باعث می شود مرور کلی از پیکربندی گرانت در پروژه داشته باشیم.

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

 

۱. ساخت یک فایل package.json

اولین کاری که می خواهیم انجام دهیم ایجاد یک فایل package.json در داخل ریشه پروژه است. در داخل این فایل جدید، کد زیر را وارد کنید:

نیازی نیست که شی devDependencies را اضافه کنیم، همانطور که می دانید هنگام نصب وظایف Grunt، از طریق خط فرمان اضافه می شود.

 

 ۲. نصب وظایف یا Tasks

برای نصب وظایف Grunt، شما نیاز دارید که که خط فرمان (command line) خود را انتخاب کنید. اگر شما از Mac استفاده می کنید iTerm می تواند مفید باشد. یا اگر از Windows استفاده می کنید، پیشنهاد می کنم از Git یا CMD استفاده کنید.

ابتدا به ریشه ی پروژه (root folder) خود رفته (cd development-folder/project-folder). حال باید فایل های LESS را کامپایل کنیم. حال می خواهیم وظیفه grunt-contrib-less را نصب کنیم، بنابراین دستور زیر وارد کنید:

حال شما یک دسته از خطوط را مشاهده می کنید که به عنوان وظایف (tasks) در خروجی چاپ شده اند و تمام وابستگی ها (dependencies) از npm دانلود و نصب می شوند. وقتی کار با موفقیت تمام شد، باید خروجی تقریبا شبیه به زیر باشد:

getting-grunt-setup-less

حال به فایل package.json رفته و خواهید دید که grunt-contrib-less در شی devDependencies اضافه شده است. همچنین می توانید شماره نسخه را بعد از نام اضافه کنید. درباره نسخه برنامه در پست های بعدی خواهیم دید.

در این مرحله شما باید فایل خود را به صورت زیر مشاهده کنید:

در مرحله ی بعد اجازه دهید وظیفه ای (task) را اضافه کنیم تا هنگام تغییرات در فایل های less. از تغییرات در فایل آگاه شود. ما از grunt-contrib-watch استفاده می کنیم. به خط فرمان خود برگردید و دستور زیر را وارد و کلید Enter را بفشارید:

getting-grunt-setup-watch

دوباره، باید خروجی شما شبیه به خروجی عکس بالا باشد، این کار باعث می شود که در فایل package.json اضافه شود. که به صورت زیر خواهد بود:

امیدوارم، همین روند را ادامه داده باشید و به این مرحله رسیده باشید، فقط بخاطر داشته باشید که  save-dev-- را اضافه کنید.

 

Gruntfile.js

حالا که یک جفت از وظایف Grunt را نصب کردیم، حال اجازه دهید از آنها استفاه کنیم. اولین چیزی که برای این کار نیاز داریم، ایجاد فایل Gruntfile.js در ریشه پروژه خود است. این جایی است که وظایف و پیکربندی های خود را مشخص می کنیم.

برای این کار، دستور زیر را در این فایل وارد کنید:

 

 

Tasks

اولین چیزی که نیاز داریم این است که وطایف یا Tasks را بارگزاری کنیم تا بتوانیم آنها را اجرا کنیم. شما می توانید برای هر وظیفه از تابع loadNpmTasks استفاده کنید. لطفا موارد زیر را بین یک جفت آکولاد قرار دهید:

کار بعدی که نیاز به انجام آن داریم این است که وظایف نصب شده ی Grunt را پیکر بندی کنیم. پس احتیاج داریم که تابع initConfig را شبیه به زیر وارد کنیم:

حال بعد از کاما , ما تنظیمات خود برای تک تک وظایفی که نصب کرده ایم اضافه می کنیم. شما معمولا می توانید مثال های بیشتر را که چگونه برای هر یک از وظایف پیکر بندی کنیم را در فایل README.md را پروژه قرار داده شد در Github مشاهد کنید. هر وظیفه یا task دارای تنظیمات و گزینه های متفاوتی است، پس مطمئن شوید که ابتدا مستندات آن وظیفه را بررسی کرده اید.

 

۱. LESS Task

اولین کاری که می خواهیم پیکر بندی کنیم grunt-contrib-less است. این وظیفه یا task باعث می شود فایل های less. ما در فایل های css. کامپایل کند. شما نیاز دارید که یک پوشه جدید برای فایل های less. ایجاد کنید. من معمولا یک پوشه ی css/less ایجاد می کنم و تمام فایل های less. را در آن قرار می دهم.

در مرحله بعد یک فایل جدید با نام style.less را اضافه کنید و کد زیر را در آن قرار دهید:

حال به فایل Gruntfile.js خود برگردید و دستورات زیر را اضافه کنید:

هنگامی که این فایل را ذخیره کردید، حال این توانایی را دارید که در خط فرمان خود grunt less را وارد کرده و کلید Enter را بفشارید. این کار باعث می شود وظایف Grunt اجرا شود و فایل های less. را کامپایل کند و به ما یک فایل جدید با نام style.css در ریشه پروژه بدهد.

 

۲. Watch Task

حالا که توانستیم فایل های less. خود را کامپایل کنیم، اجازه دهید که وظیفه کشیک یا همان watch task را اضافه کنیم. چه کسی دلش می خواهد به خط فرمان مراجعه کند و دستور grunt less را هر بار بعد از تغییرات در فایل اجرا کند!!!

بعد از تنظیمات قبلی ما، یک کاما اضافه کنید و در ادامه خط های زیر را اضافه کنید:

 

وقتی این فایل را ذخیره کردید، به خط فرمان خود برگردید و دستور grunt watch را وارد کنید، که باید به صورت زیر باشد:

getting-grunt-setup-watching

به این معنی است که Grunt watch منتظر می شود که تغییراتی در فایل های ما رخ دهد و آنگاه اجرا شود. به فایل style.less رفته و کد قبلی را با کد زیر جایگزین کنید:

هنگامی که فایل را ذخیره کنید watch task به صورت خودکار فایل های less. را در فایل style.css کامپایل می کند. وقتی هم که با موفقیت کامپایل شد، منتظر تغییرات بعدی می شود.

getting-grunt-setup-compiled

از آنجایی که در حال اجرا است، تنها کاری که لازم است شما انجام دهید تغییرات در فایل، ذخیره آن، و مشاهده ی خروجی در مرورگر خود است.

 

خلاصه

ما حالا همه ی چیزی گرانت را می دانیم و می توانیم در پروژه بعدی خود استفاده کنیم. این کاملا یک راه اندازی سایده بوده است و من مطمئن هستم که شما تمام وظایف (tasks) ممکن را می توانید در پروژه خود اضافه کنید. در قسمت بعدی، ویژگی های پیشرفته تر Grunt همراه با وظایف سفارشی را خواهیم دید و همچنین تنظیمات تو در تو و دیگر موضوعات.

 

منابع