1. انجمن های فارس پاتوق
    مطابق با قوانین جمهوری اسلامی ایران می باشد.
    رد اعلامیه

آموزش نصب و راه اندازی گالپ (Gulp.js)

شروع موضوع توسط salavati1 در ‏1 ژانویه 2017 در انجمن مقالات عمومي

  1. salavati1

    salavati1 کاربر تایید شده

    تاریخ عضویت:
    ‏15 آگوست 2016
    ارسال ها:
    1,600
    تشکر شده:
    216
    جنسیت:
    زن
    حتما برای شما هم پیش آمده است که پس از طراحی سایت حرفه ای یک وب سایت، برای بهینه سازی آن بخواهید حجم تصاویر به کار رفته را کاهش دهید. فایل های Sass و Less را کامپایل کنید و یا فایل های جاوااسکریپت پروژه را کوچک سازی نمایید. این موارد و بسیاری موارد دیگر از جمله کارهایی است که انجام مداوم آن گاه باعث هدررفت زمان می شود و شاید عملا احتیاجی به صرف زمان زیاد برای این قبیل کارها نباشد.

    گالپ چیست؟
    گالپ یک task runner یا اجرا کننده فرامین است که به وسیله آن می توان به بسیاری از کارها و پروسه های تکراری و زمان بر طراحی و توسعه وب، سرعت ببخشید و از طراحی سایت لذت ببرید!
    برای شروع باید مراحل زیر را قدم به قدم انجام دهید:
    1-نصب Node.js:
    به دلیل اینکه Gulp بر پایه NodeJs ساخته شده است، اولین قدم نصب NodeJs می باشد. مراحل نصب را تا انتها پیش بروید تا نود جی اس بر روی سیستم شما نصب شود.
    2-نصب گالپ
    در این مرحله نوبت به نصب گالپ می رسد. صفحه CMD را باز کنید و دستور زیر را در آن بنویسید:
    npm install --global gulp
    به وسیله این دستور، گالپ بر روی سیستم شما نصب می شود.
    برای استفاده از گالپ در هر پروژه باید از طریقcmd به مکان پروژه دسترسی پیدا کنیم و دستور مورد نظر را اجرا نماییم. برای دسترسی به مکان پروژه مورد نظر cd را می نویسیم و سپس آدرس دقیق محل پروژه را وارد می کنیم و اینتر می زنیم:
    سپس با وارد کردن دستور زیر، پوشه مورد نیاز گالپ برای اجرای دستورات ساخته می شود:
    npm install --save-dev gulp
    از این مرحله به بعد، می توانیم به گالپ برای اجرای فرامین خود دستور بدهیم. در این مقاله ابتدا با فرمان بسیار کاربردی Refresh خودکار صفحات پس از هر بار تغییرات شما در پروژه، دستورات را پیش می بریم.
    برای این منظور یک فایل جاواسکریپت با نام gulpfile.js در Root پروژه ایجاد کنید و کد زیر را در آن بنویسید:
    var gulp =require('gulp');
    gulp.task('default',function(){
    //Tasks that we want to run
    }
    این کدها اسکلت بندی اصلی فایل gulpfile.js را نشان می دهد. مسلما این خطوط دراین مرحله کار خاصی را انجام نمی دهند. برای ایجاد دستور رفرش خودکار صفحات یا browser-sync ابتدا بسته مورد نظر را به وسیله کد زیر در ترمینال نصب کنید:
    npm install browser-sync
    سپس کد زیر را در gulpfile.js بنویسید:

    var gulp = require('gulp');
    var browserSync = require('browser-sync').create();
    // Static server
    gulp.task('default', function() {
    browserSync.init({
    server: {
    baseDir: "./"
    }
    });

    gulp.watch("*.html").on('change', browserSync.reload);
    gulp.watch("styles/*.css").on('change', browserSync.reload);
    });
    به دو خط انتهای دستور توجه کنید. خط اول همه فایل های html موجود در root پروژه شما را رصد می کند و به محض هر تغییر مرورگر را به روز می نماید.
    خط بعدی نیز همه فایل های css موجود در پوشه styles را بررسی می کند و هر تغییر را در مرورگر به روز می نماید.
     

    موضوعات مشابه

    Last edited by a moderator: ‏2 ژانویه 2017
  1. کانال تلگرام

    اطلاعیه ها و اخبارهای فارس پاتوق ، مسابقات و جوایز
  2. گروه تلگرام

    کتاب مذهبی ، کتاب های درسی ، کتاب های علمی ، کتاب رمان
  3. برنامه تلگرام

    اپراتور ، نرم افزار های ارتباطی
  4. سرگرمی و تفریح تلگرام

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

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

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

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

    مدل لباس دخترانه ، مدل لباس زنانه ، مدل لباس پسرانه ، مدل لباس مردانه ، مدل لباس ، مدل لباس جدید ، مدل عینک ، مدل مو ، مدل ناخن ، عکس مدل
  9. کانال عکس تلگرام

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

    اپراتور همراه اول ، اپراتور ایرانسل ، اپراتور رایتل
  11. تبلیغات تلگرام و اینستاگرام

    آگهی های استخدام دولتی ، آگهی های استخدام غیر دولتی ، سوالات و پاسخ های آزمون های استخدامی
  12. کانالهای ادبی تلگرام

    تاریخ ، شعر و ادبیات ، نامه نگاری و انواع نامه ها
  13. گروه چت تلگرام

    ابزار های وبلاگ ، سئو و بهینه سازی وب سایت ، سیستم های مدیریت محتوا ، قالب های وبلاگ ، ابزار های وب سایت ، قالب های وب سایت ، معرفی وبلاگ و وب سایت های مفید ، کسب و کار در اینترنت ، کسب درآمد بدون اینترنت
  14. بهترین کانال های تلگرام

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

    سیستم عامل ها ، لپ تاپ و تبلت ، نرم افزار ها ، سخت افزار ها ، بازی های کامپیوتری
  16. کانال پزشکی و سلامت تلگرام

    روانشناسی ، تغذیه ، بهداشت ، بیماری ها و روش درمان
  17. بهترین پیج اینستاگرام

    اخبار ورزشی ، معرفی ورزش ها و تیم ها ، شخصیت های ورزشی
  18. عکس اینستاگرام

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

    مقالات کار آفرینی و طرح کسب و کار ، مقالات عمومی ، درخواست مقالات ، مقالات علمی
  20. آموزش اینستاگرام

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

    اهل بیت و علما ، احکام ، مولتی مدیای مذهبی
  22. کانال خانواده تلگرام

    خانواده ، هنر در خانه
  23. کانال آشپزی تلگرام

    انواع شیرینی ، انواع دسر ، انواع غذا ها و طرز تهیه آن ها ، خورش ها ، سوپ و سالاد ، ساندویچ و پیتزا ، سس و ترشی
  24. کانال گردش و گردشگری تلگرام

    معرفی مکان های زیارتی ، معرفی مکان های تفریحی ، معرفی مکان های شگفت انگیز ، معرفی شهرها و کشورها
  25. سایر موضوعات تلگرام

    اخبار و مطالب گوناگون خبری ، معما ها و چیستان ها ، اخبار گوناگون اینترنتی ، صندلی داغ ، گفتگو با کاربران ، بازارچه خرید و فروش ، زباله دان
  26. کانال تست روانشناسی تلگرام

    تست هوش
  27. کانال روانشناسی ازدواج تلگرام

    نکات قبل از ازدواج ، نکات بعد از ازدواج
  28. کانال مشاوره جنسی تلگرام

    راهنمایی علمی جنسی
XenForo Add-ons by Brivium ™ © 2012-2013 Brivium LLC.