ابزار هایی برای برنامه نویسان حرفه ای و پیشرفته ی جاوا اسکریپت: Yeoman، Grunt و Bower

ابزارهای اتوماتیک سازی وب اپلیکیشن
ابزارهای اتوماتیک سازی وب اپلیکیشن
ابزارهای اتوماتیک سازی وب اپلیکیشن

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

این ابزار ها بازدهی شما را چندین برابر کرده، به شما در راه اندازی و ایجاد سریع پروتوتاپیت (نمونه های اولیه) پروژه های سمت کلاینت کمک می کند و بیشتر موارد کسل کننده در برنامه نویسی سمت کلاینت را از بین می برد.

همه چیز به نوبت، قبل از هر کاری برای داشتن Yeoman، Grunt و Bower، ابتدا به npm نیاز داریم.

npm

npm مخفف Node Package Manager می باشد و در وب سایت node.js قرار دارد بنابراین به صفحه ی دانلود آن رفته و دستورالعمل های نصب را برای سیستم عامل خود دنبال کنید. حال که npm را داریم می توانیم از آن برای نصب Yeoman استفاده کنیم.

Yeoman

با وجود ابزار های فوق العاده و فراوانی که امروزه در اختیار برنامه نویسان front end قرار دارد، گاهی به سختی می توان فهمید کدام یک از آنها با یکدگیر مطابقت و سازگاری دارند. Yeoman به حل این مساله پرداخته و به ایجاد وب اپلیکیشن های مدرن کمک می کند و در عین حال نیز بسیاری از بهترین روش هایی که در این حوزه ارتقا یافته اند را با یکدیگر ادغام می کند.

به طور خلاصه، Yeoman به شما این امکان را می دهد تا مجموعه ای از پروژه های مختلف استاندارد ایجاد کنید که دارای grunfile های خلاقانه، پشتیبانی از Bower، Sass و موارد دیگر هستند.

ابتدا باید Yeoman را نصب کنیم. بعد از نصب npm فرمان زیر را اجرا کنید:

npm install -g yo

این فرمان Yeoman را نصب خواهد کرد. اکنون حتما متوجه شده اید که با نصب Yeoman، Grunt و Bower هم برایتان نصب خواهند شد.

حالا باید یک generator نصب کنیم.

اصولا generator ابزاری است که مسئول راه اندازی یک پروژه ی استاندارد است.

generator هایی برای معماری وب اپلیکیشن ها (Sass، bootstrap، modernizer و غیره)، اپلیکیشن های AngularJS، اپلیکیشن های Ember.Js، Polymer و غیره وجود دارند.

می خواهیم webapp generator را نصب کنیم:

npm install -g generator-webapp

وقتی کار نصب webapp generator تمام شد، حال ما آماده ی ایجاد اولین پروژه ی خود هستیم.

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

حال بیایید یک پروژه ی جدید را با Yeoman ایجاد کنیم. یک پوشه ی جدید ایجاد کرده و از طریق خط فرمان به درون آن پوشه بروید و فرمان Yeoman زیر را اجرا کنید:

yo webapp

این فرمان یک پنجره ی دیالوگ واقعا زیبا در اختیار شما قرار می دهد. می توانید از کلید های جهت یاب برای بالا و پایین رفتن بین گزینه های نصب Sass، Bootstrap و modernizer استفاده کنید. کلید enter را فشار داده و منتظر دریافت تمام فایل ها شوید.

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

GruntFile.js

Gruntfile حاوی تنظیمات Grunt می باشد.

Grunt مملو از ویژگی های کاربردی و آسان در پروژه های جاوا اسکریپتی است، JS را کوچک کرده، Sass را کامپایل می کند و حتی یک سرور local نیز اجرا کرده و به دنبال فایل هایی که نیاز به تغییر دارند می گردد و آپدیتی آنی را در مرورگر به شما نشان می دهد.

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

Bower.json

بیایید نگاهی به فایل bower.json بیاندازیم:


{
 "name": "webapp",
 "private": true,
 "dependencies": {
 "bootstrap-sass-official": "~3.1.0",
 "modernizr": "~2.6.2",
 "jquery": "~1.11.0"
 },
 "devDependencies": {}
}

پکیج هایی وجود دارد که می توان آنها را نصب کرد. در اصل کاری که این فایل bower.json انجام خواهد داد نصب jQuery، نسخه ی Sass از bootstrap و modernizer است، چون ما این گزینه ها را در زمان راه اندازی پروژه ی خود با Yeoman انتخاب کرده ایم. می توانید هر پکیج یا کتابخانه ای که می خواهید را اضافه کنید. می توانید آنها را با فرمان زیر نصب کنید:

bower install

این فرمان هر پکیج جدیدی که بخواهید را برایتان نصب می کند.

/app directory

بیایید نگاهی به دایرکتوری app بیاندازیم. این دایرکتوری حاوی فایل های توسعه یا development file هستند. این فایل ها minify نشده و کامپایل نشده هستند، شما می توانید هر فایلی را در اینجا تغییر داده و تمام کد های قابل خواندن، دسترسی داشته باشید. البته Grunt می تواند فایل های کامپایل شده ی CSS را نیز در اینجا وارد کند.

/dist directory

این دایرکتوری فایل های minify شده را نگه می دارد. Grunt فایل های CSS و JavaScript زنجیره ای و کوچک شده را در اینجا قرار می دهد. از آنجاییکه فایل ها در این دایرکتوری بسیار کاهش سایز داده می شوند، در نهایت باید از محتویات این پوشه در پروژه های آنلاین خود استفاده کنید.

اجرای Grunt

حال می توانیم یکی از دو فرمان Grunt که در فایل GruntFile.js تعریف شده بود را برای راه انداری یک سرور local اجرا کنیم. هر دو فرمان به دنبال تغییر فایل (filechange) بوده و Sass های شما را کامپایل می کنند.

اگر می خواهید پوشه ی app را با فایل های توسعه (development file) درون آن، راه اندازی کنید، این فرمان را اجرا کنید:

grunt serve:app

اگر می خواهید نسخه ی توزیعی را اجرا کنید از فرمان زیر استفاده کنید:

grunt serve:dist

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

این مقاله تا حدود زیادی ویژگی های اصلی این ابزار ها را پوشش می دهد. امیدوارم با این ابزار ها بتوانید کارهای جالبی انجام دهید و کلا کار برنامه نویسی front end به نوعی سرگرمی تبدیل شود.

اگر در مورد این مطلب نظری دارید خوشحال می شویم که در قسمت کامنت ها بنویسید تا هم ما و کاربران دیگر با تجربیات شما آشنا شوند.

Author: Summit

پژوهشگر, نویسنده و علاقه مند به تکنولوژی های مختلف وب هستم, ایده های زیادی در ذهن دارم که امیدوارم بتوانم به نوبت آنها را عملی کنم

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *