پلاگین livereload در Gulp

وقتی که در حال کد نویسی یک طرح وب سایت هستید بارها صفحه مرورگر رو رفرش می کنید تا تغییرات را مشاهده کنید و این کار ممکنه به یه عادت تکراری و خسته کننده براتون تبدیل شده باشه ! اگر از gulp استفاده می کنید برای توسعه frontend توصیه میکنم پلاگین livereload رو حتما نصب کنید تا خیلی سریع و بدون نیاز به رفرش دستی حاصل تغییرات کار خودتون رو روی مروگر مشاهده کنید.

خوب میریم سراغ نصب و استفاده از پلاگین Livereload در gulp.

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

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

npm install --save-dev gulp-livereload
با اجرای کد بالا پلاگین Livereload نصب شده و همچنین در فایل package.json هم اضافه می شود. حالا فایل gulpfile.js که تنظیمات مربوط به gulp در آن قرار داره رو باز کنید و دستورات زیر را وارد نمایید

var gulp = require('gulp');

var livereload = require('gulp-livereload');

gulp.task('changeHtml', function() {
gulp.src('./*.html')
.pipe(livereload());
});

gulp.task('default', ['changeHtml'], function() {
livereload.listen();
gulp.watch('./*.html', ['changeHtml']);
});

سپس از طریق خط فرمان به مسیر پروژه خودتون برید و دستور gulp رو اجرا کنید تا صفحه وب شما رفرش بشه و همچنین gulp فایل index.html رو زیر نظر میگیره و در صورتی که تغییری در این فایل ایجاد بشه مجددا صفحه رو رفرش میکنه.

صفحه وب تون را باز کنید و در نوار ابزار مرورگر بر روی ایکون مربوط به اکستنشن Livereload کلیک کنید تا به پلاگین livereload در گالپ متصل بشه و رفرش ها به درستی انجام بشه.

 

 

موفق باشید

 

 


تا كنون نظري ثبت نشده است .