Grunt configuration with watch and Livereload gruntfile.js

At the weekend at home to see Angularjs, with grunt of the Livereload automatic refresh, make the most of the day, now put the configuration affixed out, lest later forget, as long as the configuration step by step to get is no problem;

The start of the prepared environment installation is:

(1): NodeJS, go to the official website download (href);

(2): Then add the Nodejs to the Global environment variable inside (Nodejs installed can use NPM this command), reference (href);

(3): Perform NPM install grunt-g and NPM install-g grunt-cli, one is to install the server side of the Gurnt one is the client's grunt (all installed anyway), reference (href)

　　

The first step: Create a new JS file called Gruntfile.js

Module.exports =function(Grunt) {Grunt.initconfig ({Pkg:grunt.file.readJSON (' Package.json '), connect: {options: {port:9000, hostname:' 127.0.0.1 ',//The default is this value, can be configured as a native ip,localhost or domain namelivereload:35729//the port declared to watch monitoring}, Server: {options: {open:true,//automatically open Web page/HTTP /Base: [
Current directory of Severhttp services; "HTML"//Home Directory]}}, watch: {options: {li Vereload:35729//This port must is same with the Connect Livereload port}, scripts: {options: {livereload :true                },
All file changes are performed automatically reload files: [‘**/*‘]            }        }    }); Grunt.registertask (' Default ', [Connect ', ' watch ']); Grunt.loadnpmtasks (' Grunt-contrib-watch '); Grunt.loadnpmtasks (' Grunt-contrib-connect ');};

　　

2: Create a new Package.json file, execute npm install directly under cmd (command line) to download all the node_module automatically;

{    "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__"}

　　

OK, now in the current directory execution grunt, Grunt will automatically monitor all the changes in the file, when your file changes, you 127.0.0.1 open all the HTML file will be automatically refreshed;

;

Grunt configuration with watch and Livereload gruntfile.js