Grunt 构建网站初探
一直在钻研关于 Umbraco 的东西， 打算换换脑子，玩点别的东西先。
Grunt 是之前两个项目中，尝试开始使用的东西，因为不是专职的前端攻城狮，所以对于这类东西还是知之甚少，不过经过这两次的使用，真心觉得这种东西非常的便利，选择了对的工具，很多工作都可是事半功倍的。
具体 Grunt 是什么，请自行前往官网了解。中文版网站，近期不知为何不能访问了，www.gruntjs.net，看起来不是被墙的原因，似乎是服务除了什么故障。
How to started，根据官网的指南一步步做下来即可。之前一直在用 mac，给同事 Windows 安装时确实也遇到了一点问题，在此仅给出 Windows平台安装的的一点建议。
1、不必使用类似于 n 或者 nvm 一类的 node 版本管理工具进行安装，这在某些集团企业中，设置权限是非常麻烦的事情；
2、直接下载 nodejs 官网的 for windows 安装包下载 node，安装好之后，运行：
npm install -g grunt grunt-cli grunt-init
*以上分别是安装 grunt、grunt 命令行工具，init 是一个 grunt 插件，可以初始化基本的 grunt 文件结构。
3、安装好后，一定记得设置 windows 环境变量，将 Grunt 安装的目录，配置到系统 PATH 路径中去，否则当你关闭 dos 窗口再开启，则会提示找不到 Grunt 命令，而你再次安装又会提示报错。
Grunt 结构中，有两个最为重要的结构性描述文件：package.json、Gruntfile.js，前者实际也是 node 项目的标配，后者是 Grunt 独有的构建文件。
package.json 文件：
{
"name": "grunt_templete",
"version": "1.0.0",
"description": "基础的Grunt项目模板",
"license": "MIT",
"repository": {
"type": "git",
"url": "https://git.oschina.net/xxxx"
},
"devDependencies": {
"grunt": "^1.0.1",
"grunt-contrib-clean": "^1.1.0",
"grunt-contrib-concat": "^1.0.1",
"grunt-contrib-copy": "^1.0.0",
"grunt-contrib-cssmin": "^2.2.0",
"grunt-contrib-htmlmin": "^2.3.0",
"grunt-contrib-jshint": "^1.1.0",
"grunt-contrib-less": "^1.4.1",
"grunt-contrib-uglify": "^3.0.1",
"grunt-contrib-watch": "^1.0.0"
}
}
*其中，关于依赖包的版本号，是需要权衡考虑的，如果项目时间较长，可能会不定期的更新 package.json，导致团队间共享要小心该文件的管理，还是改为固定版本较好；如果是短期项目，则可是使用"^"来自动更新至最新版本。
Gruntfile.js 文件：
module.exports = function(grunt) {
grunt.file.defaultEncoding = 'utf-8';
/**project configuration*/
grunt.initConfig({
pkg : grunt.file.readJSON('package.json'),
clean: {
contents: ['dest/*'],
subfolders: ['dest/*/'],
css: ['dest/assets/css/*'],
js: ['dest/assets/js/*'],
cleantemp:['dest/assets/css/temp']
},
less: {
default: {
files: [{
expand: true,
cwd: 'src/less',
src: ['*.less'],
dest: 'dest/assets/css/temp',
ext: '.css'
}]
}
},
cssmin: {
default:{
files: [{
expand: true,
cwd: 'dest/assets/css/temp',
src: ['*.css'],
dest: 'dest/assets/css/',
ext: '.min.css'
}]
}
},
jshint:{
options:{
expr:true,
lastsemic : true,
scripturl:true,
ignores : ['dealer-*.js']
},
beforeuglify:['Gruntfile.js', 'src/js/*.js'],
afteruglify:['dest/assets/js/*.js', '!dest/assets/js/dealer.min.js']
},
uglify:{
buildall: {
files: [{
expand:true,
cwd: 'src/js',
src:'*.js',//所有js文件
dest: 'dest/assets/js',//输出到此目录下
ext: '.min.js'
}]
},
},
copy: {
main: {
expand: true,
nonull: true,
cwd: 'src/html',
src: '**',
dest: 'dest/',
options: {
}
},
resources: {
expand: true,
nonull: true,
cwd: 'src/images',
src: '**',
dest: 'dest/assets/images',
}
},
watch: {
css: {
files: ['src/less/*.less'],
tasks: ['less', 'cssmin', 'clean:cleantemp'],
options: {
interrupt: true,
spawn: false
}
},
js: {
files: ['src/js/*.js'],
tasks: ['jshint:beforeuglify', 'uglify', 'jshint:afteruglify'],
options: {
interrupt: true,
spawn: false
}
},
resources: {
files: ['src/html/*', 'src/html/**/*', 'src/images/*', 'src/images/**/*'],
tasks: ['copy'],
options: {
interrupt: true,
spawn: false,
event: ['all'],
}
}
}
});
/**load tasks package*/
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-jshint');/**语法检查**/
grunt.loadNpmTasks('grunt-contrib-uglify');/**js 压缩**/
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['clean', 'less', 'cssmin', 'jshint:beforeuglify', 'uglify', 'jshint:afteruglify', 'clean:cleantemp', 'copy', 'watch']);
};
*这是我目前比较常用的基本包，包含了文件清理、less 编译、css 压缩、 js语法检查（分压缩前和压缩后）、压缩、html 以及其他资源文件的复制、文件变动的检测。每次运行 Grunt 命令之后，即可专注于前端的工作，不必再去考虑 js 语法、css 格式等问题，复制文件路径等。如果语法错误，命令行中会有醒目的提示；如果无误，修改后即可在浏览器中直接查看。
so easy！！！
所有的组件及使用方法，均可在官方插件库（https://gruntjs.com/plugins）找到，这里也不再赘述谁都在讲的内容了。
对于工具的态度，我一直是点到即止，不求甚解，使用时先让它动起来，遇到问题，需要研究再认真钻研。
