در این مطلب با ادامه آموزش Grunt در خدمتتون هستیم.
در این جلسه قصد داریم در مورد پلاگین grunt-contrib-watch صحبت کنیم. اگر در جلسات قبل با ما همراه بوده باشید متوجه شدید که هر بار که تغییری در کدهامون به وجود میاوردیم، باید مجددا CMD رو باز میکردیم و دستور grunt رو اجرا میکردیم تا وظایف مورد نظر اجرا بشن. این کار خیلی دردسر داره و آدم رو واقعا اذیت میکنه. اینجا هست که این پلاگین بدرد میخوره و کارتون رو راه میندازه. کاری که این پلاگین میکنه، همونطور که از اسمش پیداس، فایلهای مورد نظر رو زیر نظر میگیره و اگر فایلی اضافه شد، یا ویرایش شد و یا حذف شد، وظایف رو اتوماتیک اجرا میکنه و دیگه لازم نیس ما وظایف رو دستی اجرا کنیم. در ابتدا باید این پلاگین رو در پروژه خودمون نصب کنیم. برای اینکار عبارت زیر رو در cmd قرار میدیم:
npm install grunt-contrib-watch --save-dev
بعد از اینکار اینتر میزنیم:
میبینید که این پلاگین بدون ارور درون پروژه ما نصب شده و حالا اگر package.json رو ببینید، بصورت زیر بروز رسانی شده:
حالا باید این بسته رو درون gruntfile.js لود کنیم:
در اینجا میخایم وظایف uglify و coffee رو بصورت اتوماتیک تنظیم کنیم. برای اینکار در ابتدا یک وظیفه بنام watch میسازیم:
بعد از اون دو sub task با نامهای scripts و coffeescript درون اون قرار میدیم.
حالا باید تنظیمات مورد نظرمون رو درون اون قرار بدیم:
همونطور که میبینید درون وظیفه Scripts دو ویژگی قرار دادیم. با استفاده از ویژگی files فایلهایی که باید زیر نظر گرفته بشن رو مشخص میکنیم. برای این ویژگی همه فایلهای js که درون پوشه js هستن رو قرار دادیم. درون ویژگی tasks هم وظیفه ای که قصد داریم زمانی که این فایلها ویرایش یا ... شدن، بصورت اتوماتیک انجام بشه رو قرار میدیم. از این به بعد هر زمان که فایلهای js مورد نظر تغییر کنن و شما Save کنید تغییراتو، این وظیفه بصورت اتوماتیک صدا زده میشه و خروجی بوجود میاد.
درون ویژگی coffeescript هم اینکارارو انجام دادیم و فایلهای coffee و وظیفه متناظرشو مشخص کردیم. منتهی برای این وظیفه یک ویژگی بنام spawn قرار دادیم و اون رو برابر با false قرار دادیم. این کار باعث میشه که سرعت اجرا بیشتر بشه ولی سعی کنید تا حد ممکن از اون استفاده نکنید.
حالا تنها کاری که باید بکنیم، اینه که وظیفه watch رو به انتهای وظایف قبلی اضافه کنیم تا با زدن دستور grunt اجرا بشه:
حالا اگر دستور grunt رو در cmd اجرا کنیم، در ابتدا همه وظایف پیش فرض اجرا میشن، منتهی این بار به پایان نمیرسه و منتظر میمونه:
میبینید که waiting نوشته شده و منتظر تغییرات هست. حالا مثلا اگر فایل coffee.coffee رو باز کرده و تغییری در اون بوجود بیاریم، بصورت زیر میشه:
همونطور که دیدید تغییر مورد نظر Detect یا تشخیص داده شد و وظیفه مورد نظر اون اجرا شد و خروجی تغییر پیدا کرد. بعد از اون مجددا حالت waiting فعال شد و منتظر تغییرات بعدی میمونه. اگر خواستید حالت انتظار رو به پایان برسونید، درون cmd کلیدهای ترکیبی ctrl+c رو بزنید و در جواب سوال y به معنای yes رو وارد کنید، تا دستور مورد نظر به پایان برسه.
برای مطالعه بیشتر در مورد این پلاگین به این لینک مراجعه کنید.
در جلسات بعدی بیشتر در مورد Grunt صحبت میکنیم.
امیدوارم از این جلسه خوشتون اومده باشه.
موفق باشید
یا علی
اولین دیدگاه این پست رو تو بنویس !