页面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