gruntJs篇之connect+watch自动刷新

首页 > 代码库 > gruntJs篇之connect+watch自动刷新

gruntJs篇之connect+watch自动刷新

2024-08-03 04:50:42 219人阅读

grunt很强大，可以帮我我们解决很多繁琐的操作，虽然刚接触不久，但依然感受到其强大之处，这篇记录一下通过grunt.js实现事实刷新页面，

省去了编码 -> 保存 -> F5..F5..F5..F5...n多个F5操作。

首先看下项目目录：

然后来看package.json配置：

1 {2     "name":"grunt-connect",3     "version":"0.1.0",4     "devDependencies":{5         "grunt":"~0.4.1",6         "grunt-contrib-connect":"~0.6.0",7         "grunt-contrib-watch":"~0.5.3"8     }9 }

这里只用到两个，connect+watch。因为平时写小东西用不到WebStorm等那些的大家伙，sublime就很好用了，所以，为了自动刷新，用connect配置一个server.具体根据个人需要删减，然后通过watch实时监听文件变化，以此达到实时刷新的效果。

然后到对应目录下执行：npm install 完成插件的安装

来看Gruntfile.js配置代码：

 1 module.exports = function(grunt) { 2     // 项目配置(任务配置) 3     grunt.initConfig({ 4         pkg: grunt.file.readJSON(‘package.json‘), 5         // 通过connect配置一个server 6         connect:{ 7             server:{ 8                 options:{ 9                     // 设置端口号10                     port:9009,11                     hostname:‘localhost‘,12                     livereload:true13                 }14             }15         },16         // 通过watch实时监听代码变化17         watch: {18             client: {19                 //监听的文件20                 files: [‘view/*‘, ‘css/*‘, ‘js/*‘, ‘images/**/*‘],21                 options: {22                     livereload: true23                 }24             }25         }26     });27  28     // 加载插件29     grunt.loadNpmTasks(‘grunt-contrib-connect‘);30     grunt.loadNpmTasks(‘grunt-contrib-watch‘);31  32     // 自定义任务33     grunt.registerTask(‘default‘, [‘connect‘,‘watch‘]);34  35 };