مشکل !

کارکردن روی چندین پروژه و محصول مرتبط با رابط کاربری و ظاهر وب سایت در چندین ماه گذشته، باعث شد که تصمیم بگیرم فرآیند توسعه front-end را در این پروژه ها بهینه کنم. قبلا در مورد فریمورکهایی مانند Bootstrap و پیش پردازشگرهای CSS مثل SASS و اینکه چگونه میتوانند سرعت ایجاد سایتهای زیبا و responsive را به نسبت روشهای سنتی انجام این کارها افزایش دهند، صحبت کرده بودم.

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

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

راه حل

Grunt.js وارد می شود! اخیرا یک اسکرین کست در مورد نکات CSS از Chris Coyier تماشا میکردم که در آن از فرآیند توسعه خود برپایه Jekyll, Grunt, SASS و SVG صحبت میکرد. ناگهان فهمیدم که Grunt پاسخ مشکل من است. 

Grunt چیست؟

Grunt یک اجرا کننده وظیفه جاوااسکریپت است که بسیاری از کارهای مرتبط با طراحی وب را خودکار میکند. به خصوص در مورد طراحی ظاهر وب سایت می تواند فشرده سازی تصاویر، کامپایل کردن SASS، کمینه کردن کد، تولید فایلهای SVG، مدیریت سرور local و خیلی دیگر از کارها را بعهده بگیرد. در حال حاضر Grunt با بسیاری از نرم افزارها مانند SASS, LESS, Coffeescript, jade, require.js و بسیاری دیگر سازگار می باشد.

نصب

نصب Grunt زمان خیلی کمی میخواهد و فهم آن مشکل نیست.

اولین پیش نیاز این است که Node.js روی سیستم شما نصب شده باشد. بعد از نصب نود جی اس به سراغ خط فرمان می رویم. ابتدا مطمئن شوید که nmp ( مدیریت ماژولهای نود) بروز است:

npm update --g npm

سپس Grunt را با دستور زیر نصب می کنیم:

npm install –g grunt-cli

Grunt بصورت عمومی روی سیستم شما نصب می شود و می توانید از هر پوشه ای آن را اجرا کنید. جالب است بدانید که grunt-cli یک نصب واقعی از گرانت نیست. در واقع ابزاری است که اجازه می دهد تا چندین نسخه و نمونه از grunt را اجرا نماییم. در عمل این به این معناست که شما Grunt را بصورت local در ریشه یک پروژه نصب میکنید و grunt-cli کمک میکند که یک نمونه از Grunt را در هر پروژه اجرا کنید.

یک پروژه جدید Grunt

یک تنظیم معمول Grunt شامل دو فایل مهم می باشد که باید در پوشه ریشه پروژه ساخته شوند.

package.json : این فایل به وسیله nmp استفاده می شود تا متادیتای مربوط به وابستگی های پروژه را ذخیره کند. این همان چیزی است که از کار تیمی گره گشایی میکند. مثلا من می توانم پروژه ای را تنظیم کنم که به Grunt, Sass و Ruby نیاز دارد. با یک دستور تکی، npm می تواند بصورت اتوماتیک با توجه به فایل کانفیگ همه چیز را دانلود و نصب کند. دیگر نیازی به توضیح وابستگی ها به اعضای تیم نیست. همه اعضا هرآنچه که برای اجرای پروژه مورد نیاز است را دارند.

Gruntfile.js :‌ ستون فقرات Grunt است و پلاگین های Grunt را لود و تنظیم میکند. این فایل تمام کارهایی را که دوست دارید خودکار شوند با استفاده از پلاگین های Grunt انجام می دهد. مثل خواندن یک فایل .scss از یک پوشه، کامپایل کردن آن به یک فایل .css و قرار دادن آن در یک پوشه دیگر.

برای اینکه Grunt بدرستی کارکند، معمول است که این دو فایل خالی را ایجاد کنید و در پوشه ریشه پروژه خود قرار دهید : Gruntfile.js ( بله حرف G با حروف بزرگ است) و package.json.

نصب Grunt و gruntplugins

هنگامی که دوفایل بالا در جای خود قرار دادید با استفاده از خط فرمان وارد دایرکتوری ریشه پروژه خود شوید و عبارت زیر را وارد کنید :

npm install grunt --save-dev

این دستور یک نمونه از آخرین ورژن Grunt روی پروژه شما نصب می کند. بعد از انجام این کار متوجه خواهید شد که دو فایل Gruntfile و package.json شما با مقادیری پیش فرض بروزرسانی شده اند و پوشه 'node_modules' به پروژه شما اضافه شده است.

دستور مشابه دیگری نیز gruntplugins را نصب میکند

npm install --save-dev

اگاه باشید که برخی از پلاگین ها وابستگی های خاص خود را دارند. مثلا SASS به Ruby نیاز دارد تا کار کند. اگر Grunt کار می کند اما یک پلاگین خاص نصب نمی شود، مطمئن شوید که تمام پیش نیازهای آن پلاگین مرتفع شده اند. یک تنظیم درست باید شامل همه پیش نیازها باشد، اما من خودم چندین بار در این مورد گیر کرده ام.

فایل package.json نمونه

فایل package.json نیازمندیهای بیلد کردن یک پروژه خاص را لیست میکند. همه آنها از فرمت یکسانی پیروی می کنند و این اطمینان را میدهند که هر ماشینی روی پروژه کار میکند نسخه درست پیش نیازها را دارد و یا بدست خواهد آورد. در زیر مثالی ساده از این را مشاده میکنید که بصورت اتوماتیک در هنگام نصب پلاگین ایجاد شده و نیازمند کمترین نگهداری است.

{   "name": "project-name",
    "version": "0.1.0",
    "devDependencies": {
                    "grunt": "~0.4.5",
                    "grunt-contrib-jshint": "~0.10.0",
                    "grunt-contrib-nodeunit": "~0.4.1",
                    "grunt-contrib-sass": "^0.8.1",
                    "grunt-contrib-uglify": "~0.5.0",
                    "grunt-contrib-watch": "^0.6.1"
    }
}

فرمت نامگذاری استاندارد برای یک پلاگین گرانت grunt-contrib-plugin می باشد.

مثال از Gruntfile

در قدم بعدی نگاهی به یک Gruntfile می اندازیم تا یک تنظیم مثال را نشان دهیم. در این مثال از پلاگین پیشفرض Uglify برای جمع کردن چندین فایل JS و فشرده کردن آنها در یک فایل استفاده خواهیم کرد. برای بهتر درک کردن مثل به کامنتها دقت کنید.

// Gruntfile wrappermodule.exports = function(grunt) {// Project configurationgrunt.initConfig({   // Read dependancies from package.json   pkg: grunt.file.readJSON('package.json'),    // Initialize uglify plugin    uglify: {     // Files to source in uglify action     src: ['js/libs/jquery-1.1.1.js', 'js/libs/*.js'],     // Destination to output uglify actioned files     dest: 'js/build/global.min.js'     }    }   });   // Load the plugin that provides the 'uglify' task   grunt.loadNpmTasks('grunt-contrib-uglify');   // Default tasks to run with 'grunt' command   grunt.registerTask('default', ['uglify']);};

بخاطر داشته باشید که نحوه JS در هنگام تنظیم این فایل قابل استفاده است. در مثال بالا در جایی که سورس فایلها مشخص شده است از آرایه استفاده گردیده. مطمئن شوید که کتابخانه های اصلی مانند jQuery پیش از پلاگین هایی که به آنها نیاز دارند لیست شوند. در هنگام کامپایل کردن Grunt به این ترتیب توجه میکند. همچنین بخاطر داشته باشید که از عملگر ویلکارد ستاره (*) می توانید برای هدف قرار دادن تمام فایل های .js دیگر بعد از کامپایل شدن jQuery استفاده کنید. این کار میتواند در ضمن اینکه کد شما را ماژولار نگه میدارد زمان زیادی را نیز صرفه جویی نماید.

پیکربندی هوشمندانه پوشه ها و فایلها باعث منظم شدن فایلها میگردد. من از پشه libs برای فایلهای اصلی و از پوشه build برای Grunt استفاده میکنم تا تمام خروجی های کامپایل شده را در آن قرار دهد. این پوشه build است که در فایلهای CSS و HTML به آنها ارجاع  میکنیم.

تمرین عملی

حال که تنظیمات انجام شد وقت آن است که ‌‌Grunt خود را تست کنید. این کار از آن چیزی که فکر میکنید خیلی ساده تر است.

در دایرکتوری ریشه خود، دستور زیر را در خط فرمان اجرا کنید:

grunt

این دستور تمام کارهایی که را در خط آخر فایل Gruntfile نوشته ایم اجرا میکند. با تنظیمات فعلی فقط از uglify استفاده میکند تا تمام فایلهای جاوااسکریپت ذکر شده در وظیفه uglify را فشرده کند. اگر میخواستیم بصورت منفرد وظیفه uglify را اجرا کنیم می توانستیم بنویسیم :

grunt uglify

گرانت uglify را با پارامترهایی که در Gruntfile مشخص شده است اجرا میکند. در صورتی که پیام 'Done without errors' را دریافت کنید موفق شده اید. حال میتوانید پوشه js/build را چک کنید که در آن باید یک فایل با نام global.min.js باشد. با مشاهده این فایل خواهید دید که uglify تمام فایل های JS را ( بر اساس ترتیب مشخص شده در آرایه ) در یک فایل فشرده کرده است. بعلاوه تمام نام متغیرها و عبارتها را خلاصه کرده و تمام کامنتها و فضاهای خالی را حذف نموده است.

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

توالی وظایف چندگانه

حال که با موفقیت Grunt را برای خودکار کردن یک وظیفه به کار بردیم، دیگر چکارهایی میتوانیم با آن بکنیم؟ خودکار کردن کامپایل SASS ایده خوبی برای سرعت بخشیدن به فرآیند توسعه و شکار باگ ما می باشد. اگر CSS/SASS چیزی نیست که شما از آن استفاده میکنید، میتوانید از این مرحله پرش کنید، اما بخاطر داشته باشید که این الگو برای هر نصب پلاگین گرانت استاندارد شده است.

خوب اجازه دهید نصب پلاگین خود را شروع کنیم:

SASS را نصب کنید. توجه کنید که SASS نیازمندیهای خاص خودش را دارد و به پلتفرم Ruby نیاز دارد و باید از طریق دستور gem نصب شوند. میتوانید برای اطمینان از نصب موفقیت آمیز دستور زیر را اجرا کنید:

sass -v

این دستور باید شماره  ورژن SASS را برگرداند.

دستور زیر را در ریشه پروژه خود اجرا کنید:

npm install grunt-contrib-sass --save-dev

حال SASS را به پشته وظایف Gruntfile خود اضافه کنید:

grunt.loadNpmTasks('grunt-contrib-sass');

وظیفه را با دستور زیر اجرا کنید:

grunt sass

در این نقطه، احتمالا برخی خطاهای مرتبط با SASS را دریافت کنید، بنابراین ما باید رفتارهایی را برای پلاگین مشخص کنیم. اگر یک خطای کلی از Grunt دریافت میکنید که SASS شناخته نمی شود باید دوباره فرآیند نصب SASS را چک کنید.

حال بیایید کمی فایل Gruntfile خود را تغییر دهیم.

module.exports = function(grunt) {    grunt.initConfig({     pkg: grunt.file.readJSON('package.json'),     uglify: {      build: {       src: ['js/libs/jquery-1.1.1.js', 'js/global.js'],       dest: 'js/build/global.min.js'      }     },     sass: {      dist: {       options: {        style: 'compressed'       },       files: {        'css/build/global.css': 'css/libs/global.scss'       }      }     }    });    // Load plugins    grunt.loadNpmTasks('grunt-contrib-uglify');    grunt.loadNpmTasks('grunt-contrib-sass');    // Default tasks    grunt.registerTask('default', ['uglify', 'sass']);   };

همانطور که می بینید فرمت پلاگین شبیه الگویی است که در ‌uglify بکاربردیم منتها با کمی تغییرات.

'options' نوع خروجی را مشخص میکند. در اینجا 'compressed' یک تنظیم است که فشرده سازی خروجی CSS را مشخص میکند. این تنظیم بیشتر برای پیاده سازی نهایی بکار می رود در حالی تنظیم 'expanded' برای اشکالزدایی در هنگام یک بیلد مناسب است. تغییر پارامترهای این Gruntfile بسیار ساده است.

'files' مشخص میکند که کدام فایلهای CSS باید در فرآیند کامپایل دخیل باشند. این تنظیم نیز شبیه uglify است اما از یک نحو مرتبط با پلاگین استفاده میکند. در اینجا نیز ما از دو پشه 'css/libs' و 'css/build' برای سازماندهی فایل ها استفاده میکنیم.

 اضافه کردن 'sass' به آخر آرایه رجیستر وظایف به این معناست که ابتدا دستور uglify و بعد از آن sass با دستور پیشفرض gurnt در CLI اجرا می شوند. اگر فقط بخواهید sass اجرا شود از دستور 'grunt sass' استفاده کنید.

گامهای بعدی

امیداورم این آموزش مقدمه ای باشد که شما را برای استفاده از grunt در پروژه های خود یاری دهد.

البته پلاگینها و تنظیمهای زیاد دیگری که ارزش یادگرفتن داشته باشند وجود دارند. من استفاده خیلی موفقی از پلاگین grunt-config-watch که فایل ها و پوشه ها برای تغییرات ایجاد شده در آنها مانیتور میکند و براساس آن بصورت خودکار وظایف مختلفی در gurnt را اجرا میکند، داشته ام. از مستندات رسمی گرانت استفاده کنید و امکانات دیگری که در اختیار شما قرار میگیرد را مرور کنید.

پلاگین های دیگری که که ممکن است برای شما جالب باشند:

grunt-config-connect : یک سرور استاتیک را راه اندازی میکند‌ ( مناسب برای CMS هایی مانند WordPress )

grunt-config-jshint : فایلها را با استفاده از JSHint اعتبارسنجی میکند (استفاده نا مناسب از جاوا اسکریپت را اخطار میدهد.)

grunt-config-clean : فایل ها و پوشه ها را پاک میکند.

در پایان

وقت گذاشتن و یادگرفتن Grunt.js یک تجربه اثبات شده برای من می باشد. در حالیکه نیاز کمی به استفاده از خط فرمان دارید، هر چالشی را میتوانید با کمی جستجو در اینترنت حل نمایید. وقتی که شما grunt خود را راه انداختید، تنظیماتتان برای بسیاری پروژه های دیگر با کمی تغییرات جزیی قابل استفاده می باشد.

امیدوارم گه grunt بتواند به شما نیز در پروژه های تیمی و انفرادیتان کمک کند.

منبع : automating front-end development with grunt.js