gulp 插件之 gulp-livereload

Posted 2020-10-04

gulp-livereload 的简介：

            gulp-livereload 插件用于实时重载，当 html，css 文件内容发生改变时，浏览器会自动刷新页面。在使用 gulp-livereload 插件时需要浏览器安装相应的 liveReload 插件（浏览器插件）

一、gulp-livereload 插件的使用

1、全局安装 http-server 模块命令（用于提供 web 服务）

            npm install -g http-server

2、安装 “gulp-livereload”插件命令（在终端进入到项目根目录执行）

            npm install --save-dev  gulp-load-plugins gulp-livereload gulp-less

3、在项目根目录下提供 "gulp-livereload" 插件任务配置需要的 src 目录和源文件（源文件放置到 src 目录下）

            mkdir src

4、在 gulpfile.js 文件中配置使用 "gulp-livereload"

 具体示例：
var gulp = require(‘gulp‘),    
      plugins = require(‘gulp-load-plugins‘)();       // 装载插件
      
gulp.task(‘less‘, function () {                                 // 自定义 "less" 任务
    return gulp.src(‘src/less/*.less‘)                        // 模糊匹配 src/less 目录下所有 less 文件
        .pipe(plugins.less())                                      // 调用 gulp-less 插件
        .pipe(gulp.dest(‘dist/css‘))                           // 目标文件存放路劲
        .pipe(plugins.livereload());                           // 调用 gulp-livereload 插件
});

gulp.task(‘livereload‘, function () {                       // 自定义 "livereload" 任务
        plugins.livereload.listen({ start: true });        // 调用 gulp-livereload 插件的 listen() 方法
        gulp.watch(‘src/less/*.less‘, [‘less‘]);             // 监听 src/less 目录下的所有 less 文件，自动执行 "less" 任务
});

// gulp-livereload 插件的 livereload(options) 和 livereload.listen(options) 方法的参数详解：
        port                                         Server port
        host                                         Server host
        basePath                                  Path to prepend all given paths
        start                                          Automatically start
        quiet             false                    Disable console logging
        reloadPage   index.html           Path to the page the browsers on for a full page reload
        
PS：参考 https://www.npmjs.com/package/gulp-livereload

5、运行 “http-server”web 服务命令（在终端进入到项目根目录执行）

            http-server

6、在浏览器中访问项目根目录并且启动浏览器的 liveReload 插件

            localhost:8080  （http-server 服务的默认地址）

PS：到此如果配置没有问题的话，就可以在浏览器中浏览到项目根目录下的所有文件了。

7、最后在终端运行 "gulp livereload" 命令

PS：如果没有错误提示信息，证明就没什么问题了。现在去修改源文件，看看浏览器是否可以自动刷新页面。未完待续。。。

本文出自 “珞辰的博客” 博客，转载请与作者联系！