频道导航

使用grunt合并压缩js和css文件的方法

2019-01-07 JavaScript 前端之家

前端之家收集整理的这篇文章主要介绍了使用grunt合并压缩js和css文件的方法，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

@H_4030@

需要了解的知识：

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

@H4030@2、nodejs安装应用

@H4030@3、grunt的初步了解

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

@H4030@好，我们继续：

@H403_0@

任务1：将src目录下的所有zepto及插件合并，并压缩。

<div class="jb51code">
<pre class="brush:js;">
--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

@H_403_0@

目录结构：

文件 Gruntfile.js是执行步骤程序

@H_403_0@

一、js合并压缩

@H_403_0@第一次需要先安装grunt。执行 npm install -g grunt-cli 进行安装。如果已经安装，可以忽略。

@H_403_0@

1.package.json文件

@H_403_0@

2.Gruntfile.js

文件夹下包括子文件夹下的所有文件 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']); }

@H_403_0@

执行步骤：

@H_403_0@(1)安装依赖，已安装可以忽略： npm install 。将会下载依赖的文件到node_modules目录。

@H_403_0@(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.

@H_403_0@将会在dist目录生成

@H_403_0@

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

@H_403_0@

二、对CSS进行合并压缩

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

@H_403_0@1、package.json同上；

@H_403_0@2、Gruntfile.js如下：

文件合并 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','cssmin']); }

@H_403_0@