首先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. Duilib + wke 设置wke背景透明

    WkeWebKit.cpp 新增 wkeSetTransparent(m_pWebView, true); void CWkeWebkitUI::DoInit() { CControlUI::DoIn ...

  2. keras安装配置指南【linux环境】【转】

    本文转载自:https://keras-cn.readthedocs.io/en/latest/for_beginners/keras_linux/#kerasmnist 本教程不得用于任何形式的商业 ...

  3. .Net HttpClient form-data格式请求

    var multipartFormDataContent = new MultipartFormDataContent(); multipartFormDataContent.Add(new Stri ...

  4. 百度云如何免费扩容至2055G?

    百度云如何免费扩容至2055G? 上篇说到整一个新的百度账号,那么5G的百度云内存肯定满足不了我们收集癖的需求.那么就来了解一下怎么扩容吧. 主要是在手机端实现的 用这个新的百度账号在手机APP上登录 ...

  5. windchill系统安装大概步骤

    1.安装VMware Workstation虚拟机 2.win7的64位操作系统(为什么不用32位?因为32位的内存最大只能设置4G) 3.安装Oracle数据库(映射iso文件[上面栏的虚拟机-&g ...

  6. [转]常见HTTP状态(如200,304,404,503)

    在网站建设的实际应用中,容易出现很多小小的失误,就像mysql当初优化不到位,影响整体网站的浏览效果一样,其实,网站的常规http状态码的表现也是一样,Google无法验证网站几种解决办法,提及到由于 ...

  7. bugfree登录后报错PHP Fatal error: Call-time pass-by-reference has been removed in

    详细报错信息[Tue Apr 25 06:49:07.556316 2017] [:error] [pid 21799] [client *.*.*.*:55813] PHP Fatal error: ...

  8. Educational Codeforces Round 13 A、B、C、D

    A. Johny Likes Numbers time limit per test 0.5 seconds memory limit per test 256 megabytes input sta ...

  9. HAproxy的安装配置及动静分离

    /////////////////////////////目录//////////////////////////////////////////一.安装HAproxy二.编写HAproxy启动脚本三 ...

  10. [mybatis]Record与Example的用法

    一.Record 一个Record是一个Dao对象(继承Mapper接口),tkmybatis会将record自动映射成sql语句,record中所有非null的属性都作为sql语句,如: 映射的sq ...