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

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

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

  1. salavati1

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

    تاریخ عضویت:
    ‏15 آگوست 2016
    ارسال ها:
    1,262
    تشکر شده:
    201
    جنسیت:
    زن
    حتما برای شما هم پیش آمده است که پس از طراحی سایت حرفه ای یک وب سایت، برای بهینه سازی آن بخواهید حجم تصاویر به کار رفته را کاهش دهید. فایل های 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
XenForo Add-ons by Brivium ™ © 2012-2013 Brivium LLC.