gulp插件之gulp-livereload-创新互联

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

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。