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

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

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

npm install --save-dev gulp-livereload

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 در گالپ متصل بشه و رفرش ها به درستی انجام بشه.

موفق باشید