使用grunt实现浏览器自动刷新

  首先安装必备的插件:

  • nodejs安装
  • grunt安装
  • grunt-contrib-watch:npm install grunt-contrib-watch —save-dev

因为这是要引入livereload来监听你对文件所做的修改,所以需要一个服务器来实现浏览器与服务期间的通信,

因此,可以利用apache实现。将你的项目放在Apache服务器下。

  然后就是进行基本的配置了:

grunt.initConfig(

watch: {

livereload: {

options: {livereload: true},

files: [‘dev/test.js‘, ‘index.html‘]

}

})

grunt.loadNpmTasks(‘grunt-contrib-watch‘);

要实时刷新的界面中引入一段脚本<script src="//localhost:35729/livereload.js"></script>

  最后就是使用grunt启动你的监听,大功就告成啦!!!

时间: 2024-11-07 17:48:45

使用grunt实现浏览器自动刷新的相关文章

修改文件后浏览器自动刷新解决方案

现有编程工具的自动刷新解决方案 其实有很多工具可以做到文件一改变,浏览器自动刷新,其实这样体验也是最好的,可是由于一些原因,这些工具并不能解决所有工作场景的需求. 由于这不是本文的主要内容,只列出一些可以实现自动刷新的工具,没有进行详细展开,大家可以自行去研究下. 在Sublime下有一个插件叫做LiveStyle可以实现修改CSS后自动刷新,但是每一个CSS文件都要手动配置,不够智能.需要安装Chrome插件:Emmet LiveStyle. JetBrains公司的IDEA.WebStorm

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

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

Browsersync 浏览器自动刷新

Browsersync 是一个很好用的工具,它可以实时监测文件的变动然后自动刷新浏览器,不用每次去点刷新或F5,特别在调试样式时非常有用. browsersync中文网  http://www.browsersync.cn/ 安装 首先安装node.js(直接下载后安装就行,http://nodejs.cn/download/) > 打开命令行(win+r 然后输入cmd打开命令行)> npm install -g browser-sync (通过npm安装browsersync,如果下载慢的

前端开发 ---浏览器自动刷新

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Helvetica; color: #000000 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Helvetica; color: #000000; min-height: 13.0px } span.s1 { } span.Apple-tab-span { white-space: pre } 1.livereload (1

使用 grunt 实现页面自动刷新

1.这里就不陈述 Grunt 是什么这些理论了,自行搜索哈,当然要安装的东西还是要先声明一下, 首先我们先下载安装NodeJs -> Git(下载npm)->  npm  ->  Grunt .这里一个过程就不陈述了,自己自行搜索便能安装搭建. 2.假设我们这些都已经安装好了,那么我们就从零开始搭建一个项目来测试一下(完整的目录如下) 我们简要说一下每个文件搭建与内容 1.创建一个GruntItem 空文件文件(里面包含下面文件); 2.创建一个package.json -> 我们

前端:实现开发页面保存后浏览器自动刷新的方法

一.Grunt+Livereload 首先需要做的是安装node.js,这个是实现此功能的基本环境,安装示例点击查看.Grunt通过node.js的管理工具NPM进行安装,Livereload是谷歌浏览器的一个插件.FQ使用的hosts文件点击即可下载.详细的安装过程请参考如下链接:Grunt+Livereload 搭建本地前端开发环境:个人在安装的过程中唯一出现的问题就是Gruntfile.js的配置.使用教程中的配置文件会出现一个错误提示:path必须是一个字符串.仔细查看后发现“optio

browsersync 浏览器自动刷新神器

官网:http://www.browsersync.cn/ 基于node,具体安装方法和使用方法参见官网,可以结合gulp等构建工具来用,也可以单独使用.不错~

Browsersync 省时浏览器同步测试工具,浏览器自动刷新,多终端同步

官网地址 http://www.browsersync.cn/ 1.安装 BrowserSync npm install -g browser-sync 2.启动 BrowserSync // --files 路径是相对于运行该命令的项目(目录) browser-sync start --server --files "*.html" //如果您需要监听多个类型的文件,您只需要用逗号隔开.例如我们再加入一个.html文件 // --files 路径是相对于运行该命令的项目(目录) br

Chrome 实现前端页面自动刷新

作为一个前端,主要是写页面,但是每次写完一段代码,保存,如果想看看刚刚写的代码的效果怎样,还需要到浏览器手动刷新,刷新,刷新,刷的手疼了. 所以如果能实现只要在编辑器中保存,浏览器自动刷新页面,那岂不是很棒嘛!!So convenient~~ 所以本文介绍如何实现浏览器自动刷新. 1.需要安装: livereload,Chrome 安装这个扩展程序 然后,window 用户需要还需要下载安装个客户端, http://livereload.com/ 最后,使用 npm 全局安装 http-serv