Grunt.js 上手

Official Site gruntjs.org/docs/getting-started.html

或者看http://tgideas.qq.com/webplat/info/news_version3/804/808/811/m579/201307/216460.shtml

grunt可以帮我们做什么
grunt是一个自动化工具 自动压缩js css 建立相关的文件&文件夹

首先grunt需要运行在NodeJS的环境下
安装Grunt之前，可以在命令行中运行node -v查看你的Node.js版本
node环境(>0.8.0)

node环境包括npm包管理工具
npm是一个Node.js的包管理器，运行在命令行下，用于管理应用的依赖 (更通俗点 你可以通过它来安装 删除东西)

安装grunt CLI 也就是grunt命令行工具
npm install -g grunt-cli
安装结束后，会告知安装的位置
比如/usr/local/lib/node_modules/grunt-cli、

npm install -g grunt-cli这条命令将会把grunt命令植入到你的系统路径中，这样就允许你从任意目录来运行它(定位到任意目录运行grunt命令)。

如果没有 就自己手动将npm install -g grunt-cli运行后提示的安装位置添加到环境变量中

如何使用？
在命令行中使用grunt xxx命令 即可执行预先设置好的工作(预先设定的工作保存在Gruntfile.js中)
PS 此命令没有安装grunt 它只是安装了全局可用的命令行工具

PS 使用npm install grunt --save-dev命令安装grunt 不过首先你需要在Node的命令行中cd到你想安装的位置中

该命令执行完之后呢 就会在指定目录下有node_modules文件夹

配置
Gruntfile.js本身会读同目录下的package.json
所以实际上配置有两个文件 json主要是项目信息
而Gruntfile.js存放的是自动化的工作设置

package.json可以通过npm init自动生成(推荐)
记住name项的内容就行 其他随意填
关于entry js 暂时不清楚
这是的json结果(去掉了不是必需的东西)

{
  "name": "protest1",
  "version": "0.1.0",
  "dependencies": {
    "grunt-contrib-uglify": "^0.2.7",
    "grunt": "^0.4.4"
}

当然可以直接抄官方文档中的内容 只不过关于各个依赖的版本我们不清楚 所以依靠init命令生成最好

安装grunt
npm install grunt --save-dev
完成后会更改package.json
查看一下 发现多出了这个
"devDependencies": {
"grunt": "^0.4.4"
}

安装uglify  (一个grunt工具  你可以把grunt理解为一个平台 上面有很多小工具)

npm install grunt-contrib-uglify --save-dev

关于Gruntfile.js
一个简单的例子

module.exports = function(grunt){
 
    // 项目配置
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        uglify: {
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            build: {
                src: 'src/<%=pkg.name %>.js',
                dest: 'build/<%= pkg.name %>.min.js'
            }
        }
    });
 
    // 加载提供"uglify"任务的插件
    grunt.loadNpmTasks('grunt-contrib-uglify');
 
    // 默认任务
    grunt.registerTask('default', ['uglify']);
}

pkg这个变量中的key就是json文件中的key 在uglify中 设置了需要被压缩的源文件路径、以及输出的路径
其中输出的文件名前半部分就是在json中定义的名字

运行
假如name我设置为test1
name这个配置就会读src目录下的test1.js并压缩输出到build目录中