grunt-contrib-connect自动刷新html页面
2017-05-18 16:32
316 查看
grunt-contrib-connect可以在我们开发的时候自动刷新页面,省去了手动刷新的时间。
下面说一下如何配置grunt-contrib-connect
1、下载插件包
4、安装serve-static
6、设置默认启动任务
下面说一下如何配置grunt-contrib-connect
1、下载插件包
npm install grunt-contrib-connect --save-dev2、在gruntfile.js中引入包
grunt.loadNpmTasks('grunt-contrib-connect');3、配置connec任务
// The actual grunt server settings connect: { options: { port: 9000, //服务器的端口号,可用localhost:9000访问 // Change this to '0.0.0.0' to access the server from outside. hostname: 'localhost', //服务器域名 livereload: 35729 //声明给watch监听的端口 }, livereload: { options: { open: true, //true:一直打开链接,不然浏览器只打开一次 middleware: function (connect) { //设置服务器中间件,主要用于获取静态文件,不设置中间件,node服务器是没有输出的,和php或java服务器不同 return [ //不懂中间件的可以去看下node.js serveStatic('.tmp'), //获取tmp目录下的文件 connect().use( '/bower_components', //设置挂载,如果路径中有/bower_components则会执行这个中间件 serveStatic('./bower_components') //获取bower_components下的文件,主要是bower安装的包 ), serveStatic('public') //获取public目录下的文件, ]; //这3个中间件主要是从服务器获取展示html要用的东西,比如html文件,js,css,图片等 } } } },注意在较高版本的grunt-contrib-connect中已经不支持connect.static,需要使用serve-static
4、安装serve-static
cnpm install serve-static --save在gruntfile.js中引入文件,这个serveStatic就是步骤3中的变量。
module.exports = function(grunt) { var serveStatic = require('serve-static'); // Project configuration. grunt.initConfig({5、用watch监视端口
watch: { gruntfile: { files: '<%= jshint.gruntfile.src %>', tasks: ['jshint:gruntfile'] }, lib_test: { files: '<%= jshint.lib_test.src %>', tasks: ['jshint:lib_test', 'qunit'] }, bower: { files: ['bower.json'], tasks: ['wiredep'] }, livereload: { //监听connect端口 options: { livereload: '<%= connect.options.livereload %>' }, files: [ 'public/**/*.html', //html 'public/**/*.css' //css ] } }我这里只设置了public下的html和css变动会通知端口刷新页面
6、设置默认启动任务
grunt.registerTask('default', ['jshint','concat', 'uglify','wiredep', 'connect','watch']);7、输入命令运行grunt
grunt这时你的默认浏览器会打开一个标签,显示你设置的.html文件,更改html或css浏览器会自动刷新。
相关文章推荐
- grunt-contrib-watch 结合 connect-livereload 实现修改文件后,理解刷新页面
- Html页面自动刷新///客户端实现方式——不断发送请求
- html页面自动刷新
- 使用 Grunt 实现页面自动刷新
- 纯HTML自动刷新页面或重定向
- Gulp实现SASS、HTML的监控和自动编译以及页面的自动刷新
- HTML页面自动刷新
- HTML Button自动刷新页面的问题
- html <meta>设置自动刷新或者几秒内跳转到指定页面
- Grunt插件之LiveReload 实现页面自动刷新
- 关于HTML中的页面的自动刷新
- 纯HTML自动刷新页面或重定向
- [转载]Grunt插件之LiveReload 实现页面自动刷新,所见即所得编辑
- 使用Meta自动定时刷新页面及一些HTML标记
- Grunt插件之LiveReload 实现页面自动刷新,所见即所得编辑
- 详解Grunt插件之LiveReload实现页面自动刷新(两种方案)
- 纯HTML自动刷新页面或重定向
- 让html页面自动刷新
- html页面实现自动刷新的几种方法
- 详解Grunt插件之LiveReload实现页面自动刷新(两种方案)