Using grunt to build the front-end HTML development framework based on less

. Install node. js
http://nodejs.org/download/

2. Accelerating NPM Installation
NPM install-g cnpm--registry=http://r.cnpmjs.org
Install the CNPM domestic mirror and replace all NPM commands with CNPM for later execution

3. Installing grunt
NPM install-g GRUNT-CLI

4. Create the configuration file in the project directory Gruntfile.js
In this case, the things that are done include:
A. Combine some less to a file
B. Compiling different versions of CSS with less
c. Populating the HTML template and deploying
D. Listen to the above changes in real time and automatically compile accordingly

<!--code Begin--
Module.exports = function (grunt) {
Grunt.initconfig ({
Pkg:grunt.file.readJSON (' Package.json '),
Concat: {
Options: {
Banner: '/*! [Email protected]<%= pkg.name%>-v<%= pkg.version%>-' +
' <%= grunt.template.today ("YYYY-MM-DD")%> */'
},
Mobileless: {
SRC: [' src/mobile/less/app_common/*.less '],
Dest: ' Src/mobile/less/app.common_grunt.less ',
}
},
Less: {
Development: {
Options: {
Compress:false,
Yuicompress:false
},
Files: {
"Css/app.common.css": "Src/mobile/less/app.common_grunt.less",
"Css/app.web.index.css": "Src/web/less/app.web.index.less"
}
},
Production: {
Options: {
Modifyvars: {
Imagepath_page: '/misc/images/',
ImagePath: '/misc/images/'
},
Compress:true,
Yuicompress:true,
Optimization:2
},
Files: {
"Css/pub/app.common.css": "Src/mobile/less/app.common_grunt.less",
"Css/pub/app.web.index.css": "Src/web/less/app.web.index.less"
}
}
},
Htmlbuild: {
Mobile: {
SRC: ' src/mobile/html/*.html ',
Desc: './',
Options: {
Beautify:true,
Relative:true,
Sections: {
Layout: {
Footbar: ' src/mobile/html/inc/footbar.html '
}
}
}
},
Web: {
SRC: ' src/web/html/*.html ',
Desc: './'
}
},
Watch: {
Options: {
Livereload:true
},
Grunt: {
Files: [' Gruntfile.js ']
},

Styles: {
Files: [
' Src/**/less/*.less ',
' Src/**/less/**/*.less '
],
tasks: [
' Concat:mobileless ',
' Less '
],
Options: {
Nospawn:true
}
},
HTMLS: {
Files: [
' Src/**/html/*.html ',
' Src/**/html/**/*.html '
],
tasks: [
' Htmlbuild '
],
Options: {
Nospawn:true
}
}
}
});

Grunt.loadnpmtasks (' Grunt-contrib-concat ');
Grunt.loadnpmtasks (' grunt-contrib-less ');
Grunt.loadnpmtasks (' Grunt-contrib-watch ');
Grunt.loadnpmtasks (' Grunt-html-build ');

Grunt.registertask (' Default ', [' Watch ']);
};
<!--code End--

5. Establish and configure the Package.json
Run NPM init in the project directory, fill in the various options that appear, or go directly to completion
Open the generated Package.json and add the devdependencies node--If subsequent compilation errors occur, the version number here is not new

<!--code Begin--
{
"Name": "HTML",
"Version": "0.0.0",
"description": "",
"Main": "Gruntfile.js",
"Scripts": {
"Test": "Echo \" Error:no test specified\ "&& exit 1"
},
"Author": "",
"License": "ISC",
"Devdependencies": {
"Grunt": "~0.4.1",
"Grunt-contrib-concat": "~0.4.0",
"Grunt-contrib-less": "~0.11.0",
"Grunt-contrib-watch": "~0.6.1",
"Grunt-html-build": "~0.3.2"
}
}
<!--code End--

6. Install the project dependency package
Run CNPM install under the project directory to download the dependent package package.json->devdependencies under the Node_modules

7. Running Grunt
Execute grunt under the project directory

Using grunt to build the front-end HTML development framework based on less