首先gulp是基于Node的,所以确保你已经安装 node.js,在Nodejs官方网站下载跟自己操作系统相对应的安装包。

先说一下gulp安装流程:

1:全局安装gulp,操作为: npm install gulp -g;
2:在根目录下创建 package.json文件,操作为:npm init,之后根据操作输入“名字,版本号,描述”等内容,直接按回车则使用默认值,最后根据提示输入YES即可;输完后根目录下多了个package.json文件;
3:本地安装gulp,先进入你的项目所在,如d盘下的myproject/app

d: 进入D盘;
cd myproject/app 进入myproject下面的app文件夹;

然后在当前项目根目录下输入:
npm install --save-dev gulp;

可以发现我们安装了2次,全局安装gulp是为了执行gulp任务,本地安装gulp则是为了调用gulp插件的功能。

4.根目录下创建 gulpfile.js,此为配置文件,有关gulp的任务都写在里面,后面再讲。

至此,gulp的基本安装就已经结束,下面来安装gulp插件,有关的常用插件像代码压缩,图片压缩,重命名等还是比较多的,可以去npm上找,再次就不举例了,本文只用简单介绍自动刷新相关插件,(本想sass实时编译成css再自动刷新的)

先按照服务器插件:
livereload需要在服务器上运行,可以先npm install http-server -g;装一个插件,如果你有自己的本地服务器也行;
如果系统是win10或者8, 可能会出错,退出Node再以管理员的身份打开,重新安装即可;
安装完然后输入http-server,出现此图片代表启用服务成功;由于启用后就没法进行其他操作了(难道是我的问题?),所以再打开一个 node(反正又不要钱)
装完后以服务器环境打开文件,默认地址为 http://192.168.0.110:8080 (要找到html文件位置)

再安装livereload插件:
npm install gulp gulp-livereload -g

安装完后cd进入项目所在位置输入livereload

需要的文件都装好后,就可以来写上面的 gulpfile.js配置文件了;

//引入插件
var gulp =require("gulp");
var livereload=require("livereload");

//执行任务,意思为监听src下的所有文件,发现有变动即刷新浏览器,根据自己的文件目录写监听的位置
gulp.task('watch', function() {
livereload.listen();
gulp.watch('src/**/*.*',function(file){
livereload.changed(file.path);
});
});

为了让浏览器自动刷新还需要装一个chrome的插件,但由于要FQ就算了,以下面的方案代替:
在index.html中引入一下script标签

<script>
document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] +
':35729/livereload.js?snipver=1"></' + 'script>')
</script>

至此就可以正常搞起,亲测可用。 有双屏的写起来爽很多,只要ctrl+s保存就你懂得!!!!呵呵呵呵。

gulp.task是gulp的api之一,作用为定义任务,有关其他的api像src watch pipe dest什么的就大家自己研究了。

研究了3个多小时,大家要是能用了就点个赞。有什么问题可以咨询一下我,我要是懂得就帮你解答一下,不懂得我也没办法,本人也就刚工作一个月的水平,还是比较水的,哪里写错了大家见谅一下。

前端神器!!gulp livereload实现浏览器自动刷新的更多相关文章

  1. [gulp入门]gulp-connect浏览器自动刷新

    LiveReload可以理解为即时刷新,在前端开发中,开发者在编写或调试html/js/css代码后需要从编辑器切换到浏览器,再刷新浏览器才能看到页面变化,这种频繁的操作在一定程度上影响了工作效率,而 ...

  2. 前端-如何用gulp快速搭建项目(sass预编译,代码压缩,css前缀,浏览器自动刷新,雪碧图合成)

    一:gulp优点: 易于使用 通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理: 插件高质 Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作. 构建快速 利用 Node ...

  3. Gulp 搭建前端非SPA 项目, 修改文件浏览器自动刷新

    起因:需要搭建一个自动打包处理 sass / js (es6),自动监听文件变化时浏览器自动刷新的开发环境 项目目录 project build -css -js *.html src -html - ...

  4. gulp最佳实践(包含js,css,html预编译,合并,压缩,浏览器自动刷新)

    gulp是基于流的自动化构建工具官方网址:http://www.gulpjs.com.cn/ 一.安装需要的模块 1.新建package.json,输入下面的内容 { "name" ...

  5. 详解Grunt插件之LiveReload实现页面自动刷新(两种方案)

    http://www.jb51.net/article/70415.htm    含Grunt系列教程 这篇文章主要通过两种方案详解Grunt插件之LiveReload实现页面自动刷新,需要的朋友可以 ...

  6. Webpack 2 视频教程 007 - 配置 WDS 进行浏览器自动刷新

    原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...

  7. 浏览器自动刷新——基于Nodejs的Gulp LiveReload与VisualStudio完美结合。

    本文版权桂博客园和作者吴双共同所有,转载和爬虫请注明原文地址 http://www.cnblogs.com/tdws/p/6016055.html 写在前面 大家好我是博客园的蜗牛,博客园的蜗牛就是我 ...

  8. gulp构建前端,压缩css,js文件,实现浏览器自动刷新

    一.安装node nodejs下载地址:https://nodejs.org/ nodejs自带npm模块管理器,安装完成之后打开dos命令窗口输入 node -v就能查看nodejs是否安装成成功 ...

  9. 前端浏览器自动刷新神器:Browsersync

    [安装] 1 npm install -g browser-sync [静态项目使用browsersync] 自己可以去browsersync官网查看,其实使用很简单,总结下就是: 1 browser ...

随机推荐

  1. linux-android(任务处理)

    1.开辟任务内存 2.设置每个任务优先级 ,,

  2. C++DFS方法全排列

    前几天看纪磊的<啊哈!算法>一书,里面讲算法讲的特别通俗细致,真的是初中生都能读得懂的算法书(我大二才读:P).这段代码很适合初学算法的同学. #include<iostream&g ...

  3. Labview 查看一次while循环运行的时间

    在while循环中增加一个移位寄存器,移位寄存器的初始值使用时间计数器,在while循环里面增加一个减法Vi,再增加一个时间计数器,两者做差,最后显示差值. 在这里只能显示大概运行时间.如下图.

  4. iOS日常学习 - 每个Xcode开发者应该知道的七个使用技巧

    本文为转载学习使用原文链接 工欲善其事,必先利其器.对一个iOS开发者来说,这就意味着对Xcode的熟练掌握程度.Xcode是一个学习起来有点难度的软件,下面的这些技巧或许可以显著的提高你的编程效率. ...

  5. Mysql CASE WHEN 用法

    select sum(1) as col_0_0_, sum(case vciinfo.useable when -1 then 1 else 0 end) as col_1_0_, sum(case ...

  6. C# Nginx平滑加权轮询算法

    代码很简单,但算法很经典,话不多说,直接上代码. public struct ServerConfig { /// <summary> /// 初始权重 /// </summary& ...

  7. jQuery基本筛选选择器

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. 链表中的倒数第k个结点

    题目描述 输入一个链表,输出该链表中倒数第k个结点.   基本思想:定义两个指针a,b分别指向头节点, a指针先向前走k-1步(注意:因为倒数节点是从倒数第一个结点开始的,而不是零),然后a指针和b指 ...

  9. C# DES加密,KEY和IV不同设置的写法

    1.KEY和IV分别赋值 //默认密钥向量 private static byte[] Iv= { 0x12, 0x34, 0x56, 0x78, 0x90, 0xAB, 0xCD, 0xEF }; ...

  10. GridView绑定数据源 绑定DataReader /DataSet /DataTable

    有一个GridView1 <asp:GridView ID="GridView1" runat="server"></asp:GridView ...