使用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依赖NodeJsnpm,请确保你的计算机已经安装该环境。特别留意下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压缩成功!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值