前端js和css的压缩合并之grunt_html/css_WEB-ITnose
关于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:'/*! */\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:'/*! */\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
+
+
+
=
+
+
=
上一篇: Java9–终极特性列表
下一篇: Issue 24 *不倒,台灣不會好
推荐阅读
-
使用grunt合并压缩js和css文件的方法
-
自学篇之js 提取复选框和单选框的值 和纯css的3D按钮_html/css_WEB-ITnose
-
前端js和css的压缩合并之nodejs_html/css_WEB-ITnose
-
前端js和css的压缩合并之nodejs_html/css_WEB-ITnose
-
前端js和css的压缩合并之YUI-Compressor_html/css_WEB-ITnose
-
前端js和css的压缩合并之grunt_html/css_WEB-ITnose
-
前端js和css的压缩合并之YUI-Compressor_html/css_WEB-ITnose
-
win7下,Ant 配合yuicompressor对js和css进行合并、压缩、拷贝处理_html/css_WEB-ITnose
-
前端js和css的压缩合并之wro4j_html/css_WEB-ITnose
-
win7下,Ant 配合yuicompressor对js和css进行合并、压缩、拷贝处理_html/css_WEB-ITnose