|
1.准备 1.1 搭建一个用 grunt的前端项目的准备工作，先下载并安装好node.js，安装好后输入“node-v ”查看版本，顺带验证安装成功。 1.2 准备好目录结构：我的如图：  1.3 安装grunt-cli
在node.js 中使用命令“npm
install grunt-cli -g”, Npm install 是node.js 的安装 -g 是安装到全局环境中。
1.4.准备好package.json文件 手动准备： { "name": "grunt", "version": "0.1.0", "author": "yzd", "devDependencies": { "grunt": "^0.4.5", "grunt-browser-sync":
"^2.2.0", "grunt-contrib-compass":
"~0.6.0", "grunt-contrib-jshint":
"~0.6.3", "grunt-contrib-uglify":
"^2.0.0", "grunt-contrib-watch":
"~0.5.3" } }
或者通过npm init命令自动创建一个基本的package.json文件。 1.5在目录下在新建一个Gruntfile.js的文件
2.项目构建 2.1
为项目安装grunt. 进入到项目所在盘符，命令行：npm install grunt –svae-dev. “—save-dev”的意思是，在当前目录安装grunt的同时，顺便把grunt保存为这个目录的开发依赖项.就是package.json的插件配置。在单独为需要的插件逐个安装，如： uglify插件（压缩javascript代码） npm install
grunt-contrib-uglify –save-dev concat 插件(合并多个文件的代码到一个文件中) npm install
grunt-contrib-concat –save-dev watch插件（实时监控文件变化、调用相应的任务重新执行） npm install
grunt-contrib-watch –save-dev 都安装好后，将得到目录1.4所示的样子。还有另一种方式：直接拷贝目录1.4的文件到自己项目的package.json.再到自己的node.Js命令窗口执行：npm install.也可以安装完成。
2.2 Gruntfile.js 文件配置：
如图所示：我在initConfig下配置自己的插件信息，具体怎么配置缘由还不清楚，均为网上查找copy. 先拿uglify来说：网上配置的信息很多，不是全部能看懂，先拿看懂的简单的一种来说：
options: {
banner: '/*! <%= pkg.name %> <%=
grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
src: 'src/Common.js',
dest: 'build/<%= pkg.name %>-<%= pkg.version %>.min.js'
build:不是固定名， src是js的的路径 dest:生成的文件名
2.3 配置完成后，还需要加载，来告诉grunt使用了什么插件。 grunt.loadNpmTasks(‘grunt-contrib-uglify’);
2.4执行 加载也好了，需要执行了，默认的是default,就是命令行输入grunt 就执行了。
具体的命令如下： grunt.registerTask('default', ['uglify']);
我的src目录下有一个common.js，grunt时如下：
之后在build下就出现了一个这个文件：
Uglify使用小计（参考推荐）：http://www.cnblogs.com/artwl/p/3449303.html 3 完结，其他插件配置类似，不作具体说明. |
|
|
