前端js和css的压缩合并之grunt
18200次浏览
关于css和js压缩和合并的方法，记得我在题目中有写道。方法很多，今天主要介绍grunt方法。
grunt是基于node的，要在你电脑上使用grunt，电脑上必须已安装node环境。具体node环境的安装和搭建。，windows安装相对简单，下载安装包安装就可以了。关于mac的安装，后面有时间在详细介绍。
新建package.json
package.json放在根目录下，它包含了该项目的一些元信息，如项目名称、描述、版本号，插件等。
&name&: &&,
&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语法验查），以上都是常用的插件。
更多插件，请访问：
安装：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'),
options: {
separator: ';',
stripBanners: true
&js/config.js&,
&js/smeite.js&,
&js/index.js&
dest: &assets/js/default.js&
options: {
'assets/js/default.min.js': 'assets/js/default.js'
options: {
keepSpecialComments: 0
compress: {
'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'),
//文件头部输出信息
options: {
banner: '/*! &%= pkg.name %& &%= grunt.template.today(&yyyy-mm-dd&) %& */\n'
my_target: {
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=
filename = filename.substring(0, filename.lastIndexOf('.'));
var fileresult=dest + folder + filename + '.min.js';
grunt.log.writeln(&现处理文件：&+src+&
处理后文件：&+fileresult);
filename + '.min.js';
//文件头部输出信息
options: {
banner: '/*! &%= pkg.name %& &%= grunt.template.today(&yyyy-mm-dd&) %& */\n',
//美化代码
beautify: {
//中文ascii化，非常有用！防止中文乱码的神配置
ascii_only: true
my_target: {
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=
filename = filename.substring(0, filename.lastIndexOf('.'));
var fileresult=dest + folder + filename + '.min.css';
grunt.log.writeln(&现处理文件：&+src+&
处理后文件：&+fileresult);
filename + '.min.js';
// 加载指定插件任务
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
// 默认执行的任务
grunt.registerTask('default', ['uglify', 'cssmin']);
grunt api文档：
grunt.initConfig方法
用于模块配置，它接受一个对象作为参数。该对象的成员与使用的同名模块一一对应。
每个目标的具体设置，需要参考该模板的文档。就cssmin来讲，minify目标的参数具体含义如下：
expand：如果设为true，就表示下面文件名的占位符（即*号）都要扩展成具体的文件名。
cwd：需要处理的文件（input）所在的目录。
src：表示需要处理的文件。如果采用数组形式，数组的每一项就是一个文件名，可以使用通配符。
dest：表示处理后的文件名或所在目录。
ext：表示处理后的文件后缀名。
grunt常用函数说明：
grunt.initConfig：定义各种模块的参数，每一个成员项对应一个同名模块。
grunt.loadNpmTasks：加载完成任务所需的模块。
grunt.registerTask：定义具体的任务。第一个参数为任务名，第二个参数是一个数组， 表示该任务需要依次使用的模块。
命令行执行grunt任务
进入到项目根目录，敲：
就会按Gruntfile配置的文件进行压缩合并。
也可以单独执行，例执行js压缩命令：
grunt uglify
css压缩命令
grunt cssmin
相关文章：
关键词搜索Web优化中，JS的混浠压缩和CSS的普通压缩-百度js和css合并压缩是如何做的？
Web优化中，JS的混浠压缩和CSS的普通压缩
Web优化中，JS的混浠压缩和CSS的普通压缩
Web优化中，JS的混浠压缩和CSS的普通压缩分别代表什么意思？混浠压缩是什么样的？普通压缩又是什么样的
css 进行gzip形式压缩简单来说是通过插件实现，最后组合成一个文件输出;css 架构胜过你用任何插件工具优化，虽然减少了服务器请求量但是加大了初次加载量，当然现在淘宝出的服务器（nginx修改版）自带有这个功能？有人说第一次加载了缓存起来 后面的页面打开就更快了：1，如果觉得还是太大了， 关键词等等 的复杂逻辑 也可以压缩这样处理过后。写一个好的js&#47。用户打开网站每慢一秒一年就会损失很大一笔，经过不同人手，去注释2. 使用eval，也很简单，然后插件通过路径将js&#47. 长变量变量名 压缩为短变量名。 我们应该系统的有逻辑关联的来组织js&#47，这个比较早。合并代码工具我推荐minify （PHP），他严重影响了网站初次打开速度，你想一个页面一开始就加载一大堆没用的东西不是浪费吗。我想说这种强盗逻辑不适合所有情况，除非是那种文件以架构模块的形式大量存在。 通过一个url地址里写上每个js或者css 路径;css来解析了，去空格;CSS 这样浏览器也就当是js&#47。你能看到的输出格式是php后缀。提问者评价谢谢，网站初次打开速度对于我这种搞电商的人来说 是致命的。反倒是有害无益，但是输出文件的表头是js&#47，还可以采用服务端的gzip压缩传输最后我还想说一句， new Object 改写为{} 云云3。一般网站这样的合并压缩完全没必要，没办法要这样合并在一起;css的结构和 相互关联关系。压缩的话网上有很多地方都提供在线压缩12345简单说说 JS压缩. 可以将 new Array() 改写为 []
网站优化:所有的js代码放到同一个js文件中好,还是不同的页... 11
一、压缩html和javascript: 我们用站长工具的JavaScript-HTML格式化工具,...
简单来说是通过插件实现,当然现在淘宝出的服务器(nginx修改版)自带有这个功能。 通过一个url地...
http://tools./compressor.html 这个站点里面有四个压...
合并和压缩JS、CSS文件 压缩JS,CSS文件需要引用如下组件: gulp-minify-css:...
JS和CSS经过压缩之后体积变小,也就是文件占用内存会变小 在访问网站的时候要加载JS和CSS,体积...
无损压缩照片可以使用PS软件,保存web格式图片。JS和CSS启用GZIP压缩功能
如何压缩javascript和css文件
将Js和CS...
在前端性能优化中,html压缩有没有必要 1
前端的j...
css文件压缩 用gulp-minify,js多个文件合并好像是gulp-concat 然后再将其压...
你可能感兴趣的内容？JS和CSS的压缩混淆工具(JsCompressor)下载 v3.0_最火软件站
您的位置： >
> JS和CSS的压缩混淆工具(JsCompressor) v3.0下载
JS和CSS的压缩混淆工具(JsCompressor) v3.0
论坛转帖：
分&享&到：
JsCompressor是一款web前端人员必备利器，它主要用来压缩混淆JS(Javascript)与CSS，基于YUI Compressor，目的是方便不熟悉Java或者不喜欢命令行方式进行压缩的Web开发者使用。
JsCompressor可以压缩整个目录(包括子目录)下的JS/CSS，分别生成*.min.js、*.min.css结尾的文件，还会把所有js/css文件压缩混淆合并到一个文件，在当前压缩的目录下面有allinone.min.js/allinone.min.css。
功能说明：
1，可压缩、混淆整个目录(包括子目录)下的JS或者CSS文件，在同一个文件夹内生成*.min.js或者*.min.css。 2，压缩、混淆、合并所有js或者css到一个文件，在当前选择的文件夹下自动生成allinone.min.js或者allinone.min.css。 3，能上下调整顺序、移除后再进行压缩 4，能自动记住上一次压缩的文件夹及启动时打开待压缩文件列表
当前版本3.0，已经可以支持Windows和linux两个平台。
下载windows版： /downloads/tinyms/jscompressor/JsCompressor.exe 下载ubuntu(11.04)版: /downloads/tinyms/jscompressor/JsCompressor3.bin.ubuntu11.04.tar.gz 其它Linux平台： /downloads/tinyms/jscompressor/JsCompressor3.src.tar.gz 解压后make，需要libgtkmm-dev支持，如果没有安装此包，make前先下载安装。 最后的建议是，js或者css文件尽量用utf-8编码，还有此软件暂不支持压缩如ExtJS一样大的框架，主要是文件太多了。
点击链接开始下载