簡單使用grunt、bower工具合併壓縮js和css

    前段時間由於項目中的報表寫了一個Jquery插件，開源到github上，參考以往大神們寫的插件的姿式，決定搞了像模像樣一點。言歸正傳。前端工程師對這些工具：Node,bower,grunt,npm這些工具應該都很熟悉。今天就簡單介紹一下grunt的用法。

grunt的介紹及安裝請看着：getting-started，中文文檔，寫的也比較詳細。

一個完整grunt項目小包含如下模塊或配置文件

• npm:node的包管理器，管理（安裝）相關插件
• grunt-cli:執行grunt任務的工具，可是注意安裝了grunt-cli並不意味着安裝了grunt，由於grunt是具體包含在項目中的，npm會更具package.json中的插件信息自動下載到grunt項目目錄，一般包含在node_modules目錄中。
• package.json:插件及項目配置信息文件。
• Gruntfile.js grunt任務的定義配置文件。

定義 一個簡單的Gruntfile.js：

module.exports = function (grunt) {


    grunt.initConfig({

        // 從自定義的json配置文件讀取信息，方便後面應引用
        pkg: grunt.file.readJSON("example.jquery.json"),

        // 引用上面讀出來的信息定義一個版權信息頭，其實就是用變量拼接一段字符串，後面合併壓縮的時候就可使用這個版權信息
        meta: {
            banner: "/*\n" +
            " *  <%= pkg.title || pkg.name %> - v<%= pkg.version %>\n" +
            " *  <%= pkg.description %>\n" +
            " *  <%= pkg.homepage %>\n" +
            " *\n" +
            " *  Made by <%= pkg.author.name %>/<%= pkg.author.email %>\n" +
            " *  Under <%= pkg.licenses[0].type %> License\n" +
            " */\n"
        },

        // 定義一個合併js的任務和一個合併css，只不過這裏只有一個js文件和一個css文件，只是簡單的拷貝並加上版權信息頭
        concat: {
            dist: {
                src: ["src/jquery.example.js"],
                dest: "dist/jquery.example.js"
            },
            css: {
                src: ["src/jquery.example.css"],
                dest: "dist/jquery.example.css"
            },
            options: {
                banner: "<%= meta.banner %>"
            }
        },

        // 定義一個js語法檢查的任務
        jshint: {
            files: ["src/jquery.example.js"],
            options: {
                jshintrc: ".jshintrc"
            }
        },

        // 定義一個壓縮js的任務，並加上版權信息在頭部
        uglify: {
            my_target: {
                src: ["dist/jquery.example.js"],
                dest: "dist/jquery.example.min.js"
            },
            options: {
                banner: "<%= meta.banner %>"
            }
        },
        // 定義一個壓縮css的任務，並加上版權信息在頭部
        cssmin: {
            css: {
                src: ['src/jquery.example.css'],
                dest: 'dist/jquery.example.min.css'
            },
            options: {
                banner: "<%= meta.banner %>"
            }
        }

    });

    require('load-grunt-tasks')(grunt);
    grunt.registerTask("default", ["jshint", "concat", "uglify", "cssmin"]);

};

 然執行以下命令：

#將命令行的當前目錄轉到項目的根目錄下。
#執行npm install命令安裝項目依賴的庫。
#執行 grunt 命令。

npm install
grunt

 

下面簡單介紹一下bower

bower是一個前端包管理工具，功能相似於LInux的yum,MacBook中的brew,只不過管理的包或軟件類型不同。安裝bower工具聚義參照官網說明。今天要說的是如何把本身github上的包上傳到bower庫進行管理。其實也很簡單，就是register命令：

 $bower register mypackage https://github.com/mygithub/mypackage
 Package example registered successfully!

上傳好了會有相關的提示信息，好了以後你就可使用如下命令來查看上傳的包的信息了：

$bower info  example

而後使用下面的命令來安裝包：

$bower install example --save

若是想把上傳的包刪了從新上傳，使用如下命令：

$bower unregister example

unregister是要認證的，須要使用GitHub的密碼進行身份驗證。
詳細的使用方法請使用--help參數來查看。

$bower register --help
$bower unregister --help

使用以上方法，最近寫了個jQuery的小插件，請你們多多關照，GitHub地址：https://github.com/zealzhangz/jquery-dropdown-checkboxes