Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
一个前端的Build工具集合
Branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
.npmignore
LICENSE-MIT
README.md
package.json

README.md

grunt-tbf2e

基于Grunt的前端的Build工具集合

关于Grunt的详细使用方法请参考:

下面简单介绍grunt-tbf2e的使用,包含如果安装和配置Grunt并安装grunt-tbf2e作为其插件来打包您的项目。

如何开始

安装Grunt

我们使用nodeJS自带的包管理工具NPM来安装grunt。由于希望能全局进行命令的调用,因此我们添加-g参数:

$ (sudo) npm install grunt -g

注意,对于非windows用户,如果你直接使用npm install grunt -g命令时提示permition denied,那么请在前面添加sudo命令来启用管理员权限。

等待安装完毕后,我们在控制台中验证是否安装成功:

$ grunt --version

如果正确输出了版本,比如grunt v0.3.17,那么说明安装成功了。如果你想了解更多关于grunt命令的使用,推荐使用grunt --help查看。

注意

如果你是windows用户,请特别注意,你需要使用grunt.cmd来代替grunt来执行grunt命令,比如查看grunt帮助,windows用户需要在CMD中输入:

$ grunt.cmd --help

安装grunt-tbf2e

Grunt非常棒,但是有一点不够方便的是,所有的插件都必须安装在项目目录中,而不能像grunt本身一样安装在全局来发挥作用(或许以后会改进这一点^_^)。

因此,要在你的项目中使用grunt-tbf2e,你需要在控制台中cd到你的项目目录(或者说是你希望你的grunt配置文件出现的地方,或者是你希望执行打包操作的目录)。

比如我有一个项目的结构如下,并且我希望将配置文件放置在项目目录的根目录中:

    path/to/project/app
                    ├ build
                    ├ source
                            ├ js
                            ├ css                         

于是我在控制台中cd path/to/project/app,到达项目目录根目录中。OK,接下来我们安装grunt-tbf2e到当前目录:

$ npm install grunt-f2e

注意到没有使用参数-g,这样才能讲模块安装到当前目录下!经过一段等待后npm会告诉你安装成功,这时候你再查看目录,你会发现多了一个node_modules目录(对nodeJS很熟悉的朋友请跳过这块啰嗦的说明^_^),目录如下:

    path/to/project/app
                    ├ node_modules
                            ├ grunt-tbf2e
                    ├ build
                    ├ source
                            ├ js
                            ├ css                         

说明grunt-tbf2e安装完成。

配置我们的grunt.js

grunt很强大,但是它并不知道我们的项目中哪些文件需要压缩,哪些文件需要打包,所有我们需要编写一个grunt.js来告诉它做哪些事情,添加一个grunt.js在当前目录下:

    path/to/project/app
                    ├ node_modules
                            ├ grunt-tbf2e
                    ├ build
                    ├ source
                            ├ js
                            ├ css 
                    ├ grunt.js                    

grunt.js如何编写呢?要想把所有细节说清楚需要写几篇文章!已经厌烦了大堆的文字说明了?好吧,作为程序员,你肯定在心中大喊:show me the code! Fine!!!直接上代码:

/*global module:false*/
module.exports = function (grunt) {

    grunt.initConfig({

        meta:{
            /* 发布版本号 */
            publish: 20120925
        },
        watch:{
            ksp:{
                files:['source/js/**' ],
                tasks:['ksp:dev', 'base-build' ]
            },
            compass:{
                files:['source/sass/**'],
                tasks:['compass:dev', 'compass:release' ]
            }
        },
        // 对base.js进行压缩
        min: {
            base: {
                src: ['source/js/common/base.js'],
                dest: 'release/<%= meta.publish %>/js/base-min.js'
            }
        },
        // 复制base.js到release目录
        copy: {
            base: {
                files: {
                    'release/<%= meta.publish %>/js/': 'source/js/common/base.js'
                }
            }
        },
        // SASS -> CSS
        compass: {
            dev: {
                src: 'source/sass/',
                dest: 'source/css'
            },
            release: {
                src: 'source/sass/',
                dest: 'release/<%= meta.publish %>/css'
            }
        },
        ksp:{
            dev:{
                "name":"v2",
                "pub":'<config:meta.publish>',
                "main":[
                    "source/js/msg_center.js",
                    "source/js/list.js"
                ],
                "output":"release/{{pub}}/js/{{filename}}.js",
                "compress":'-min',
                "unicode":true,
                "wrapConfig":true
            }
        }
    });

    grunt.loadNpmTasks('grunt-tbf2e');

    // Build 先对js文件进行打包,然后对sass进行编译,并赋值css到release文件夹下
    grunt.registerTask('default', 'ksp compass base-build');

    // 对base.js的压缩 已经复制
    grunt.registerTask('base-build', 'copy:base min:base');

};

上面就是我前一个项目的配置文件,可以看到里面做了很多事情,比如文件的copy,压缩min,JS文件的打包ksp,动态样式文件的编译compass,甚至你还看到我使用了一些变量定义<config:meta:publish>。对,相信聪明的你肯定能猜到这些配置的含义,但是我还是要简单地啰嗦两句:

  • 我们通过initConfig来配置任务,这些配置过的任务不一定被执行
  • 我们通过grunt.loadNpmTasks('grunt-tbf2e');来告诉grunt我们需要使用grunt-tbf2e这个插件
  • 我们通过grunt.registerTask来定义和组合任务

比如:

grunt.registerTask('default', 'ksp compass base-build');

定义了default方法,也就是如果我们在控制台中直接输入:

$ grunt

它默认会执行的方法。

base-build的定义,则使得我们可以通过在控制台中:

$ grunt base-build

来依次执行copy:base min:base两个任务。在这里简单地说明下copy:base的意思:执行copy任务中的一个子任务base

注意到initConfig方法中,copy部分的定义下面有个base了吧?或许你会以为这个base有特殊的含义,其实它只是我随便取的一个子任务的名字,你可以根据自己的喜好定义多个子任务,比如:


grunt.initConfig({

    copy: {
        taskOne: {
        },
        taskTwo: {
        }
    }
});

注意,不是所有的功能,都支持多任务配置,具体要参考各个任务的具体说明和文档哦~

包含的插件

除了grunt的内置组件:

  • concat - Concatenate files.
  • init - Generate project scaffolding from a predefined template.
  • lint - Validate files with [JSHint][jshint].
  • min - Minify files with [UglifyJS][uglify].
  • qunit - Run [QUnit][qunit] unit tests in a headless [PhantomJS][phantom] instance.
  • server - Start a static web server.
  • test - Run unit tests with [nodeunit][nodeunit].
  • watch - Run predefined tasks whenever watched files change.

以外,tbf2e提供了以下额外组件:

copy

复制文件到制定目录.

less

将LESS文件编译为CSS.

compass

在你的项目中使用Compass(SASS)

mincss

对CSS文件进行压缩.

ksp

对遵循KISSY 1.2 的包规范的脚本文件进行打包

License

Copyright (c) 2012 neekey
Licensed under the MIT license.

Something went wrong with that request. Please try again.