Kaptain Kitty
انتشار :۲۲ فروردین ۱۳۹۵
بازدید :459 بار

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

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

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

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

همه چیز به نوبت، قبل از هر کاری برای داشتن 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 به نوعی سرگرمی تبدیل شود.

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

ابزارهای automation سازی در وب اپلیکیشن ابزارهای پیشرفته ی جاوا اسکریپت از Yeoman و grunt و bower چه می دانیم فریم ورک bower چیست فریم ورک Grunt چیست فریم ورک Yeoman چیست وب اپلیکیشن ساختن با yeoman و grunt و bower
مطالب مرتبط

ایجاد و حفظ ارتباط همیشه یکی از دغدغه‌های بشر بوده است. امروزه دنیا به گونه‌ای شده است که وقتی شما در محل کارتان حاضرید، عده‌ی دیگری از همکارانتان در منزل مشغول کار هستند. ما ابزار‌های مختلفی را برای حفظ ارتباط میان اعضای تیم امتحان کردیم که اولین ابزار AOL Instant Messenger بود. بعد از آن […]

در سپتامبر سال گذشته، فریم ورک محبوب جاوا اسکریپت Vue.js نسخه ی v2 خود را منتشر کرد و از آن وقت تا کنون من واقعا مشتاق بودم آن را امتحان کنم تا ببینم کار کردن با آن چطور است. به عنوان کسی که با فریم ورک Angular و فریم ورک React هم آشنایی کامل دارد، […]

یکی از معضلات برنامه نویسی وب برای موبایل این است که سرعت اجرای وب اپلیکیشن ها روی مرورگر ها کم و نسبتا آزاردهنده است. البته راه های زیادی برای حل این مشکل وجود دارد. یکی از این راه ها استفاده از ابزار Google AMP می باشد. این پروژه به طور رسمی در ۷ اکتبر سال […]

هوآوی در بیستم می ۲۰۱۵، راه اندازی معماری شبکه چابک ۳٫۰ خود را در کنگره هوآوی نتورک با عنوان “از چابکی تا تخیل” که در پکن برگزار شده بود، اعلام کرد. به عنوان یکی از نکات برجسته آخرین معماری شبکه چابک، هوآوی به معرفی روش IoT چابک خود نیز پرداخت. این روش موسسات بازرگانی را […]

نظراتتان را برایمان بنویسید

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

مطالب ما تو این شبکه های اجتماعی هم پخش میشه