Grunt是什么
grunt是基于nodejs的 前端工程构建工具。一位牛人的话“前端80%是工程问题，20%是技术问题”，grunt就为了解决前端开发的工程问题的。
官网站点：http://gruntjs.com/
使用前提
- 安装nodejs 环境
下载与系统对应的安装文件，window下下载Windows Installer (.msi)。
双击安装，一路next就可以了。安装后在cmd里运行：node –v 检查是否安装成功。如果有问题，查看环境变量path中是否有nodejs的安装路径配置。
2. 了解npm
Npm是一个NodeJS包管理和分发工具，他提供了nodejs插件的依赖管理。
官网：https://npmjs.org
现在npm已经集成在nodejs的安装包，不需要单独安装了。
常用npm命令：
npm install xxx 安装模块
npm install xxx -g 将模块安装到全局环境中
npm ls 查看安装的模块及依赖
npm ls -g 查看全局安装的模块及依赖
npm uninstall xxx (-g) 卸载模块
npm cache clean 清理缓存
构建基于grunt的前端开发工程
基于grunt构建的前端工程能做很多事情，常见的有： 文件压缩，文件合并，less文件编译，sass文件编译，coffeeScript文件的编译等。具体见：http://gruntjs.com/
在grunt官网站点的get start中可以看到如果一步一步构建一个grunt工程。
安装grunt：
npm install -g grunt-cli
grunt 工程中主要的两个文件介绍：
package.json 配置工程中依赖的所有grunt 插件
例如：
{ "name": "grunDemo", "version": "0.1.0", "dependencies": {}, "devDependencies": { "grunt": "*", "grunt-contrib-coffee": "~0.7.0", "grunt-contrib-watch": "~0.3.1", "grunt-contrib-uglify": "*", "grunt-contrib-concat": "~0.1.3", "grunt-contrib-cssmin": "~0.4.2", "grunt-contrib-clean": "~0.4.1", "grunt-contrib-copy": "~0.4.1", "grunt-contrib-less": "~0.7.0" } }
如果工程中已经存在此文件，只需运行以下命令就可在相应的目录下面下载grunt的插件。
npm install
如果package.json中还没有配置相应插件，安装时可以添加以下参数自动将插件配置到package.json文件。
npm install XXX --save-dev
Gruntfile.js 工程任务定义和运行控制文件。
module.exports = function (grunt) {
grunt.file.defaultEncoding = 'utf-8';
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
//清空已经build的文件
clean: {
build: {
src: ["./build/**/*"],
filter:"isFile"
}
},
//coffee文件编译路径配置
coffee: {
compile: {
options: {
bare: true
},
expand: true,
cwd: './src/javascripts',
src: ['**/*.coffee'],
dest : "./build/javascripts",
ext : '.js',
flatten : false
}
},
//复制文件
copy: {
main: {
expand : true,
cwd : './src/javascripts/',
src : ["**/*.js"],
dest : "./build/javascripts"
}
},
//scss 文件编译配置
compass: {
compile: {
options: {
sassDir : "./src/stylesheets",
cssDir : "./build/stylesheets",
debugInfo : false,
noLineComments : true,
outputStyle : 'compressed'
}
}
},
//编译less文件
less: {
compile: {
options: {
paths: ['./build/stylesheets']
},
files: {
'./build/stylesheets/indexLess.css': ['./src/stylesheets/index.less']
}
}
},
//合并文件
concat: {
options: {
separator: ';'
},
array: {
files: {
"./build/javascripts/concatIndex.js": ['./src/javascripts/concat/a.js','./src/javascripts/concat/b.js']
}
}
},
//js压缩
uglify: {
codegen: {
options: {
preserveComments: false,
//compress: true
// 用于将utf-8编码的文件转换为ascii编码，以防止js脚本在gbk页面上出错
//alternative，为用到的utf-8编码文件设置 charset='utf-8'
beautify:{
ascii_only:true
}
},
files: [
{
dest : "./build/javascripts/index-min.js",
src : ['./build/javascripts/index.js','./build/javascripts/concatIndex.js']
}
]
}
},
//css压缩
cssmin: {
//css: {
// expand: true,
// src: '**/*.css',
// ext: "-min.css",
// cwd: "./build/stylesheets/",
// dest: "./build/stylesheets/"
//}
css: {
files: [
{
dest: "./build/stylesheets/index-min.css",
src: "./build/stylesheets/index.css"
},
{
dest: "./build/stylesheets/indexLess-min.css",
src: "./build/stylesheets/indexLess.css"
}
]
}
},
//监控任务
watch: {
compass: {
files: ["src/stylesheets/**/*.scss"],
tasks: ["compass:compile", "cssmin:css"]
},
coffee: {
files: ["./src/javascripts/**/*.coffee"],
tasks: ["coffee","uglify"]
}
}
});
//加载grunt模块
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-coffee');
grunt.registerTask('default', ["clean", "coffee", "concat", "uglify", "less", "compass", "cssmin"]);
};
sass环境配置
demo工程中有sass相关编译和配置，所以这里也说下sass环境的配置
1、安装ruby。在这里下载ruby安装包安装就可以。https://www.ruby-lang.org/zh_cn/ 或者 http://rubyinstaller.org/
2、安装compass。http://www.ruanyifeng.com/blog/2012/11/compass.html
运行：
gem install compass
问题：
gem update --system
编译sass文件报 invalid charset GBK, 在环境变量配置 ： rubyopt="-Ku"
demo下载地址：http://pan.baidu.com/s/1nBGLU