1.准备
1.1 搭建一个用 grunt的前端项目的准备工作,先下载并安装好node.js,安装好后输入“node-v ”查看版本,顺带验证安装成功。
1.2 准备好目录结构:我的如图:
在node.js 中使用命令“npminstall 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 installgrunt-contrib-uglify –save-dev
concat 插件(合并多个文件的代码到一个文件中)
npm installgrunt-contrib-concat –save-dev
watch插件(实时监控文件变化、调用相应的任务重新执行)
npm installgrunt-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 就执行了。
也可以自定义,default 可以换成其他,如若换成a,即命令行:grunt a;
具体的命令如下:
grunt.registerTask('default', ['uglify']);
我的src目录下有一个common.js,grunt时如下:
之后在build下就出现了一个这个文件:
Uglify使用小计(参考推荐):http://www.cnblogs.com/artwl/p/3449303.html
3 完结,其他插件配置类似,不作具体说明.
联系客服