如何使用grunt合并压缩js和css文件

这篇文章将为大家详细讲解有关如何使用grunt合并压缩js和css文件，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

需要了解的知识：

1、nodejs的安装与命令行使用

2、nodejs安装应用

3、grunt的初步了解

本文已假定读者已经熟悉以上知识。

好，我们继续：

任务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是执行步骤程序

一、js合并压缩

第一次需要先安装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

任务2：将src/css目录下的所有css文件合并，并压缩。

二、对CSS进行合并压缩

需要安装grunt-css。执行 npm install grunt-css 安装。安装成功，下载到 node_modules/grunt-css 。如果已经安装，可以忽略。

1、package.json同上；

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']); }

关于“如何使用grunt合并压缩js和css文件”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。