• آموزش نصب و استفاده از BROWSERSYNC (بخش اول)
• آموزش نصب و استفاده از BROWSERSYNC (بخش دوم)

آپدیت : 1397/12/27

Gulp یک از بهترین task-runner های موجود است (task-runner یا اجرا کننده خودکار کارها به ابزارهایی گفته می شود که می توانند یک سری از روال های همیشگی موجود در توسعه و طراحی را به صورت خودکار انجام دهند و در وقت توسعه دهنده وب صرفه جویی کنند . مثل فشرده کردن فایل ها – کامپایل Sass یا Less به CSS و …) . برای اینکه بتوانیم گالپ و browsersync را به هم وصل کنیم باید از قبل گالپ روی سیستم ما نصب باشد . برای نصب آم کافی است دستور زیر را در خط فرمان وارد کنید :

npm install -g gulp

در پوشه اصلی پروژه (Root) یک فایل با نام gulpfile.js ایجاد کنیدو در داخل ای نفایل یک task گالپ بنام browser-sync ایجاد کنید

var gulp = require('gulp');
var bs = require('browser-sync').create(); // create a browser sync instance.

gulp.task('browser-sync', function() {
    bs.init({
        server: {
            baseDir: "./"
        }
    });
});

حالا برای اجرای کد بالا دستور زیر را در خط فرمان وارد نمایید

gulp browser-sync

کاری که این دستور می کند همان کاری است که دستور BrowserSync در مقاله قبلی می کرد.

اگر با این خطا مواجه شدید:

[12:31:22] Local gulp not found in C:\xampp\htdocs\myproject
[12:31:22] Try running: npm install gulp

باید دستور زیر را اجرا کنید تا رفع شود:

npm link gulp

browsersync پوشه اصلی پروژه را که در baseDir تعریف شده تحت نظر می گیرد و هر زمان که تغییری در کدها داده شد صفحه را دوباره بازگذاری می کند.

شما ممکن است قبلا یک سرور روی کامپیوتر خود نصب کرده باشید و بخواهید اینجا نیز همچنان از آن استفاده کنید.همانطور که در مقاله قبلی گفتیم BrowserSync می تواند در این مواقع به عنوان یک پراکسی برای سرور موجود استفاده شود و واسط بین سرور و شما شود.برای این کار کافیست کد را به این صورت تغییر دهید :

...
bs.init({
    server: {
        baseDir: "./"
    },
    proxy: "localhost:8080" // makes a proxy for localhost:8080
});

گزینه proxy به سروری اشاره می کند که شما می خواهید پراکسی برای آن ساخته شود.اگر سرور شما از WebSockets هم استفاده می کند باید به BrowserSync اطلاع دهید تا WebSockets فعال شود :

...
bs.init({
    server: {
        baseDir: "./"
    },
    proxy: {
        target: "localhost:8080", // can be [virtual host, sub-directory, localhost with port]
        ws: true // enables websockets
    }
});
...

نکته : BrowserSync گزینه های بیشتری از ایجاد سرور و پراکسی دارد . برای اطلاع از همه امکانات آن پیشنهاد می کنیم به اینجا سر بزنید.