Grunt构建项目

Grunt

使用Grunt构建kissy项目

什么是Grunt？

创建在Node.js之上，Grunt是一个基于命令行的工具，用于加快工做流程，减小用于生前以前所作的准备。它能够结速工做与自动编译一同进行。基本上，你可使用Grunt的大部分任务来帮你处理你认为乏味的，一般须要手工配置和运行的工做。

Grunt能干些什么？

按任务目标大体可分为四类：

• 文件操做型：好比合并、压缩js和css文件等（包括）
• 预编译型：好比编译less、sass、coffeescript等
• 类库项目构建型：好比 angular、ember、backbone等（这种推荐使用yeoman）
• 工程质量保障型：好比jshint、jasmine、mocha等

除此以外还有像 watch （监听文件改变，自动触发构建）等功能。

安装Grunt

grunt依赖NodeJs和npm，请确保你的计算机已经安装该环境。 特别留意下grunt是有二个版本：服务器端版本（grunt）和客户端版本（grunt-cli），咱们须要安装的是客户端版本。

npm install -g grunt-cli

若是你不慎安装了服务器端版，请现予以卸载：

npm uninstall -g grunt

为了确保Grunt已经正确安装，你能够运行下面的命令：

grunt –version

建立package.json文件

JSON文件使咱们能跟踪和安装咱们全部开发所依赖的信息。而后，对项目工做的人会拥有当前开发依赖性，最终有助于保持同步的开发环境。 在项目的根目录下建立package.json文件。package.json用于配置你须要拉取的grunt插件信息:

{"name":"grunt",// 项目名称"version":"0.1.0",// 项目版本"author":"dawncc",// 项目依赖"devDependencies":{"grunt-kmc":"*",//kmc插件"grunt-contrib-uglify":"~0.2.0"}}

其中devDependencies字段，定义你要拉取的依赖模块，上面的代码，拉取grunt-contrib-uglify插件（用于压缩js），字段的值~0.2.0，指明须要模块的版本号，“~”是至少的意思。同时拉取grunt-kmc的全部插件。

在工程根目录启动命令行工具，运行：

npm install

经过package.json依赖关系将其中定义的插件安装在node_modules目录中。

这个时候，你的项目的根目录下会新增长一个node_modules的目录。

建立Gruntfile.js文件

Gruntfile.js本质上是一个函数，并且他的参数是grunt。它是用于配置或者定义Grunt任务和加载Grunt插件的。

在工程根目录下放个Gruntfile.js，文件内容以下：

module.exports =function(grunt){// 构建任务配置 grunt.initConfig({//读取package.json的内容，造成个json数据 pkg: grunt.file.readJSON('package.json'), uglify:{//文件头部输出信息 options:{ banner:'/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'},//具体任务配置<!-- build:{//源文件 src:'src/index.js',//目标文件 dest:'build/index-min.js'}--> build:{ files:{'build/index-min.js':['src/index.js']}},}});// 加载指定插件任务 grunt.loadNpmTasks('grunt-contrib-uglify');// 默认执行的任务 不定义默认任务会出现 >Task "default" not found. Use --force to continue.  grunt.registerTask('default',['uglify']);};

在根目录下执行grunt命令： “Done,without error”，说明已经构建成功，且没有错误，你能够看到grunt是很是迅速的！ 来看下目录，你就会看到build下出现了hello-grunt-min.js，文件内容以下：

/*! demo 2013-07-13 */!function(a){var b="<p>hello grunt!</p>";a("body").append(b)}(jQuery);

已经使用uglify压缩成功！