配置grunt進行css、js的檢查、合並和壓縮

現在會進行代碼的合並和壓縮已成為前端人員的必備知識，那么現在來介紹一個grunt的工具。grunt是個風靡世界的工具，它的首頁是  http://www.gruntjs.net

這是個中文網站，有文檔可以參考。

好了，廢話不多說，直接發安裝步驟和注意事項。

首先，要安裝nodejs，grunt是依賴node滴。上 www.nodejs.org上下載適合你電腦的nodejs版本。

當安裝好node.js以后，在命令行中輸入

 node -v

 

把 npm也安裝上，npm為一個NodeJS的模塊管理

同樣，在命令行中輸入 ,如果出現版本號，就說明安裝成功了。

 

ok,nodejs已經安裝好了，在下載安裝grunt之前，我們需要建立一個文件目錄樹，像下面的結構，目的是為了更好的層次關系和更便利的操作

 

Gruntfile.js是我們自己定義的，這個文件用來配置grunt

package.json這個文件是記錄下載哪些插件，並配置在Gruntfile.js中，這個后面會詳細介紹

src文件夾里面放的是一個css文件夾，一個js文件夾，css文件夾里面放的是演示的css文件，js文件夾里放的是演示用js文件。

dist 文件夾是放壓縮以后的css和js文件

lib文件夾里放html文件

 

完整的文件結構如下：(grunt安裝之前是沒有這個文件夾的)

那package.json里面放什么呢？對了，放咱們配置項，剛開始，如果你用的編輯器沒有這么智能的話，只能把下面的內容敲到文件中。

 

 

ok,萬事俱備了，開始下載grunt命令行!

grunt命令行（CLI） 安裝在全局環境下，所以命令是這么寫！

npm install -g grunt-cli

 注意，mac os 系統、部分linux系統中，在這句話的前面加上“sudo ”指令。

當安裝完了以后，進入我們建立的哪個grunt_test文件夾

cd grunt/grunt_test

 

這時，就可以安裝grunt了輸入:

npm install grunt  --save-dev

 

出現了一個node_modules文件夾。大家打開看看就知道里面是什么了。這充分表明grunt已經安裝成功。

之前我們沒有說過指令中得--save-dev是什么意思

這句話是與package.json這個文件有關的。

這時再看這個文件

偶？自動把grunt的版本號加上啦。對啦，這就是--save-dev的作用。

這時，在src下面的css和js中各建一個concat文件夾，用於存儲合並后的文件

現在還需要幾個插件：js、css文件鏈接成一個文件的插件、壓縮的插件、錯誤檢查的插件

安裝方法一樣

npm install grunt-contrib-concat --save-dev

回車安裝，完成后安裝下一個，依次類推

npm install grunt-contrib-csslint --save-dev

npm install grunt-contrib-cssmin --save-dev

npm install grunt-contrib-jshint --save-dev

npm install grunt-contrib-uglify --save-dev

npm install grunt-contrib-watch --save-dev

當我們把這些插件都裝完后，我們再看package.json

所有的插件的版本號都有了。下一步，需要對Gruntfile.js 進行配置

module.exports = function(grunt){
    //初始化grunt 配置
    grunt.initConfig({

        //獲取package.json的信息
        pkg: grunt.file.readJSON('package.json'),
        //concat插件的配置信息
        concat: {
            options:{
                stripBanners:true, //合並時允許輸出頭部信息
                banner:'/*!<%= pkg.name %> - <%= pkg.version %>-'+'<%=grunt.template.today("yyyy-mm-dd") %> */'
            },
            cssConcat:{
                src:['src/css/css1.css','src/css/css2.css'],
                dest:'src/css/concat/<%= pkg.name %> - <%= pkg.version %>.css' //dest 是目的地輸出
            },
            jsConcat:{
                src:'src/js/*.js',
                dest:'src/js/concat/<%=pkg.name %> - <%= pkg.version %>.js'
            }
        },
        //壓縮css
        cssmin:{
            options:{
                stripBanners:true, //合並時允許輸出頭部信息
                banner:'/*!<%= pkg.name %> - <%= pkg.version %>-'+'<%=grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            build:{
                src:'src/css/concat/<%=pkg.name %> - <%=pkg.version %>.css',//壓縮是要壓縮合並了的
                dest:'dist/css/<%= pkg.name %> - <%= pkg.version %>.min.css' //dest 是目的地輸出
            }
        },
        //壓縮js
        uglify:{
            options:{
                stripBanners:true, //合並時允許輸出頭部信息
                banner:'/*!<%= pkg.name %> - <%= pkg.version %>-'+'<%=grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            build:{
                src:'src/js/concat/<%=pkg.name %> - <%=pkg.version %>.js',//壓縮是要壓縮合並了的
                dest:'dist/js/<%= pkg.name %> - <%= pkg.version %>.min.js' //dest 是目的地輸出
            }
        },

        jshint:{
            options:{
                jshintrc:'.jshint'
            },
            build:['Gruntfile.js','src/js/*js']
        },

        csslint:{
            options:{
                csslintrc:'.csslint'
            },
            build:['src/css/*.css']

        },
        //watch自動化
        watch:{
            build:{
                files:['src/js/*.js','src/css/*.css'],
                tasks:['jshint','csslint','concat','cssmin','uglify'],
                options:{spawn:false}
            }
        }

    });
    //告訴grunt我們將使用插件
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-csslint');
    grunt.loadNpmTasks('grunt-contrib-watch');
    //告訴grunt當我們在終端輸入grunt時需要做些什么
    grunt.registerInitTask('default',['jshint','csslint','concat','cssmin','uglify','watch']);//先進行語法檢查，如果沒有問題，再合並，再壓縮
};

 

上面的注釋都寫的很清楚了，照着這個復制到你得Gruntfile.js里就可以了。

正式壓縮前的最后一步：新建兩個文件，寫入內容，這兩個文件是用於css和js代碼檢查的配置的。大家有興趣可以從網上查查，這里就不多說了，大家用我這個就沒有問題。一個是.csslint  ,一個是.jshint 

注意這兩個文件是.開頭的，具體為什么現在還沒來得及研究，文件是text格式的,跟Gruntfile是同一級的。

.csslint文件的配置：

{
    "adjoining-classes":false, "box-sizing":false, "box-model" : false, "compatible-vendor-prefixes": false, "floats":false, "font-sizes":false, "gradients":false, "important":false, "known-properties":false, "outline-none":false, "qualified-headings":false, "regex-selectors":false, "shorthand":false, "text-indent":false, "unique-headings":false, "universal-selector":false, "unqualified-attributes":false }

.jshint文件配置

{
    "boss":false, "curly":true, "eqeqeq":true, "expr":true, "immed":true, "newcap":true, "noempty":true, "noarg":true, "undef":true, "regexp":true, "browser":true, "devel":true, "node":true }

最終最終最終的樹結構：

這時，所有的配置都完成了，我們可以進行代碼的檢查、合並、壓縮了~~~

大家在js文件里，css文件里隨便寫點內容，看看能不能合並壓縮成功？

命令是 

grunt

然后回車。

這時，你會發現，世界就在你腳下！又會了一項技能，心里那種成就感是無法言表的。大家加油！