前端js和css的压缩合并之grunt_html/css_WEB-ITnose-HTML Tutorial-php.cn

前端js和css的压缩合并之grunt_html/css_WEB-ITnose

WBOY

Release： 2016-06-21 08:52:24

Original

1091 people have browsed it

From: http://www.haorooms.com/post/qd_grunt_cssjs

关于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"}}

Copy after login

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

Copy after login

安装concat

npm install grunt-contrib-concat

Copy after login

安装：cssmin

npm install grunt-contrib-cssmin

Copy after login

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

新建Gruntfile.js

Gruntfile.js由以下内容组成

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

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

Copy after login

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']);}

Copy after login

也可以单独压缩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']);};

Copy after login

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