炫意html5
最早CSS3和HTML5移动技术网站之一

前端js和css的压缩合并之grunt

关于css和js压缩和合并的方法,记得我在前端面试题目中有写道。方法很多,今天主要介绍grunt方法。

使用前提

grunt是基于node的,要在你电脑上使用grunt,电脑上必须已安装node环境。具体node环境的安装和搭建。centos请看,windows安装相对简单,下载安装包安装就可以了。关于mac的安装,后面有时间在详细介绍。

新建package.json

package.json放在根目录下,它包含了该项目的一些元信息,如项目名称、描述、版本号,插件等。

{
"name": "xyhtml5.com",
"version": "v0.1.0",
"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-jshint": "~0.10.0",
"grunt-contrib-nodeunit": "~0.4.1",
"grunt-contrib-uglify": "~0.5.0",
"grunt-contrib-concat": "~0.5.1",
"grunt-contrib-cssmin": "~0.12.3",
"grunt-htmlhint": "~0.9.2"
}
}

grunt-contrib-jshint(js语法检查)、grunt-contrib-concat(js合并)、grunt-contrib-uglify(采用UglifyJS压缩js)、grunt-contrib-cssmin(Css压缩合并)、grunt-htmlhint(html语法验查),以上都是常用的插件。

更多插件,请访问:http://gruntjs.com/plugins

插件安装

安装:uglify

npm install grunt-contrib-uglify

安装concat

npm install grunt-contrib-concat

安装:cssmin

npm install grunt-contrib-cssmin

插件安装完成后,查看根目录,会发现node_modules目录,包含了相应的插件目录。

新建Gruntfile.js

Gruntfile.js由以下内容组成

1、wrapper函数,结构如下,这是Node.js的典型写法,使用exports公开API

   module.exports = function(grunt) {
// Do grunt-related things in here
};

2、项目和任务配置

3、载入grunt插件和任务

4、定制执行任务

例如:

 module.exports = function(grunt) {
//配置参数
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
separator: ';',
stripBanners: true
},
dist: {
src: [
"js/config.js",
"js/smeite.js",
"js/index.js"
],
dest: "assets/js/default.js"
}
},
uglify: {
options: {
},
dist: {
files: {
'assets/js/default.min.js': 'assets/js/default.js'
}
}
},
cssmin: {
options: {
keepSpecialComments: 0
},
compress: {
files: {
'assets/css/default.css': [
"css/global.css",
"css/pops.css",
"css/index.css"
]
}
}
}
});
//载入concat和uglify插件,分别对于合并和压缩
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
//注册任务
grunt.registerTask('default', ['concat', 'uglify', 'cssmin']);
}

也可以单独压缩js和css,不进行合并,例如:

module.exports = function (grunt) {
// 构建任务配置
grunt.initConfig({
//读取package.json的内容,形成个json数据
pkg: grunt.file.readJSON('package.json'),
//压缩js
uglify: {
//文件头部输出信息
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
my_target: {
files: [
{
expand: true,
//相对路径
cwd: 'js/',
src: '*.js',
//src: ['**/*.js', '!**/*.min.js'],  //不包含某个js,某个文件夹下的js
dest: 'dest/js/',
rename: function (dest, src) {
var folder = src.substring(0, src.lastIndexOf('/'));
var filename = src.substring(src.lastIndexOf('/'), src.length);
//  var filename=src;
filename = filename.substring(0, filename.lastIndexOf('.'));
var fileresult=dest + folder + filename + '.min.js';
grunt.log.writeln("现处理文件:"+src+"  处理后文件:"+fileresult);
return fileresult;
//return  filename + '.min.js';
}
}
]
}
},
//压缩css
cssmin: {
//文件头部输出信息
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n',
//美化代码
beautify: {
//中文ascii化,非常有用!防止中文乱码的神配置
ascii_only: true
}
},
my_target: {
files: [
{
expand: true,
//相对路径
cwd: 'css/',
src: '*.css',
dest: 'dest/css/',
rename: function (dest, src) {
var folder = src.substring(0, src.lastIndexOf('/'));
var filename = src.substring(src.lastIndexOf('/'), src.length);
//  var filename=src;
filename = filename.substring(0, filename.lastIndexOf('.'));
var fileresult=dest + folder + filename + '.min.css';
grunt.log.writeln("现处理文件:"+src+"  处理后文件:"+fileresult);
return fileresult;
//return  filename + '.min.js';
}
}
]
}
}
});
// 加载指定插件任务
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
// 默认执行的任务
grunt.registerTask('default', ['uglify', 'cssmin']);
};

grunt api文档:http://gruntjs.com/api/grunt

grunt.initConfig方法

用于模块配置,它接受一个对象作为参数。该对象的成员与使用的同名模块一一对应。

每个目标的具体设置,需要参考该模板的文档。就cssmin来讲,minify目标的参数具体含义如下:

expand:如果设为true,就表示下面文件名的占位符(即*号)都要扩展成具体的文件名。

cwd:需要处理的文件(input)所在的目录。

src:表示需要处理的文件。如果采用数组形式,数组的每一项就是一个文件名,可以使用通配符。

dest:表示处理后的文件名或所在目录。

ext:表示处理后的文件后缀名。

grunt常用函数说明:

grunt.initConfig:定义各种模块的参数,每一个成员项对应一个同名模块。

grunt.loadNpmTasks:加载完成任务所需的模块。

grunt.registerTask:定义具体的任务。第一个参数为任务名,第二个参数是一个数组, 表示该任务需要依次使用的模块。

命令行执行grunt任务

进入到项目根目录,敲:

grunt

就会按Gruntfile配置的文件进行压缩合并。

也可以单独执行,例执行js压缩命令:

grunt uglify

css压缩命令

grunt cssmin

视频教程

炫意HTML5 » 前端js和css的压缩合并之grunt

Java基础教程Android基础教程