• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

آموزش استفاده از Grunt برای مدیریت وظایف تکراری - Grunt (جلسه 3) - نصب Grunt - قسمت 1

2 654 ۳۱ تیر ۹۵

در این مطلب با ادامه آموزش Grunt در خدمتتون هستیم.

grund

دیدید که در جلسه قبل محیط رو برای نصب Grunt آماده کردیم و از صحت نصب Node و npm مطمئن شدیم. در این جلسه قصد داریم Grunt رو بر روی سیستم خودمون نصب کنیم. اول از همه ما یک پروژه رو برای خودمون تعریف میکنیم و تعدادی فایل مختلف css و js و less و sass و تصویر و ... رو قرار میدیم. برای اینکار در Desktop یک پوشه میسازیم و اسم اون رو برابر با grunt قرار میدیم. بعد از اون پوشه های زیر رو در اون میسازیم:grunt folder create1

میبینید که در این پوشه، دو پوشه بنام های development و final ساختیم. پوشه development همون فایلهای اولیه ما هستند که توی اونا کدهای خودمون رو مینویسیم و مدام اونا رو تغییر میدیم. ساختار پوشه های درون development بصورت زیر هست:grunt folder create2

میبینید که برای شروع 5 تا پوشه قرار دادیم که فایلهای مختلف رو در اونا قرار میدیم. در ادامه اگر پوشه ای دیگه نیاز شد به اینجا اضافه میکنیم.

پوشه final همون پوشه ای هست که فایلهای نهایی و مدیریت شده ما در اونا ساخته میشه و ما میتونیم اونا رو آپلود کنیم و در سایتمون ازشون استفاده کنیم. یعنی چیزایی که در پوشه final قرار میگیره، فایلهایی هستند که Grunt اونا رو برای ما آماده سازی و بهینه کرده است. ساختار درونی final بصورت زیر است:grunt folder create3

هدف ما اینه که فایلهای css رو فشرده سازی کنیم و فایلهای less و sass رو کامپایل کنیم و اونا رو پوشه css واقع در پوشه final قرار بدیم. همچنین تصاویر موجود در development فشرده سازی میشن و در final قرار میگیرن. فایلهای javascript هم به هم متصل شده و فشرده سازی میشن.

برای نصب و استفاده از Grunt شما در ابتدا باید Grunt-cli رو بر روی سیستم خودتون نصب کنید. cli مخفف command line interface هست و به شما قابلیت میده که grunt رو از طریق cmd مدیریت کنید. برای نصب grunt-cli بر روی سیستم، cmd رو باز کرده و بصورت زیر عمل میکنیم:install grunt-cli

همونطور که میبینید میخایم با استفاده از npm این ابزار رو نصب کنیم. حتما -g رو قرار بدین تا این ابزار بصورت عمومی یا global بر روی سیستم شما نصب بشه و تا در همه جا بشه از اون استفاده کرد. بعد از اینکه متن بالا رو در Cmd نوشتید، اینتر بزنید تا اجرا بشه و بسته مورد نظر نصب بشه. بعد از اینکار اگه اروری نباشه، با چیزی شبیه به زیر روبرو میشید:install grunt-cli 2

بعد از اون باید cmd رو با استفاده از دستور cd یا  change directory به مسیر پوشه grunt در desktop ببریم. برای اینکار بصورت زیر عمل میکنیم:install grunt1

بعد از زدن این دستور، اینتر رو فشار بدید:install grunt2

میبینید که cmd به محل مورد نظر انتقال پیدا کرد. حالا باید با استفاده از دستور npm، فایل package.json رو برای پروژه خودمون بسازیم. برای اینکار باید از دستور npm init استفاده کنید. بصورت زیر:npm init 1

همونطور که دیدید با زدن اینتر، یک سری متن نوشته شد و بعد از اون در خط آخر name یا نام پروژه از ما خواسته میشه. درون پرانتز مقدار پیش فرض که همون اسم پوشه هست قرار گرفته که شما میتونین اون رو تغییر بدین. من برای این قسمت grunt-project رو قرار میدم و اینتر میزنم:npm init 2

بعد از اینکار description یا توضیحاتی رو برای پروژه خودتون قرار بدین. میتونین این قسمت رو خالی بزارید و به مرحله بعدی برید. من متنی رو برای مثال میزارم و اینتر میزنم:npm init 3

در اینجا نمیخاد چیزی رو وارد کنید و اینتر بزنید. در مراحل بعدی نیز test command و git repository و keyword از شما خواسته میشه. لازم نیست که چیزی در مقابل این موارد قرار بدین و اینتر بزنید تا به مورد Author یا نویسنده یا سازنده برسید:npm init 4

میبینید که اسمم رو وارد کردم و اینتر میزنم. بعد از اون license میاد و بزارید همون مقدار پیش فرض بمونه و اینتر بزنید. بعد از اینکه اینتر زدید یک پیش نمایش کلی از فایل نهایی در اختیارتون قرار میگیره و ازتون میپرسه که درست هست یا خیر:npm init 5

میبینید که دور کدهای نهایی خط کشیدم. اگه دیدید که اطلاعات صحیح وارد شده، در مقابل Is this ok، عبارت yes و در غیر اینصورت عبارت no را وارد کنید. من yes رو وارد میکنم. بعد از اینتر زدن کار ما تموم میشه و یک فایل بنام package.json در پوشه grunt پروژه ما ساخته میشه. بصورت زیر:npm init 6

بعد از اون اگر این فایل رو در یک ویرایشگر مثل Sublime Text وارد کنید، بصورت زیر خواهد بود:npm init 7

تا اینجای کار خیلی از کارارو انجام دادیم و در جلسات بعدی اون رو ادامه میدیم. پس با ما همراه باشید.

در جلسات بعدی بیشتر در مورد Grunt صحبت میکنیم.

امیدوارم از این جلسه خوشتون اومده باشه.

موفق باشید

یا علی

Source

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

دیدگاه ها 2 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏

    این جلسه عالی بود مث همیشه فقط یه سوال :) این تم سابلیم شما اسمش چیه؟ خیلی قشنگه

    • ‏‏
      محمد اسفندیاری(۱ مرداد ۱۳۹۵)

      سلام
      خوشحالم که بدردتون خورده
      این تم Material هست
      https://github.com/equinusocio/material-theme
      بصورت کامل توضیح داده شده که چطور اونو نصب و فعال کنید
      موفق باشید

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram