آپدیت : 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 گزینه های بیشتری از ایجاد سرور و پراکسی دارد . برای اطلاع از همه امکانات آن پیشنهاد می کنیم به اینجا سر بزنید.
خسته نباشید ممنون به خاطر
این مطالب زیبا