如何用grunt壓縮併合 js/css

1 使用前提： grunt是基於node 環境，因此必須先搭建node環境（這裏不作詳細介紹本身查）

2 入門介紹：

先安裝grunt npm install -g grunt-cli

文件介紹 ：package.json是依賴庫文件 Gruntfile.js是執行步驟程序
package.json放在根目錄下，它包含了該項目的一些元信息，如項目名稱、描述、版本號，插件等。

{
"name": "hlcc",
"version": "v0.1.0",
"devDependencies": {

"grunt": "~0.4.5",
"grunt-contrib-jshint": "~0.10.0",
"grunt-contrib-nodeunit": "~0.4.1",
"grunt-contrib-uglify": "~0.5.0",
"grunt-contrib-concat": "~0.5.1",
"grunt-contrib-cssmin": "~0.12.3",
"grunt-htmlhint": "~0.9.2"

}
}

grunt-contrib-jshint（js語法檢查）、grunt-contrib-concat（js合併）、grunt-contrib-uglify（採用UglifyJS壓縮js）、grunt-contrib-cssmin（Css壓縮合並）、grunt-htmlhint（html語法驗查）

咱們配置好package.json 文件後執行 npm install 便可安裝這些插件了。

插件安裝完成後，查看根目錄，會發現node_modules目錄，包含了相應的插件目錄。

3 測試
新建Gruntfile.js
咱們須要先建立一些文件夾，並將須要壓縮的js、css 文件放入對應的文件夾裏面（看下面代碼裏說明），注意須要給 這些文件可寫的權限。 通常執行 chmod -R 777 assets dest js ，便可。

module.exports = function(grunt) {
grunt.initConfig({

pkg: grunt.file.readJSON('package.json'),
 concat: {
     options: {
         separator: ';',
         stripBanners: true
     },
     dist: {
         src: [
             "js/config.js",
             "js/smeite.js",
             "js/index.js"
         ],
         dest: "assets/js/default.js"
     }
 },
 uglify: {
     options: {
     },
     dist: {
         files: {
             'assets/js/default.min.js': 'assets/js/default.js'
         }
     }
 },
 cssmin: {
     options: {
         keepSpecialComments: 0
     },
     compress: {
         files: {
             'assets/css/default.css': [
                 "css/global.css",
                 "css/pops.css",
                 "css/index.css"
             ]
         }
     }
 }

});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.registerTask('default', ['concat', 'uglify', 'cssmin']);
}；

也能夠單獨壓縮js和css，不進行合併，例如：

module.exports = function (grunt) {

// 構建任務配置
grunt.initConfig({

    //讀取package.json的內容，造成個json數據
    pkg: grunt.file.readJSON('package.json'),

    //壓縮js
    uglify: {
        //文件頭部輸出信息
        options: {
            banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
        },
        my_target: {
            files: [
                {
                    expand: true,
                    //相對路徑
                    cwd: 'js/',
                    src: '*.js',
                   //src: ['**/*.js', '!**/*.min.js'],  //不包含某個js,某個文件夾下的js
                    dest: 'dest/js/',
                    rename: function (dest, src) {  
                              var folder = src.substring(0, src.lastIndexOf('/'));  
                              var filename = src.substring(src.lastIndexOf('/'), src.length);  
                              //  var filename=src;  
                              filename = filename.substring(0, filename.lastIndexOf('.'));  
                              var fileresult=dest + folder + filename + '.min.js';  
                              grunt.log.writeln("現處理文件："+src+"  處理後文件："+fileresult);  

                              return fileresult;  
                              //return  filename + '.min.js';  
                          } 
                }
            ]
        }
    },

    //壓縮css
    cssmin: {
        //文件頭部輸出信息
        options: {
            banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n',
            //美化代碼
            beautify: {
                //中文ascii化，很是有用！防止中文亂碼的神配置
                ascii_only: true
            }
        },
        my_target: {
            files: [
                {
                    expand: true,
                    //相對路徑
                    cwd: 'css/',
                    src: '*.css',
                    dest: 'dest/css/',
                    rename: function (dest, src) {  
                            var folder = src.substring(0, src.lastIndexOf('/'));  
                            var filename = src.substring(src.lastIndexOf('/'), src.length);  
                            //  var filename=src;  
                            filename = filename.substring(0, filename.lastIndexOf('.'));  
                            var fileresult=dest + folder + filename + '.min.css';  
                            grunt.log.writeln("現處理文件："+src+"  處理後文件："+fileresult);  

                            return fileresult;  
                          //return  filename + '.min.js';
                            }
                }
            ]
        }
    }

});

// 加載指定插件任務
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');

// 默認執行的任務
grunt.registerTask('default', ['uglify', 'cssmin']);

};

注：一些參數的含義：
expand：若是設爲true，就表示下面文件名的佔位符（即*號）都要擴展成具體的文件名。

cwd：須要處理的文件（input）所在的目錄。

src：表示須要處理的文件。若是採用數組形式，數組的每一項就是一個文件名，能夠使用通配符。

dest：表示處理後的文件名或所在目錄。

ext：表示處理後的文件後綴名。

進入到項目根目錄 執行 grunt 就會按Gruntfile配置的文件進行壓縮合並

也能夠單獨執行 例執行js壓縮命令：grunt uglify

css壓縮命令 grunt cssmin

若有疑問聯繫 1343948033@qq .com