1.添加gulp-livereload组件

npm install --save-dev gulp gulp-livereload

会在package.json中添加如下内容:

  "devDependencies": {"gulp": "^3.9.0","gulp-livereload": "^3.8.1"}

2.新建gulpfile.js文件

var gulp = require('gulp'),livereload = require('gulp-livereload');gulp.task('watch', function() {livereload.listen();gulp.watch('src/**/*.*', function(file) {livereload.changed(file.path);});
});

3.命令行运行gulp

gulp watch

4.命令行启动http-server

http-server

5.chrome浏览器打开页面

http://localhost:8080/
安装livereload插件，点击地址栏右边livereload按钮变成实心圈即为启用。它会自动增加如下代码到html

<script src="http://127.0.0.1:35729/livereload.js?ext=Chrome&extver=2.1.0"></script>

gulp-livereload组件使用相关推荐

gulp常用组件【study笔记】
// 项目控件引入//及对应的说明 var gulp = require('gulp'); var less = require('gulp-less'); //less编译 var concat = ...
gulp.js 的安装以及使用
首先:电脑需要安装 Node.js 一个大绿色的安装按钮,点击就可以. 但还是推荐,点击download选中一款适合电脑配置的版本. Node安装过程,就是下一步 and 下一步~~ 测试手否安装成功 ...
我爱工程化之 gulp 使用（一）
一.简介 gulp是前端自动化工具,压缩.合并.预编译检查等等,它与grunt频繁IO操作来消耗内存相比,它是使用的流的方式,我们可以简称为管道流(一端入,一端出,3通水,一个大桶,第一通在管道里面流 ...
gulp实现打包js/css/img/html文件，并对js/css/img文件加上版本号
参考打包教程: http://www.cnblogs.com/tugenhua0707/p/4069769.html http://www.cnblogs.com/tugenhua0707/p/498 ...
前端构建工具gulp入门教程
本文假设你之前没有用过任何任务脚本(task runner)和命令行工具,一步步教你上手Gulp.不要怕,它其实很简单,我会分为五步向你介绍gulp并帮助你完成一些惊人的事情.那就直接开始吧. 第一步 ...
gulp + browsersync实现页面自动刷新
写习惯了vue,特别喜欢vue的自动刷新功能,于是琢磨在node中如何自动刷新,使用过nodemon, 但是感觉效果差点,看到网上有gulp + livereload的方案和gulp +browser ...
livereload使用方法
搞这个自动刷新的插件搞了好几个小时了还没搞明白,快被气死了,想改用browser-sync结果npm又一直转啊转一直卡死. 刚才终于神奇地搞定了,结果发现还是我自己智商太低...大概的经过是这样的.. ...
Gulp前端构建前端开发环境
一.下载并安装Node.js C:\Users\Administrator>node -v v11.0.0 二.安装npm,安装淘宝cnpm npm install -g cnpm --regi ...
nodejs+gulp内网前端项目代码打包解决手动清空浏览器缓存问题（一）
nodejs+gulp内网前端项目代码打包解决手动清空浏览器缓存问题项目介绍打包工具选择环境搭建使用gulp 项目介绍项目前端框架是jquery+miniUI框架,它存在不少问题,但是我们的 ...
ES6 新增功能点整理
学习文档地址:https://www.runoob.com/w3cnote/es6-tutorial.html 注意:本文是作者自己学习时做到记录,不作为es6的学习材料.杠精勿扰! 1.webpca ...

gulp-livereload组件使用

1.添加gulp-livereload组件

2.新建gulpfile.js文件

3.命令行运行gulp

4.命令行启动http-server

5.chrome浏览器打开页面

gulp-livereload组件使用相关推荐

最新文章

热门文章