grunt使用watch和livereload的Gruntfile.js的配置 - diligenceday－IT工程師數位筆記本

文章出處

　　周末在家看angularJS, 用grunt的livereload的自動刷新, 搞了大半天, 現在把配置貼出來, 免得以后忘記了, 只要按照配置一步步弄是沒有問題的;

　　開始的準備的環境安裝是:

　　（1）：nodeJS,去官方網站下載(href);

　　（2）：然后把nodeJS加到全局的環境變量里面去(nodeJS安裝好了就能用npm這個命令了),參考(href);

　　（3）：執行npm install grunt -g 和 npm install -g grunt-cli,一個是安裝服務端的gurnt一個是客戶端的grunt(反正都安裝就好了)，參考(href)

　　第一步：新建一個叫做Gruntfile.js的js文件

module.exports = function (grunt) {
    grunt.initConfig({
        pkg : grunt.file.readJSON('package.json'),
        connect: {
            options: {
                port: 9000,
                hostname: '127.0.0.1', //默認就是這個值，可配置為本機某個 IP，localhost 或域名
                livereload: 35729  //聲明給 watch 監聽的端口
            },
            server: {
                options: {
                    open: true, //自動打開網頁 http://
                    base: [
　　　　　　　　　　　　　　//當前的severHttp服務目錄;
                        "html"
                          //主目錄
                    ]
                }
            }
        },
        watch : {
            options: {
                livereload: 35729 // this port must be same with the connect livereload port
            },
            scripts: {
                options: {
                    livereload: true
                },
　　　　　　　　　　//所有文件發生改變都執行自動reload
                files : ['**/*']
            }
        }
    });
    grunt.registerTask('default',["connect","watch"]);
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-connect');
};

　　2：新建一個package.json的文件, 直接在cmd(命令行)下執行npm install即可把所有的node_module自動下載下來;

{
    "name": "nono",
    "version": "0.0.0",
    "description": "for watch",
    "main": "Gruntfile.js",
    "dependencies": {
    "grunt": "~0.4.5",
        "express": "~3.15.2",
        "grunt-contrib-connect": "~0.6.0",
        "grunt-contrib-watch": "~0.5.3"
},
    "devDependencies": {},
    "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
},
    "repository": {
    "type": "git",
        "url": "sqqihao.github.com"
},
    "keywords": [
    "nono"
],
    "author": "nono",
    "license": "__MIT__"
}