开箱即用 - 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 源码