引用：使用grunt 压缩 合并js、css文件

引用:https://www.jianshu.com/p/08c7babdec65

压缩 js 文件

1、创建一个目录 名为grunt

 

目录.png

2、在grunt目录下创建一个 src目录，存放我们要压缩、合并的js文件。

 

图片.png

3、创建package.json文件

 

文件.png

• package.json文件，包含了项目的一些信息，如项目的名称、描述、版本号、依赖包等。
  package.json文件中的内容如下：

{
        "name": "grunt", "file": "zepto", "version": "0.1.0", "description": "demo", "devDependencies": { "grunt": "~0.4.0"， "grunt-contrib-requirejs": "~0.4.1", } } 

执行命令 npm install 下载相关文件，成功后在下载压缩js文件所需要的grunt-contrib-uglify插件，并更新package.json文件。

 

js压缩插件安装.png

安装成功后package.json文件内容如下：

{
  "name": "grunt", "file": "zepto", "version": "0.1.0", "description": "demo", "license": "MIT", "devDependencies": { "grunt": "~0.4.1", "grunt-contrib-requirejs": "~0.4.1", "grunt-contrib-uglify": "^3.0.1" //js压缩插件 } } 

4、创建Gruntfile.js 文件

Gruntfile.js 文件就是一个普通的js文件，几乎所有的任务都定义在该文件中。
Gruntfile.js 文件内容如下：

module.exports = function (grunt) { // 项目配置 grunt.initConfig({ //grunt.file.readJSON 将我们的配置文件读出，并且转换为json对象 pkg: grunt.file.readJSON('package.json'), uglify: { options: { // 压缩输出头信息 banner: '/*! <%= pkg.file %> <%= grunt.template.today("yyyy-mm-dd") %> */\n' }, build: { src: 'src/<%=pkg.file %>.js', //压缩src文件夹下的xxx.js文件为xxx.min.js 并放到dest文件夹。 dest: 'dest/<%= pkg.file %>.min.js' } } }); // 加载提供"uglify"任务的插件 grunt.loadNpmTasks('grunt-contrib-uglify'); // 默认任务 grunt.registerTask('default', ['uglify']); } 

4、执行grunt任务

 

压缩执行结果.png

在dest文件中就生成了zepto.min.js文件，如果没有 dest文件会自动创建一个dest文件夹。

 

图片.png

整个目录结构如下：

 

图片.png

合并 js 文件

合并js依赖于 "grunt-contrib-concat"插件，下载grunt-contrib-concat插件并更新package.json文件。

{
       "name": "grunt", "file": "zepto", "version": "0.1.0", "description": "demo", "devDependencies": { "grunt": "~0.4.0", "grunt-contrib-requirejs": "~0.4.1", "grunt-contrib-concat": "~0.1.1" //合并文件 "grunt-contrib-uglify": "~0.1.2", //压缩，采用UglifyJs } } 

Gruntfile.js 内容修改如下：

module.exports = function (grunt) { // 项目配置 grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), concat: { options: { separator: ';' }, dist: { //合并三个 js 到 libs.js 文件 src: ['src/zepto.js', 'src/underscore.js', 'src/backbone.js'], dest: 'dest/libs.js' } } }); grunt.loadNpmTasks('grunt-contrib-concat'); // 默认任务 grunt.registerTask('default', ['concat']); } 

生成的 libs.js文件

 

合并.png

整个目录结构：

 

图片.png

合并 并压缩js 文件

Gruntfile.js文件内容如下：

module.exports = function (grunt) { // 项目配置 grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), //合并js concat: { dist: { src: ['src/zepto.js', 'src/underscore.js', 'src/backbone.js'], dest: 'dest/libs.js' } }, //压缩合并后的js文件 uglify: { build: { src: 'dest/libs.js', dest: 'dest/libs.min.js' } } }); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-concat'); // 默认任务 grunt.registerTask('default', ['concat', 'uglify']); } 

 

合并 压缩.png

压缩css 文件

首先要安装插件 grunt-contrib-cssmin，并更新package.json文件。

 

插件安装.png

package.json文件内容更新如下

{
  "name": "grunt", "file": "zepto", "version": "0.1.0", "description": "demo", "license": "MIT", "devDependencies": { "grunt": "~0.4.1", "grunt-contrib-requirejs": "~0.4.1", "grunt-contrib-concat": "~0.1.1", "grunt-contrib-cssmin": "^2.2.0", "grunt-contrib-uglify": "~0.2.1", }, "dependencies": { "cssmin": "^0.4.3", "express": "3.x" } } 

Gruntfile.js文件内容：

module.exports = function (grunt) { // 项目配置 grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), cssmin:{ options:{ stripBanners:true, //合并时允许输出头部信息 banner:'/*!<%= pkg.file %> - <%= pkg.version %>-'+'<%=grunt.template.today("yyyy-mm-dd") %> */\n' }, build:{ src:'src/css/index.css',//压缩 dest:'dest/css/index.min.css' //dest 是目的地输出 } } }); grunt.loadNpmTasks('grunt-contrib-cssmin'); // 默认任务 grunt.registerTask('default', ['cssmin']); } 

执行命令 grunt

 

图片.png

结果生成index.min.css

 

压缩.png

合并css 文件

合并css文件用的插件是grunt-contrib-concat，上面已经安装过了，直接看Gruntfile.js中的代码。

module.exports = function (grunt) { // 项目配置 grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), concat: { options: { separator: ';' }, cssConcat: { src: ['src/css/zepto.css', 'src/css/underscore.css', 'src/css/backbone.css'], dest: 'dest/css/libs.css' } }, }); grunt.loadNpmTasks('grunt-contrib-concat'); // 默认任务 grunt.registerTask('default', ['concat']); } 

执行grunt命令，结果生成libs.css文件

 

合并.png

合并js、css文件并压缩文件

package.json文件

{
  "name": "grunt", "file": "zepto", "version": "0.1.0", "description": "demo", "license": "MIT", "devDependencies": { "grunt": "~0.4.1", "grunt-contrib-concat": "~0.1.1", //合并js css 插件 "grunt-contrib-cssmin": "^2.2.0", //压缩css插件 "grunt-contrib-uglify": "~0.2.1", //压缩js插件 "grunt-contrib-jshint": "~0.6.3", "grunt-contrib-requirejs": "~0.4.1", "grunt-strip": "~0.2.1" }, "dependencies": { "cssmin": "^0.4.3", "express": "3.x" } } 

Gruntfile.js文件：

module.exports = function (grunt) { // 项目配置 grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), concat: { options: { separator: ';' }, //合并css cssConcat: { src: ['src/css/zepto.css', 'src/css/underscore.css', 'src/css/backbone.css'], dest: 'dest/css/libs.css' }, //合并js jsConcat:{ src:['src/zepto.js','src/underscore.js','src/backbone.js'], dest:'dest/libs.js' } }, //压缩css cssmin:{ options:{ stripBanners:true, //合并时允许输出头部信息 banner:'/*!<%= pkg.file %> - <%= pkg.version %>-'+'<%=grunt.template.today("yyyy-mm-dd") %> */\n' }, build:{ src:'dest/css/libs.css',//压缩 dest:'dest/css/libs.min.css' //dest 是目的地输出 } }, //压缩js uglify: { build: { src: 'dest/libs.js', dest: 'dest/libs.min.js' } } }); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-cssmin'); // 默认任务 grunt.registerTask('default', ['concat','uglify','cssmin']); } 

执行命令grunt，结果

 

图片.png

作者：赵碧菡
链接：https://www.jianshu.com/p/08c7babdec65
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。