خودکار سازی جریان کاری، workflow و آموزش npm جایگزینی برای gulp و grunt

خودکارسازی جریان کاری در توسعه وب سایت (npm-scripts)

خودسازکاری جریان گاری یعنی چی!؟ :|

به احتمال خیلی زیاد تا الان با صحنه هایی مشابه به تصویر زیر مواجه شده اید:

استفاده از بوتسرپ از طریق npm

در اینجا چندین روش برای استفاده از فریمورک بوتسترپ پیشنهاد شده است که یکی از آنها از طریق فرمان زیر می باشد:


npm install bootstrap

یا شاید تا الان از این که بعد از نوشتن هر تکه کد مجبور به ریلود کردن صفحه مرورگر خود هستید خسته شده باشید. (فکرشو بکن، تا کد رو ذخیره کنی مرورگر بصورت خودکار این کار رو انجام بده)

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

در کل به اموری مشابه به وظایف بالا که در کنار هم قرار میگیرند تا شما یک سایت یا اپلیکیشن را توسعه بدهید، جریان کاری یا همان workflow گفته می شود، حال هرچه این وظایف را به عهده ابزارها بگذاریم مرحله توسعه و تولید سریعتر انجام خواهد شد.

هدف دوره

در این دوره قصد داریم:

  1. شما را با بهترین ابزارهایی که باید در توسعه و نگهداری پروژه از آنها استفاده کنید آشنا کنیم.
  2. به شما نحوه خودکارسازی وظایف مورد نظر را از طریق اسکریپت نویسی npm آموزش دهیم.
  3. معرفی یک ساختار اولیه بهینه (Boilerplate) برای توسعه یک پروژه را نیز خواهیم داشت.

Gulp، Grunt و یا Webpack چی پس؟

نکته مهمی که باید در نظر داشته باشید این هستش که یادگیری npm مقدمه ای هست برای موارد بالا، در این دوره ما نه تنها شما را با مفهموم npm آشنا میکنیم بلکه با استفاده از npm-scriptها ثابت میکنیم که برای خیلی از پروژه ها نیازی به gulp و یا ابزارهای مشابه ندارید. البته توصیه بنده این هستش که هر زمان کار با فریمورک های جاوااسکریپت را فرا گرفتید باید Webpack یا ابزاری مشابه به آن را در کنار npm داشته باشید.

با چه ابزارهایی آشنا خواهیم شد؟

ابزارهایی که وظایف زیر را برای شما انجام خواهند داد:

  • کامپایل کردن Sass
  • فشرده سازی فایل های جاوااسکریپت
  • فشرده سازی و بهینه سازی فایل های CSS
  • فشرده سازی فایل های HTML
  • فشرده سازی تصاویر (همه فرمت ها)
  • اجرا کردن سروری جهت نمایش سایت در فاز توسعه
  • Livereload، یا رفرش مرورگر هر بار تغییری در پروژه اتفاق می افتد
  • لینت کردن فایل های Sass یا CSS
  • لینت کردن فایل های JS
  • معرفی مختصر بیشتر از 10 ابزار برای بهبود جریان کاری

پیش نیاز دوره

همین که کمی با طراحی سایت آشنا باشید می توانید این دوره را فرا بگیرید. دوره های زیر نیز می توانند در این امر به شما کمک کنند:

ویدیو مقدمه

مواد درسی

این دوره شامل 20 ویدیو می باشد که در کل 7 ساعت آموزش را در بر دارد و حجم فایلی که دانلود خواهید کرد حدودا 1 گیگابایت می باشد.

دانلود دوره

می توانید از طریق لینک زیر اقدام به خرید این دوره آموزشی کنید:

سوالت رو توی پنل بحث و گفتگو مطرح کن.

22 دیدگاه برای “خودکارسازی جریان کاری در توسعه وب سایت (npm-scripts)

  1. دمتون گرررررررررررررررررررم : ))

    استاد یه دوره PWA بسازید :‌ ((((
    تو وب فارسی آموزش خوب ازش نداریم برای آی او اس هم باید ازش استفاده کنیم :‌((((((((((((((((((((

  2. سلام.استاد این دوره برای من که دوره های مقدماتی و طراحی واکنشگرا و فلکس باکس و سس رو گذروندم مناسبه؟استاد دوره جاوااسکریپت وفریمورک هاش رو آموزش نمیدین؟

  3. سلام استاد خسته نباشید، من این دوره رو تهیه کردم و دارم یاد میگیرم، ولی مثل اینکه گیت هاب هم جدیدا یه پکیج منیجر معرفی کرده، دوره شما واقعا عالیه و دارم خیلی چیزهای خوبی ازش یاد میگیرم، ولی خیلیا میگن با معرفی پکیج منیجر گیت هاب npm دیگه کاربردی نداره!
    اصلا این پکیج منیجر گیت هاب چیه؟ فرقش با npm چیه و آیا همچنان ارزش داره npm یاد بگیریم؟

    در مورد قسمت چهارم آموزش یه سوال برام پیش اومده که تو بخش پرسش و پاسخ پرسیدم ولی کسی جواب نداد، ممنون میشم خودتون جوابم رو بدید، اینم لینکش
    https://discuss.css-tricks.ir/questions/question/%d9%81%d8%a7%db%8c%d9%84-package-lock-json/

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

      راه حل چیه؟ شما سعی میکنید همیشه بهترین محصول رو بوجود بیارید، ابزارش مهم نیست چیه، ( البته به شرطی که راحتی کار و کارایی رو برای شما داشته باشه) البته این به این معنی نیست که نباید دانشتون ارتقا داده بشه، به این معنی هستش که باید یک بالانسی بین این دو ایجاد کنید.

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

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

      براتون آرزوی موفقیت میکنم.

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

        آموزش npm واقعا عالیه و به هرکی که پیش نیازش رو داره پیشنهاد میکنم اینم یاد بگیره.

  4. استاد، دیدگاه من رو پاک کردین و هیچ جوابی بهم ندادین : (
    حداقل جواب رو به ایمیلم ارسال کنید، من الان واقعا نمیدونم چیکار کنم.

  5. سلام استاد

    در این دوره در مورد gulp و grunt هم صحبت میشه و روش استفاده از اونها هم توضیح داده میشه ایا ؟

    برای استفاده از yarn بجای npm باید چیکار کنیم؟ این اموزش برای استفاده از یارن هم مناسبه؟ و ایا مفید خواهد بود؟

    تفاوت یارن و ان پی ام دقیقا در چیه؟ شنیدم یارن پرسرعت و بهینه تر هست

    1. سلام، من الان چک کردم، سه تا پاسخ به ایمیل های شما داده شده، پس درست نیست که بگید پاسخ داده نشده.
      تخفیف خواستید، کد تخفیف بهتون داده شد، یک هفته گذشت و استفاده نکردید، منقضی شد.

      لطفا به وقت هم احترام بذاریم.
      موفق باشید.

  6. سلام
    ۳ بار هست که دارم این فایل رو دانلود می کنم و تا ۹۰۰ مگابایات دانلود میشه هر دفعه ولی به سرور ارور می خوره لطفا سریع تر بررسی کنید
    با تشکر

  7. سلام استاد وقت بخیر
    وقتی می خوام از طریق cmd پکیجی رو نصب کنم، یه پیغام میده که در حال دانلوده و دیگه کلا هنگ میکنه، برای هر پکیجی که می خوام نصب کنم به همین صورته.
    میشه لطفاً راهنمایی کنید.

      1. سلام، من یک ساعت پیش دیدم پیام رو اومدم جواب بدم با این متن که هیچ راه حلی راستش ندارم چون مشکل مربوط به مسائل کامپیوتر و اینترنت خودتون هستش و درگیر شدم یادم رفت، الان اومدم دیدم کامنت گذاشتین خوشحال شدم :))

        موفق باشید.

  8. استاد سلام . منکه با انگولار کار میکنم آیا لازم هست این دوره رو یاد بگیرم؟ اونجا که اصلا خوده وبپک و باندلرهاش کاراشو میکنن ما نیازی نداریم کاری کنیم . ممنون

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