開箱即用 - Grunt合並和壓縮 js,css 文件

js,css 文件合並與壓縮

Grunt 是前端自動化構建工具，類似webpack。 它究竟有多強悍，請看它的 介紹。
這里只演示如何用它的皮毛功能：文件合並與壓縮。

首先說下js,css 合並與壓縮的好處：

• 減少 HTTP 請求次數；
• 節省帶寬流量；
• js 壓縮把代碼混淆后可看性降低，帶來一定安全性；

1. 安裝Grunt

Grunt 是運行在 Node.js 平台上，先要 安裝 Node.js, 然后 安裝 Grunt

npm install -g grunt-cli

2. 使用Grunt

兩個關鍵的配置文件：

• Gruntfile.js 是用來配置和定義任務並加載Grunt插件；
• package.json 是 npm 用來配置項目的元數據，如配置文件合並與壓縮依賴的插件；

我們的 DEMO 項目Gruntfile.js 配置文件:

'use strict';

module.exports = function(grunt) {

    // 項目配置
    grunt.initConfig({
        // 加載元數據
        pkg: grunt.file.readJSON('package.json'),
        banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
            '<%= grunt.template.today("yyyy-mm-dd") %>*/\n',
        // 合並任務配置
        concat: {
            options: {
                banner: '<%= banner %>',
                stripBanners: true,
            },
            css: {
              // 源文件，數組，
                src: ['src/css/test1.css', 'src/css/test2.css'],
                // 目標文件, pkg.name 是定義在 package.json 文件中的 name
                dest: 'dest/<%= pkg.name %>.css'
            },
            js: { 
                options: {
                  // js 文件合並用 ';'分隔
                  separator: ';',
                 },
                src: ['src/js/test1.js', 'src/js/test2.js'],
                dest: 'dest/<%= pkg.name %>.js'
            },
        },
        // 壓縮 css 文件
        cssmin: {
            css: {
                src: 'dest/<%= pkg.name %>.css',
                dest: 'dest/<%= pkg.name %>-min.css'
            }
        },
        // 壓縮 js 文件
        uglify: {
            js: {
                src: 'dest/<%= pkg.name %>.js',
                dest: 'dest/<%= pkg.name %>.min.js'
            },
        },
    });

    // These plugins provide necessary tasks.
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');  
    grunt.loadNpmTasks('grunt-css');
    // 指定默認任務.
    grunt.registerTask('default', ['concat','cssmin','uglify']);
};

每個配置的作用和意義，請看上面的注釋，應該很清晰了，注意的是任務的命名不能改： concat, cssmin,uglify, 否則不識別；

package.json 配置

{
  "name": "all",
  "description": "js,css 文件合並與壓縮",
  "version": "0.1.0",
  "homepage": "https://git.oschina.net/grissom/grunt_demo.git",
  "author": "Grissom",
  "repository": {
    "type": "git",
    "url": "https://git.oschina.net/grissom/grunt_demo.git"
  },
  "engines": {
    "node": ">= 0.10.0"
  },
  "devDependencies": {
    "grunt-contrib-concat": "~0.3.0",
    "grunt-contrib-uglify": "~0.2.0",
    "grunt": "~0.4.5",
    "grunt-css":  ">0.0.0"
  },
  "keywords": []
}

3. 執行Grunt

• 打開 Node.js 的命令行窗口；
• 進入到項目的路徑；
• 安裝依賴插件, 執行 npm install 命令；
• 執行合並與壓縮任務 grunt 命令；

Demo 源碼