LiveReload 帮助你在修改项目文件后,自动刷新 Chrome 网页

在开发中,经常遇到这种情景:修改项目文件后,要去浏览器中刷新一下页面,检查最新的修改结果。这里介绍一个小工具,他可以在你修改特定的代码之后,自动为你刷新浏览器开发页面。

本教程使用的版本为 Laravel 5.1,其他 Laravel 5.* 版本应该也适用。
Windows 环境下没有进行过配置,不保证成功。

步骤:

  1. 修改 gulpfile
  2. 安装 gulp-livereload
  3. 运行 gulp
  4. 安装 Chrome 插件
  5. 使用方法

修改 gulpfile

在 Laravel 项目文件中找到 gulpfile.js,在文件末尾加入以下代码,以下示例代码监听的是 *.blade.php 类型的文件修改动作,如需监听其他文件,作出类似的修改即可。

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

/**
 * task - 'default'
 * executes 'live-monitor'
 */
gulp.task('default', ['live-monitor']);

/**
 * task - 'laravel-views'
 * monitor laravel views
 */
gulp.task('laravel-views', function() {
    gulp.src('resources/views/**/*.blade.php')
        .pipe(livereload());
});

/**
 * task - 'live-monitor'
 * monitors everything
 */
gulp.task('live-monitor', function() {
    livereload.listen();
    gulp.watch('resources/views/**/*.blade.php', ['laravel-views']);
});

安装 gulp-livereload

首先,我们在项目的路径下,运行

npm install

完成之后,我们试着运行 gulp

发现会报错
Error: Cannot find module 'gulp-livereload'

此时,我们用下面一行安装 livereload,运行

npm install --save-dev gulp-livereload

运行 gulp

直接在项目路径下运行 gulp 命令即可,运行成功之后,会有类似下面一样的打印显示出来

Using gulpfile ~/Workspace/PHP/myTodoPractice/gulpfile.js
Starting 'live-monitor'...
Finished 'live-monitor' after 24 ms
Starting 'default'...
Finished 'default' after 13 μs

安装 Chrome 插件

插件地址:Chrome 插件商店

安装完成之后,在 Chrome 中打开我们想要自动刷新的网页(比如说 localhost 或者 homestead.app),左键单击插件图标。
此时,插件图标中心的圆圈符号会从空心变为实心,则说明插件已经开始与 gulp-livereload 配合工作了。

使用方法

以上都配置之后,当你使用编辑器对符合之前的监听条件的文件作出修改,并 save 之后,Chrome 插件便会帮你自动刷新你要调试的网页了。

本帖已被设为精华帖!
本帖由 Summer 于 7年前 加精
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
讨论数量: 1
Summer

有个这个,不需要装 chrome 插件的: https://www.npmjs.com/package/laravel-elix...

7年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!