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 源码