grunt压缩、合并css、js文件的配置信息
来源:互联网 发布:王陆807和语料库 知乎 编辑:程序博客网 时间:2024/05/20 00:52
module.exports=function(grunt){
//任务配置,所有插件的配置信息
grunt.initConfig({
//获取package.json的信息
pkg:grunt.file.readJSON('package.json'),
//uglify插件的配置信息
uglify:{
options:{
stripBanners:true,
banner:'/*! <%=pkg.name%>-<%=pkg.version%>.js <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build:{
src:'src/test.js',
dest:'build/<%=pkg.name%>-<%=pkg.version%>.js.min.js'
}
},
//jshint插件的配置信息
jshint:{
build:['Gruntfile.js','src/*.js'],
options:{
jshintrc:'.jshintrc'
}
},
//mincss插件的配置信息
cssmin: {
options:{
stripBanners:true,
banner:'/*! <%=pkg.name%>-<%=pkg.version%>.css <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build:{
src:'src/test.css',
dest:'build/<%=pkg.name%>-<%=pkg.version%>.css.min.css'
}
},
//concat插件的配置信息
concat: {
options:{
stripBanners:true, //合并时允许输出头部信息
banner:'/*!<%= pkg.name %> - <%= pkg.version %>-'+'<%=grunt.template.today("yyyy-mm-dd") %> */'
},
cssconcat:{
src:['src/test.css','src/test2.css'],
dest:'cssconcat/<%= pkg.name %> - <%= pkg.version %>.css' //dest 是目的地输出
},
jsconcat:{
src:['src/test.js','src/test2.js'],
dest:'jsconcat/<%=pkg.name %> - <%= pkg.version %>.js'
}
}
});
//告诉grunt我们将使用插件
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-concat');
//告诉grunt当我们在终端中输入grunt时需要做什么(注意先后顺序)
grunt.registerTask('default',['jshint','uglify','cssmin','concat']);
};
以下转载自:http://www.haorooms.com/post/qd_grunt_cssjs
前端js和css的压缩合并之grunt
关于css和js压缩和合并的方法,记得我在前端面试题目中有写道。方法很多,今天主要介绍grunt方法。
使用前提
grunt是基于node的,要在你电脑上使用grunt,电脑上必须已安装node环境。具体node环境的安装和搭建。centos请看,windows安装相对简单,下载安装包安装就可以了。关于mac的安装,后面有时间在详细介绍。
新建package.json
package.json放在根目录下,它包含了该项目的一些元信息,如项目名称、描述、版本号,插件等。
{ "name": "haorooms.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
- grunt压缩、合并css、js文件的配置信息
- Grunt 进行js,css文件合并,压缩
- grunt合并压缩js、css文件
- grunt合并压缩js,css文件
- Grunt压缩、合并js/css文件
- Grunt的配置及使用(压缩合并js/css)
- Grunt的配置及使用(压缩合并js/css)
- 配置grunt进行css、js的检查、合并和压缩
- 配置grunt进行css、js的检查、合并和压缩
- grunt合并压缩js,css文件(第二弹)
- grunt 压缩合并,压缩css和js
- 前端js和css的压缩合并之grunt
- 使用Grunt进行js、css压缩合并
- 使用Grunt进行js、css压缩合并
- js、css文件压缩例子-grunt
- Grunt实现css,js,images文件压缩
- grunt压缩js和css文件(1)
- grunt构建&文件合并&压缩
- 面试中常问的排序算法
- 使用 Intellij Idea 导出JavaDoc
- [Winform]WebKit.Net使用
- ArcGIS中的一些影像格式:.ige .img .rde .rrd
- 读取properties文件的内容值
- grunt压缩、合并css、js文件的配置信息
- 观察者模式和事件通知备忘
- python爬虫——获取图片2
- [NOIP模拟赛]单向道路
- 褚时健84岁再成亿万富翁
- JavaScript基础
- MySQL的InnoDB索引原理详解
- 界面编码报错:Page-encoding specified in XML prolog (UTF-8) is different from that specified in
- python学习十(多继承,多态,异常)