{
"name": "xxx",
"version": "0.0.1",
"author": "xxx",
"devDependencies": {
"grunt": "~0.4.4",
"load-grunt-tasks": "~0.4.0",
"grunt-contrib-uglify": "~0.5.1",
"grunt-contrib-cssmin": "~0.10.0"
}
}
2. Gruntfile.Js
module.exports = function (grunt) {
// 构建任务配置
grunt.initConfig({
//读取package.json的内容，形成json数据
pkg: grunt.file.readJSON('package.json'),
// 压缩所有js并生成source map
uglify: {
my_target: {
options: {
sourceMap: true
},
files: [
// 可以直接作用于文件夹下所有文件
{
expand: true,
cwd: 'app/js',
// 排除.min的文件
src: ['*.js', '!*.min.js'],
// 输出和输入在同一目录
dest: 'app/js',
ext: '.min.js'
},
// 也可以指明具体一一对应的文件
{
// core
'core/jsCompare.min.js': 'core/jsCompare.js',
'core/jsHelper.min.js': 'core/jsHelper.js',
'core/jsShare.min.js': 'core/jsShare.js',
// dijia
'app/dijia/dijia.min.js': 'app/dijia/dijia.js',
'app/dijia/location.min.js': 'app/dijia/location.js'
}
]
}
},
// 压缩所有css
cssmin: {
minify: {
expand: true,
cwd: 'resources/css/',
src: ['**/*.css', '**/!*.min.css'],
dest: 'resources/css/',
ext: '.min.css'
}
}
})
// 加载指定插件任务
grunt.loadNpmTasks('grunt-contrib-cssmin')
grunt.loadNpmTasks('grunt-contrib-uglify')
// 默认执行的任务
grunt.registerTask('default', ['uglify', 'cssmin'])
}
安装1
要想使用grunt，首先必须将grunt-cli安装到全局环境中，打开控制台（注意：windows系统下请使用管理员权限打开），输入：
npm install -g grunt-cli
注意，mac os 系统、部分linux系统中，在这句话的前面加上“sudo ”指令。
2
回车，命令行会出现一个转动的小横线，表示正在联网加载。加载的时间看你网速的快慢，不过这个软件比较小，一般加载时间不会很长，稍一会儿，就加载完了。你会看到以下界面。
3
要验证一下grunt-cli是否安装完成并生效，你只需要继续在命令行中输入
“grunt”命令即可。如果生效，则会出现以下结果：
-- 可能不一样 --
END
创建一个简单的网站
1
首先，我在电脑的D盘下面建了一个“grunt_test”文件夹，里面建了三个空文件夹、两个空文档，名称如下图。（注意 Gruntfile.js 文件的首字母大写！）
devDependencies是什么意思？字面意思解释是“开发依赖项”，即我们现在这个系统，将会依赖于哪些工具来开发
2
先把package.json这个文件写一些东西
{ "name": "my", "version": "1.0.0", "devDependencies": {
}
3
接下来我们会有一系列插件的安装，他们的安装过程和grunt一样。但是他们的执行都是基于grunt的，因此才能把grunt叫做一个“构建工具”。
4
注意，这里安装grunt不再是全局安装了，需要你在控制台进入到网站或系统的具体目录下。这里我们进入 D:\grunt_test 目录下。然后输入以下命令。
5
应该第一时间打开package.json去看看，那里的“devDependencies”有什么变化。我这里的变化如下图，看看你的是不是和我的一样
然后你再看看文档目录中的文件或者文件夹有什么变化？我这里多了一个“node_modules”文件夹，其中有一个“grunt”文件夹，再其中有若干文档。这里就是存储grunt源文件的地方。
6
在控制台运行“grunt”命令。如果你得到一个warning提示，那说明grunt已经起作用了。
END
配置Gruntfile.js
1
Gruntfile.js 这个文件，肯定是为了grunt做某种配置的。按照grunt的规定，我们首先把Gruntfile.js配置成如下格式
END
Grunt插件
Contrib-jshint——javascript语法错误检查；
Contrib-uglify——压缩javascript代码
Contrib-cssmin——压缩css代码
Contrib-watch——实时监控文件变化、调用相应的任务重新执行；
Contrib-clean——清空文件、文件夹；
Contrib-copy——复制文件、文件夹
Contrib-concat——合并多个文件的代码到一个文件中
使用uglify插件（压缩javascript代码）。
安装uglify插件的方式，和安装grunt是一样的。还记得grunt是怎么安装的吗？
我们在现有的“src”文件夹中新建一个“test.js”，并随便写一些代码。显然，我们无法通过双手和键盘写出压缩后的代码。
第一步，在grunt.initConfig方法中配置 uglify 的配置参数
uglify:
{target: {files: [{expand: true,
cwd: 'src',src: ['*.js', '!*.min.js'],ext:
'.min.js'}]}}
)}
grunt.loadNpmTasks('grunt-contrib-uglify')grunt.loadNpmTasks('grunt-contrib-cssmin')grunt.registerTask('default',
['uglify', 'cssmin'])//使用grunt命令执行
以上说的这三步已经OK了，接下来我们去试试。在控制台中运行grunt命令，
控制台将输入如下信息：
现在好像没有 -- without errors --
如果你在专业点的话就会理解，其实你要删除的东西是不能删的，它为后期的维护人员修改的时候能更方便的找到，功能跟个书签差不多，但是你一定要删除呢，对你的文档是完全没有影响的， 现在一个DIV+css后台维护人员都会去注释的，因为注释太重要，当你去后台修改东西，然后没有一点注释，遍布都是英文代码的时候，你一定会体会到有个注释，或者有个提示改多好啊 ，你要删除的注释就能有这个功能，所以最好不要删除！
