خودکارسازی جریان کاری یعنی چی!؟ :|
به احتمال خیلی زیاد تا الان با صحنه هایی مشابه به تصویر زیر مواجه شده اید:
در اینجا چندین روش برای استفاده از فریمورک بوتسترپ پیشنهاد شده است که یکی از آنها از طریق فرمان زیر می باشد:
npm install bootstrap
یا شاید تا الان از این که بعد از نوشتن هر تکه کد مجبور به ریلود کردن صفحه مرورگر خود هستید خسته شده باشید. (فکرشو بکن، تا کد رو ذخیره کنی مرورگر بصورت خودکار این کار رو انجام بده)
و یا اینکه بتوانید بهینه سازی و فشرده سازی فایل های سی اس اس، جاوااسکریپت و حتی تصاویر را به عهده ابزاری بگذارید تا بصورت خودکار آن کار را انجام دهد.
در کل به اموری مشابه به وظایف بالا که در کنار هم قرار میگیرند تا شما یک سایت یا اپلیکیشن را توسعه بدهید، جریان کاری یا همان workflow گفته می شود، حال هرچه این وظایف را به عهده ابزارها بگذاریم مرحله توسعه و تولید سریعتر انجام خواهد شد.
هدف دوره
در این دوره قصد داریم:
- شما را با بهترین ابزارهایی که باید در توسعه و نگهداری پروژه از آنها استفاده کنید آشنا کنیم.
- به شما نحوه خودکارسازی وظایف مورد نظر را از طریق اسکریپت نویسی npm آموزش دهیم.
- معرفی یک ساختار اولیه بهینه (Boilerplate) برای توسعه یک پروژه را نیز خواهیم داشت.
Gulp، Grunt و یا Webpack چی پس؟
نکته مهمی که باید در نظر داشته باشید این هستش که یادگیری npm مقدمه ای هست برای موارد بالا، در این دوره ما نه تنها شما را با مفهموم npm آشنا میکنیم بلکه با استفاده از npm-scriptها ثابت میکنیم که برای خیلی از پروژه ها نیازی به gulp و یا ابزارهای مشابه ندارید. البته توصیه بنده این هستش که هر زمان کار با فریمورک های جاوااسکریپت را فرا گرفتید باید Webpack یا ابزاری مشابه به آن را در کنار npm داشته باشید.
با چه ابزارهایی آشنا خواهیم شد؟
ابزارهایی که وظایف زیر را برای شما انجام خواهند داد:
- کامپایل کردن Sass
- فشرده سازی فایل های جاوااسکریپت
- فشرده سازی و بهینه سازی فایل های CSS
- فشرده سازی فایل های HTML
- فشرده سازی تصاویر (همه فرمت ها)
- اجرا کردن سروری جهت نمایش سایت در فاز توسعه
- Livereload، یا رفرش مرورگر هر بار تغییری در پروژه اتفاق می افتد
- لینت کردن فایل های Sass یا CSS
- لینت کردن فایل های JS
- معرفی مختصر بیشتر از 10 ابزار برای بهبود جریان کاری
پیش نیاز دوره
همین که کمی با طراحی سایت آشنا باشید می توانید این دوره را فرا بگیرید. دوره های زیر نیز می توانند در این امر به شما کمک کنند:
ویدیو مقدمه
مواد درسی
این دوره شامل 20 ویدیو می باشد که در کل 7 ساعت آموزش را در بر دارد و حجم فایلی که دانلود خواهید کرد حدودا 1 گیگابایت می باشد.
دانلود دوره
می توانید از طریق لینک زیر اقدام به خرید این دوره آموزشی کنید:
دمتون گرررررررررررررررررررم : ))
استاد یه دوره PWA بسازید : ((((
تو وب فارسی آموزش خوب ازش نداریم برای آی او اس هم باید ازش استفاده کنیم :((((((((((((((((((((
سلام.استاد این دوره برای من که دوره های مقدماتی و طراحی واکنشگرا و فلکس باکس و سس رو گذروندم مناسبه؟استاد دوره جاوااسکریپت وفریمورک هاش رو آموزش نمیدین؟
سلام استاد خسته نباشید، من این دوره رو تهیه کردم و دارم یاد میگیرم، ولی مثل اینکه گیت هاب هم جدیدا یه پکیج منیجر معرفی کرده، دوره شما واقعا عالیه و دارم خیلی چیزهای خوبی ازش یاد میگیرم، ولی خیلیا میگن با معرفی پکیج منیجر گیت هاب npm دیگه کاربردی نداره!
اصلا این پکیج منیجر گیت هاب چیه؟ فرقش با npm چیه و آیا همچنان ارزش داره npm یاد بگیریم؟
در مورد قسمت چهارم آموزش یه سوال برام پیش اومده که تو بخش پرسش و پاسخ پرسیدم ولی کسی جواب نداد، ممنون میشم خودتون جوابم رو بدید، اینم لینکش
https://discuss.css-tricks.ir/questions/question/%d9%81%d8%a7%db%8c%d9%84-package-lock-json/
سلام،
به دنیای پر از شلوغی فرانت اند خوش اومدین، توی این دنیا باید یک چیز رو خوب یاد بگیرید و اونم اینه که اطرافتون پر از هیاهو هستش و هر دم از اون باغ بری می رسد و از این حرفا، این وسط شما باید هدف رو برای خودتون مشخص کنید، آیا میخواین کار کنید و محصول بوجود بیارید؟ یا میخواین فقط ابزار جدید یاد بگیرید و وقتی برای بهبود محصولاتتون نداشته باشید؟ کدومش؟
راه حل چیه؟ شما سعی میکنید همیشه بهترین محصول رو بوجود بیارید، ابزارش مهم نیست چیه، ( البته به شرطی که راحتی کار و کارایی رو برای شما داشته باشه) البته این به این معنی نیست که نباید دانشتون ارتقا داده بشه، به این معنی هستش که باید یک بالانسی بین این دو ایجاد کنید.
ابزار گیتهاب هنوز توی نسخه بتا هستش، همین چند روز پیش تازه معرفیش کردند و من هم آشنایی ندارم ولی تاجایی که خوندم کارش با کار npm مغایرتی نداره و شما میتونید با دلی آروم کارتون رو ادامه بدید.
در مورد سوالتون هم من توی دوره صفحه آرایی روش کارم رو گفتم، معمولا سوالایی رو که بچه ها بتونن خودشون با تحقیق و مخصوصا با آزمایش بدست بیارند جواب نمیدم.
براتون آرزوی موفقیت میکنم.
خیلی خیلی ممنون، من فکر کردم کامنتم پاک شده و برای همین ایمیل زدم بهتون لطفاً اون ایمیل رو نادیده بگیرید، با گفته های شما دیگه با خیال راحت ادامه میدم، واقعا ازتون ممنونم چون من خیلی وقته کار میکنم ولی اصلا به نام فولدر ها، فایل ها، ورژن و… تو پروژه ها دقت نکرده بودم، در واقع همیشه برام سوال بود که اینا چیه…
آموزش npm واقعا عالیه و به هرکی که پیش نیازش رو داره پیشنهاد میکنم اینم یاد بگیره.
استاد، دیدگاه من رو پاک کردین و هیچ جوابی بهم ندادین : (
حداقل جواب رو به ایمیلم ارسال کنید، من الان واقعا نمیدونم چیکار کنم.
ما اینجا پشتیبانی 24 ساعته نداریم، پس باید کمی صبور باشید. سوال شما پاک نشده، چون لینک داشته نیاز به بررسی ادمین داشته.
سلام استاد.برای دوره جاوااسکریپت برنامه ای ندارین؟
سلام استاد
در این دوره در مورد gulp و grunt هم صحبت میشه و روش استفاده از اونها هم توضیح داده میشه ایا ؟
برای استفاده از yarn بجای npm باید چیکار کنیم؟ این اموزش برای استفاده از یارن هم مناسبه؟ و ایا مفید خواهد بود؟
تفاوت یارن و ان پی ام دقیقا در چیه؟ شنیدم یارن پرسرعت و بهینه تر هست
سلام،
این آموزش فقط npm رو مورد بحث قرار میده و مواردی که گفتید رو شامل نمیشه.
سلام اقای سیدی
چند بار در مورد این دوره ایمیل ارسال کردم اما پاسخ داده نشد، لطفا چک کنید و پاسخ بدید.
سلام، من الان چک کردم، سه تا پاسخ به ایمیل های شما داده شده، پس درست نیست که بگید پاسخ داده نشده.
تخفیف خواستید، کد تخفیف بهتون داده شد، یک هفته گذشت و استفاده نکردید، منقضی شد.
لطفا به وقت هم احترام بذاریم.
موفق باشید.
جریان گاری |:|:
سلام
۳ بار هست که دارم این فایل رو دانلود می کنم و تا ۹۰۰ مگابایات دانلود میشه هر دفعه ولی به سرور ارور می خوره لطفا سریع تر بررسی کنید
با تشکر
سلام، دوستان دانلود میکنن و مشکلی نمیخورن، از سرور نمیتونه باشه. ولی من دوباره بررسی میکنم تا آخر وقت امروز.
سلام استاد وقت بخیر
وقتی می خوام از طریق cmd پکیجی رو نصب کنم، یه پیغام میده که در حال دانلوده و دیگه کلا هنگ میکنه، برای هر پکیجی که می خوام نصب کنم به همین صورته.
میشه لطفاً راهنمایی کنید.
سلام مجدد.
مشکل از اینترنتم بود.
سلام، من یک ساعت پیش دیدم پیام رو اومدم جواب بدم با این متن که هیچ راه حلی راستش ندارم چون مشکل مربوط به مسائل کامپیوتر و اینترنت خودتون هستش و درگیر شدم یادم رفت، الان اومدم دیدم کامنت گذاشتین خوشحال شدم :))
موفق باشید.
اول این دوره رو ببینیم بعد بریم سراغ webpack ???
توصیه من اینه که اول کمی با npm آشنا بشید بعد برید سراغ ابزارهای دیگه و همچنین این دوره پکیج های خوبی رو معرفی میکنه که توی هر نوع پروژه های قابل استفاده هستند.
استاد سلام . منکه با انگولار کار میکنم آیا لازم هست این دوره رو یاد بگیرم؟ اونجا که اصلا خوده وبپک و باندلرهاش کاراشو میکنن ما نیازی نداریم کاری کنیم . ممنون
سلام، ابزار مهم نیست، اگر اونجا خروجی رو به خوبی تولید میکنید و workflow خوبی هم دارید نیازی نیست این دوره رو ببینید.
سلام اقای سیدی
من نفهمیدم این سایت (drcss) مطلب شما رو کپی کرده یا تبلیغتون کرده!!!
سلام، امثال اینا یک ربات مانندی مینویسن که پست های یک سایت رو در سایت اونا نشون بده، مثلا میشه از RSS سایت استفاده کرد و مطالب رو کپی کرد و روش های دیگه
در کل چیز خوبیه اگر سایت ما خوابید اون بکاپه :)
با سلام
Livereload که جزء مباحث درج کردید، برای نرم افزار Brackets هست؟ یعنی دوره رو با این نرم افزار آموزش میدید؟
یا اینکه برای هر نرم افزار مثل webstorm و phpstorm هم امکانپذیر هست؟
البته برای phpstorm اکستنشن برای کروم داره .اما به خوبی عمل نمیکنه.
من که کلا از فایرفاکس استفاده میکنم هم کارایی داره ؟
یکی از مشکلاتی که دارم، همین Livepreview هستش که متاسفانه phpstorm نداره و من هم کلا فایرفاکس کار میکنم.
با تشکر
سلام، live reload یک مبحث هستش که ابزارهای مختلف به نحو مختلف پیادش کردند، یک روش افزونه ها هستند ولی نه ما در این دوره با روش دیگه ای که مستقل از ویرایشگر و مرورگر هست این بحث رو مطرح میکنیم.
موفق باشید.
در ویرایشگر VS Code از افزونه live Server استفاده کنید.
سلام مهندس جان لطف کنید ایمیلتون را چک کنید .
npm i normalize.css
نصب normalize به شکل بالا است. مربوط به ویدیو سوم package.json.
سلام.
درباره شماره‌گذاری پکیج، اگر هم باگ فیکس کردیم و هم ویژگی جدید اضافه کردیم باید چکار کنیم؟ فقط عدد وسطی رو بالا ببریم یا هردو را؟
سلام، در این صورت فقط عدد فیچر تغییر کنه.
سلام در این دوره با webpack پروژه هارو باندل میکنید؟
سلام، نه توی این دوره خیلی سراغ جاوااسکریپت نمیریم و بحث های باندلینگ رو نداریم.
عجب دوره ای بوووود!
برگ ریزان.تمام.
سلام استاد
ما هر کاری میکنیم نمیونیم بوت استرپ رو توی npm ران کنیم!
و موقع کامپایل از sass ارور میده!
سلام دوست عزیز
“import”node_modules/bootstrap/scss/bootstrap.scss@
به احتمال زیاد بعد از @ / میزارید ک نباید بزارید!!! و موقع کامپایل ارور میده
😜
سلام دوست عزیز!
جالب بود :))
استاد سلام
من با npm و webpack کار کردمه در حد ابتدایی و دارم بیشتر یاد میگیرم
توی توضیحات اینو نوشته بودید
معرفی یک ساختار اولیه بهینه (Boilerplate) برای توسعه یک پروژه را نیز خواهیم داشت.
من مشکلم در حال حاضر فولدر بندی و استراکچر پروژه هست مثلن فایلهای sass به چند قسمت باید تقسیم بشن و فایل پروداکت و دولوپ باید جدا باشن چندتا فایل css و js باید داشته باشیم
ایا css رو توی فایل js باید ببریم یا نه و اینجور مباحث
خواستم ببینم شما تو این دوره در مورد این مسائل هم صحبت میکنید
سلام آقای سیدی روزتون بخیر.
میخواستم بپرسم شما تدریس خصوصی مباحث فرانت هم انجام میدید؟