首页 > 代码库 > 页面livereload width grunt

页面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中配置

           

 1 { 2     "name": "test_connect", 3     "version": "0.0.1", 4     "devDependencies": 5  6    { 7         "grunt-contrib-connect": "~0.6.0", 8         "grunt-contrib-watch": "~0.5.3", 9         "load-grunt-tasks": "~0.3.0"10     }11 }

 

step-5  在Gruntfile.js 中配置

 1 module.exports = function(grunt){ 2  3   require(‘load-grunt-tasks‘)(grunt); //加载所有的任务 4   //require(‘time-grunt‘)(grunt); 如果要使用 time-grunt 插件 5  6   grunt.initConfig({ 7     connect: { 8       options: { 9         port: 9000,10         hostname: ‘192.168.22.100‘, //默认就是这个值,可配置为本机某个 IP,localhost 或域名11         livereload: 35729  //声明给 watch 监听的端口12       },13 14       server: {15         options: {16           open: true, //自动打开网页 http://17           base: [18             ‘build/‘  //主目录19           ]20         }21       }22     },23 24     watch: {25       livereload: {26         options: {27           livereload: ‘<%=connect.options.livereload%>‘  //监听前面声明的端口  3572928         },29 30         files: [  //下面文件的改变就会实时刷新网页31build/*.html‘,32build/css/{,*/}*.css‘,33build/js/{,*/}*.js‘34         ]35       }36     }37   });38 39   grunt.registerTask(‘serve‘, [40     ‘connect:server‘,41     ‘watch‘42   ]);43 }

 

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

页面livereload width grunt