引用：使用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
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
