頁面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%>'  //監聽前面聲明的端口  35729
28         },
29 
30         files: [  //下面文件的改變就會實時刷新網頁
31           'build/*.html',
32           'build/css/{,*/}*.css',
33           'build/js/{,*/}*.js'
34         ]
35       }
36     }
37   });
38 
39   grunt.registerTask('serve', [
40     'connect:server',
41     'watch'
42   ]);
43 }

 

step-6. 打開cmd, 執行 grunt serve