页面livereload width grunt

step-1.   安装node 环境

step-2.  npm  install grunt-cli  \ grunt

http://www.gruntjs.net/docs/getting-started/

step-3.  创建静态页面文件夹

step-4.  在package.json中配置

 {
     "name": "test_connect",
     "version": "0.0.1",
     "devDependencies":

    {
         "grunt-contrib-connect": "~0.6.0",
         "grunt-contrib-watch": "~0.5.3",
         "load-grunt-tasks": "~0.3.0"
     }
 }

step-5  在Gruntfile.js 中配置

 module.exports = function(grunt){

   require('load-grunt-tasks')(grunt); //加载所有的任务
   //require('time-grunt')(grunt); 如果要使用 time-grunt 插件

   grunt.initConfig({
     connect: {
       options: {
         port: 9000,
         hostname: '192.168.22.100', //默认就是这个值，可配置为本机某个 IP，localhost 或域名
         livereload: 35729  //声明给 watch 监听的端口
       },

       server: {
         options: {
           open: true, //自动打开网页 http://
           base: [
             'build/'  //主目录
           ]
         }
       }
     },

     watch: {
       livereload: {
         options: {
           livereload: '<%=connect.options.livereload%>'  //监听前面声明的端口  35729
         },

         files: [  //下面文件的改变就会实时刷新网页
           'build/*.html',
           'build/css/{,*/}*.css',
           'build/js/{,*/}*.js'
         ]
       }
     }
   });

   grunt.registerTask('serve', [
     'connect:server',
     'watch'
   ]);
 }

step-6. 打开cmd, 执行 grunt serve