Grunt的配置及使用（压缩合并js/css）

来源：互联网发布：淘宝差评小二介入编辑：程序博客网时间：2024/05/17 07:49

简介

Q：Grunt为何物？

A：一个专为JavaScript提供的构建工具。

Q：啥是构建工具？

A：在项目部署上线前，通常要将源文件压缩，合并，并拷贝到bch或trunk中。在将js模块化后，又多了一个分析，提取业务代码中所依赖模块的工作。解决这一系列繁重工作的自动化工具，称之为构建工具。

Q：grunt是如何工作的？

A：刚刚接触grunt，举个例子可能不太恰当，但应该可以让你先比较准确的认识她。就好像一个万能工厂（grunt），只负责执行任务（Task），不关心每个任务到底都干了什么。这些任务比如：

clean:删除临时文件
uglify:压缩
qunit:测试
concat:合并

任务流程可能是这样的：

task:clean
task:uglify
task:qunit
task:concat

安装

前提是你已经安装了nodejs和npm。你可以在 nodejs.org 下载安装包安装，也可以通过包管理器（比如在 Mac 上用 homebrew，同时推荐在 Mac 上用 homebrew）。

安装grunt CLI

npm install -g grunt-cli

按照官方的说法，grunt-cli只是为了在同一台机器上安装不同的grunt版本，那么咱们先不去管他。

在项目中使用grunt

首先需要往项目里添加两个文件：package.json和Gruntfile.js

package.json:该文件用来为npm存放项目配置的元数据，与grunt关系最大的配置在devDependencies中。

{    "name": "cyjs",    "version": "0.1.0",    "description": "js for k68.org",    "homepage": "http://www.k68.org/",    "author": "firebaby",    "devDependencies": {      "grunt": "~0.4.1",      "grunt-contrib-jshint": "~0.3.0",      "grunt-contrib-concat": "~0.1.1",      "grunt-contrib-uglify": "~0.1.2",      "grunt-contrib-cssmin": "~0.5.0",      "grunt-htmlhint": "~0.9.2"    }}

Gruntfile.js:注意G的大写，这个文件就是grunt的配置了，其中详细定义了每个任务的细节和执行任务的顺序等。

一、安装grunt

在命令行进入项目所在目录，键入如下命令即可，npm会根据devDependencies中的配置，将需要的grunt及其插件下载到你的项目目录中。

npm install grunt --save-dev

grunt-contrib-jshint（js语法检查）、grunt-contrib-concat（js合并）、grunt-contrib-uglify（采用UglifyJS压缩js）、grunt-contrib-cssmin（Css压缩合并）、grunt-htmlhint（html语法验查），以上都是常用的插件。

更多插件，请访问：http://gruntjs.com/plugins

在项目目录下安装插件也可采用如下方式安装：
安装：uglify

npm install grunt-contrib-uglify

安装：cssmin

npm install grunt-contrib-cssmin

插件安装完成后，查看根目录，会发现node_modules目录，包含了相应的插件目录。

二、新建Gruntfile.js

Gruntfile.js由以下内容组成
1、wrapper函数，结构如下，这是Node.js的典型写法，使用exports公开API

 module.exports = function(grunt) {      // Do grunt-related things in here    };

2、项目和任务配置

3、载入grunt插件和任务

4、定制执行任务

例：

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"                 ]             }         }     }  });   //载入concat和uglify插件，分别对于合并和压缩  grunt.loadNpmTasks('grunt-contrib-concat');  grunt.loadNpmTasks('grunt-contrib-uglify');  grunt.loadNpmTasks('grunt-contrib-cssmin');   //注册任务  grunt.registerTask('default', ['concat', 'uglify', 'cssmin']);}

grunt api文档：http://gruntjs.com/api/grunt

三、命令行执行grunt任务

进入到项目根目录，敲：

grunt

就会按Gruntfile配置的文件进行压缩合并。

也可以单独执行，例执行js压缩命令：

grunt uglify

css压缩命令

 grunt cssmin

0 0