Grunt合并压缩JS CSS教程：从零配置Gruntfile.js

Grunt环境准备与前置知识

在开始具体操作前，需掌握以下基础知识：

1、Node.js的安装及命令行基本操作

2、Node.js环境下应用的安装方法

3、对Grunt构建工具的基本认知

本文默认读者已具备上述知识背景。

接下来进入具体实施环节：

JavaScript文件合并与压缩配置

任务1：合并src目录下的所有Zepto及其插件代码，并进行压缩处理。


--src/
  ajax.js
  assets.js
  callbacks.js
  data.js
  deferred.js
  detect.js
  event.js
  form.js
  fx.js
  fx_methods.js
  gesture.js
  ie.js
  ios3.js
  selector.js
  stack.js
  touch.js
  zepto.js

项目目录结构如下：


dist/
node_modules/
src/
Gruntfile.js
package.json
package.json是依赖库文件
Gruntfile.js是执行步骤程序

一、JavaScript文件的合并与压缩

首次使用前需安装Grunt命令行工具。运行命令 npm install -g grunt-cli 进行全局安装。若环境中已存在该工具，则跳过此步骤。

1. package.json配置文件


{
 "name": "demo",
 "file": "zepto",
 "version": "0.1.0",
 "description": "demo",
 "license": "MIT",
 "devDependencies": {
  "grunt": "~0.4.1",
  "grunt-contrib-jshint": "~0.6.3",
  "grunt-contrib-concat": "~0.5.0",
  "grunt-contrib-uglify": "~0.2.1",
  "grunt-contrib-requirejs": "~0.4.1",
  "grunt-contrib-copy": "~0.4.1",
  "grunt-contrib-clean": "~0.5.0",
  "grunt-strip": "~0.2.1"
 },
 "dependencies": {
  "express": "3.x"
 }
}

2. Gruntfile.js任务配置文件


module.exports = function (grunt) {
 grunt.initConfig({
 concat: {
  options: {
  },
  dist: {
   src: ['src/**/*.js'],//src文件夹下包括子文件夹下的所有文件
   dest: 'dist/built.js'//合并文件在dist下名为built.js的文件
  }
 },
 uglify: {
   build: {
    src: 'dist/built.js',//压缩源文件是之前合并的buildt.js文件
    dest: 'dist/built.min.js'//压缩文件为built.min.js
   }
  }
});
 grunt.loadNpmTasks('grunt-contrib-uglify');
 grunt.loadNpmTasks('grunt-contrib-concat');
 grunt.registerTask('default', ['concat','uglify']);
}

具体执行流程如下：

(1) 安装项目依赖：若依赖已就绪可忽略。运行 npm install 命令，系统会自动将所需依赖库下载至node_modules目录。

(2) 执行合并与压缩任务：运行 grunt 命令。


>grunt
Running "concat:dist" (concat) task
File dist/built.js created.
Running "uglify:build" (uglify) task
File "dist/built.min.js" created.
Done, without errors.

执行完毕后，dist目录中将生成处理后的文件。


built.js
built.min.js

CSS文件合并与压缩配置

任务2：合并src/css目录下的所有CSS样式文件，并进行压缩。

二、CSS文件的合并与压缩

需额外安装grunt-css插件。执行 npm install grunt-css 完成安装，插件将下载至 node_modules/grunt-css 目录。若已安装则无需重复操作。

1、package.json配置与前述JS任务保持一致；

2、Gruntfile.js配置如下：


module.exports = function (grunt) {
 grunt.initConfig({
 concat: {//css文件合并
  css: {
   src: ['src/css/*.css'],//当前grunt项目中路径下的src/css目录下的所有css文件
   dest: 'dist/all.css' //生成到grunt项目路径下的dist文件夹下为all.css
  }
 },
 cssmin: { //css文件压缩
   css: {
    src: 'dist/all.css',//将之前的all.css
    dest: 'dist/all.min.css' //压缩
   }
  }
});
grunt.loadNpmTasks('grunt-css');
grunt.loadNpmTasks('grunt-contrib-concat');
 grunt.registerTask('default', ['concat','cssmin']);
}

参考资料：

1、Grunt中文网

http://www.gruntjs.net/getting-started

以上介绍了使用Grunt合并压缩JS和CSS文件的具体方法，希望能为读者提供实用帮助。如有疑问欢迎留言，小编将及时回复。感谢对本站的支持！

使用Grunt合并与压缩JS和CSS文件的操作指南

Grunt环境准备与前置知识

JavaScript文件合并与压缩配置

CSS文件合并与压缩配置

实用工具推荐