js压缩合并工具下载

1. Canvas开发的前端页面自动化实现求助

现在的前端开发已经不再仅仅只是静态网页的开发了，日新月异的前端技术已经让前端代码的逻辑和交互效果越来越复杂，更加的不易于管理，模块化开发和预处理框架把项目分成若干个小模块，增加了最后发布的困难，没有一个统一的标准，让前端的项目结构千奇百怪。前端自动化构建在整个项目开发中越来越重要。

我们首先来回想一下之前我们是如何来开始做一个项目的。

① 首先要确定这个项目要使用什么样的技术来实现，然后开始规划我们的项目目录，接着就要往项目增加第三方库依赖，比如：

拷贝 CSS库（Yui Reset | bootstrap）JS库（Requiet.js | Seajs | jQuery | jQuery插件 ） 进相应目录（拷贝 N个文件，花费N分钟）

② 然后，进行编码

编辑器编码 => 切换到浏览器F5 => 编辑器编码 => 切换到浏览器F5 => 编辑器编码 => 切换到浏览器F5 => 编辑器编码 => 切换到浏览器F5 …………

③ 编码完成，进行语法检查，文件合并和压缩

• HTML去掉注析、换行符 - HtmlMin

• CSS文件压缩合并 – CssMinify

• JS代码风格检查 – JsHint

• JS代码压缩 – Uglyfy

• image压缩 - imagemin

整个过程都在重复无用繁琐的工具...

渐渐的，一些自动化构建工具出现了，人们开始使用例如Bower、Gulp、Grunt、node、yeoman等等工具来构建一个本地的开发环境。自动化构建已经成了前端开发的趋势，所以学好自动化构建也就是为自己的开发打下了良好的基础。

2. 合并js文件并且去注释

使用grunt，合并压缩去注释；或者站长工具里也有在线的工具，可以网上找找。

3. 怎么合并js

您好，合并js文件目前有两种方法:

1,手动或者借助工具将多个js文件合并到一个文件，一般合并后进行压缩，去掉注释和多余的空格和换行。

2，采用先进的服务器技术，比如淘宝的服务器可以用一个连接请求多个js文件，如图：

目前tengine可以支持这种模式！

4. 有了gulp和webpack，还需要bower吗

不是同一个level的工具。gulp是工具链，可以配合各种插件做js压缩，css压缩，less编译等工作webpack是文件打包工具，可以把项目的各种js文、css文件等打包合并成一个或多个文件bower是包管理器，用来管理项目里的那些外部依赖的。所以是否还用bower，完全取决于自己的需求。不要执着于是否用了gulp或者webpack

5. webpack和gulp的区别

gulp是工具链、构建工具，可以配合各种插件做js压缩，css压缩，less编译 替代手工实现自动化工作
1.构建工具
2.自动化
3.提高效率用
webpack是文件打包工具，可以把项目的各种js文、css文件等打包合并成一个或多个文件，主要用于模块化方案，预编译模块的方案

1.打包工具
2.模块化识别
3.编译模块代码方案用
所以定义和用法上来说 都不是一种东西，无可比性 ，更不冲突！【当然，也有相似的功能，比如合并，区分，但各有各的优势

6. 如何利用node进行js css合并压缩

gulp是基于Node.js的前端构建工具。所以首先需要安装nodejs，安装nodejs。
完成nodejs安装之后，需要使用npm安装gulp。
先安装全局gulp
npm install -g gulp然后在项目根目录下安装本地gulp。
此时项目根目录下会多出下面这个文件夹 node_moles
好的，现在gulp已经安装完成了，但是gulp本身不提供js压缩合并等功能，需要使用gulp的相关插件。目前只需要完成js压缩合并和css文件压缩的功能，先安装相应的插件：
1.css压缩 gulp-minify-css
2.js压缩 gulp-uglify
3.js合并 gulp-concat
由于压缩之前需要对js代码进行代码检测，压缩完成之后需要加上min的后缀，我们还需要安装另外两个插件：

7. JavaScript如何调试有哪些建议和技巧附五款有用的调试工具

浏览器开发者工具

我个人最喜欢Chrome开发者工具。虽然Safari和Firefox无法达到Chrome那么高的标准，但它们也在逐渐改善。在Firefox中，可以将Firebug和Firefox开发者工具组合使用。如果Firefox小组在改进内置开发者工具方面继续表现优异的话，Firebug有一天可能会被淘汰。

先把个人偏好放在一边，你应该能够在目标浏览器中对任意代码进行试验和调试。你的目标浏览器可能包括着名的IE8，也可能不包括。
要熟悉你自己选择的开发者工具。你还可以从IDE（集成开发环境）或者第三方软件获得额外的调试支持。

在各种调试工具中，调试的基础知识是相通的。事实上，我是在90年代从Borland的C开发者环境中学习的调试基础。断点、条件断点、监视与最新版Chrome开发者工具是完全相同的。2000年左右，我在Java中捕获到第一例异常。堆栈跟踪（Stack traces）的概念依然适用，即使JavaScript术语将其称作错误（Error），检查堆栈跟踪仍然和以前一样有用。

有些知识点是前端开发特有的。例如：

DOM检查
DOM断点
调试事件
内存泄露分析

断点

使用debugger语句可以在源代码中增加断点。一旦到达debugger语句，执行中断。当前作用域的上下文出现在控制台中，还有所有的局部变量和全局变量。将鼠标光标移到变量上可以查看变量的值。

在代码中还可以创建条件断点：

JavaScript

if (condition) { debugger;}

还可以根据自己需要在开发者工具中插入断点和条件断点。在Chrome开发者工具中，在Sources视图中点击行号即可增加断点。如果在断点上点击右键并选择“编辑断点（Edit Breakpoint）”，你还可以增加断点条件。

节点变化的断点

如果你的任务是调试垃圾代码，你可能会有这样的问题：为什么DOM节点在执行过程中发生了改变。Chrome开发者工具提供了一种方便的断点，可用来检测元素树中的节点变化。

在Elements视图中，右键点击一个元素，从右键菜单中选择“Break on…”。

节点变化的断点

DOM断点的类型可能包括：

选定节点树状子目录（sub-tree）中的节点变化，
选定节点的属性发生变化，
节点被删除。

避免记录引用类型

当记录对象或数组时，原始类型的值在引用对象记录中可能会发生变化。当查看引用类型时一定要记住，在记录和查看期间，代码执行可能会影响观测到的结果。

例如，在Chrome开发者工具中执行以下代码：

JavaScript

var wallets = [{ amount: 0 }];setInterval( function() { console.log( wallets, wallets[0], wallets[0].amount ); wallets[0].amount += 100;}, 1000 );

记录的第二个和第三个属性的值是正确的，第一个属性中对象引用的值是不可靠的。当你第一次在开发者工具中显示这个属性时，amount域的值就已经确定了。无论你对同一个引用关闭并重新打开多少次，这个值都不会变化。

记录参考类型

永远记得你在记录什么。记录原始类型时，使用带断点的watch表达式。如果是异步代码，避免记录引用类型。

表格记录

在一些开发者工具中，你可以用console.table在控制台中记录对象数组。

尝试在你的Chrome开发者工具中执行下列代码：

JavaScript

console.table( [ { id: 1, name: 'John', address: 'Bay street 1' }, { id: 2, name: 'Jack', address: 'Valley road 2.' }, { id: 3, name: 'Jim', address: 'Hill street 3.' } ] );

输出是非常好看的表格。所有原始类型都立刻显示出来，它们的值反应记录时的状态。也可以记录复杂类型，显示内容为其类型，内容无法显示。因此，console.table只能用来显示具有原始类型值的对象构成的二维数据结构。

XHR断点

有时你可能会遇到错误的AJAX请求。如果你无法立刻确认提交请求的代码，XHR断点可以帮你节省时间。当提交某一特殊类型的AJAX时，XHR断点将会终止代码的执行，并将提交请求的代码段呈现给用户。

在Chrome开发者工具的Sources标签页中，其中一个断点类型就是XHR断点。点击+图标，你可以输入URL片段，当AJAX请求的URL中出现这个URL片段时，JavaScript代码将会中断。

事件监听器断点

Chrome开发者工具可以捕获所有类型的事件，当用户按下一个键、点击一下鼠标时，可以对触发的事件进行调试。

异常时暂停

Chrome开发者工具可以在抛出异常时暂停执行JavaScript代码。这可以让你在Error对象被创建时观察应用的状态。

异常时暂停

代码片段

Sources标签页左侧面板上有一个代码片段（Snippet）子标签页，可用于保存代码片段，帮你调试代码。

如果你坚持使用控制台调试，反复写相同的代码，你应该将你的代码抽象成调试片段。这样的话，甚至还可以把你的调试技巧教给你的同事。

Paul Irish发布过一些基本的调试代码片段，例如在函数执行前插入断点。审查这些代码片段，并在网上搜索其他代码片段，这是很有价值的。

在函数执行前插入断点

如果你可以得到函数调用的源代码，你还可以在函数调用前插入断点来终止函数的执行。如果你想调试f函数，用debug(f)语句可以增加这种断点。

Unminify最小化代码

（译者注：unminify 解压缩并进行反混淆）

尽可能使用 source map。有时生产代码不能使用source map，但不管怎样，你都 不应该直接对生产代码进行调试。

（译者注：sourcemap 是针对压缩合并后的web代码进行调试的工具）

如果没有source map的话，你最后还可以求助于Chrome开发者工具Sources标签页中的格式化按钮（Pretty Print Button）。格式化按钮{}位于源代码文本区域的下方。格式化按钮对源代码进行美化，并改变行号，这使得调试代码更加方便，堆栈跟踪更加有效。

格式化按钮只有在不得已时才会使用。从某种意义上来说，丑代码就是难看，因为代码中的命名没有明确的语义。

DOM元素的控制台书签

Chrome开发者工具和Firebug都提供了书签功能，用于显示你在元素标签页（Chrome）或HTML标签页（Firebug）中最后点击的DOM元素。如果你依次选择了A元素、B元素和C元素，

$0 表示C元素
$1 表示B元素
$2 表示A元素
如果你又选择了元素D，那么$0、$1、$2和$3分别代表D、C、B和A。

访问调用栈

JavaScript

var f = function() { g(); } var g = function() { h(); }var h = function() { console.trace('trace in h'); }f();

Chrome开发者工具中的Sources标签页也在Watch表达式下面显示调用栈。

性能审查

性能审查工具通常是很有用的。这些工具可以用于防止内存泄露，还可以检测到你的网站哪里需要优化。由于这些工具并不了解你的产品，你可以忽略其某些建议。通常来说，性能分析工具能够有效范围，可以使你的网站显着优化。

审查工具举例：

Chrome开发者工具的Audit标签页
YSlow

熟能生巧

你可能熟悉某些调试技巧，其他技巧也会帮你节省不少时间。如果你开始在实践中使用这些技巧，我建议你几周之后重新阅读本文。你将会惊奇地发现，你的关注点在几周内就发生了变化。

五个常用的js调试工具

JavaScript被称作以原型(prototype)为基础的语言。这种语言有很多特色，比如动态和弱类型，它还有一等函数（first class function）。另一个特点是它是一个多范型(multi-paradigm)语言，支持面向对象、声明式、函数式的编程风格。

JavaScript最初被用作客户端语言，浏览器实现它用来提供增强的用户接口。JavaScript在很多现代的网站和Web应用程序中都有应用。JavaScript的一个很棒的功能也很重要，就是我确实可以用它来提高或改善网站的用户体验。JavaScript也可以提供丰富的功能和交互的组件。

JavaScript在这技术高速发展的同时变得非常受欢迎。因为受欢迎JavaScript也改进了许多，修改JavaScript脚本有很多事要做。这次我们为开发者带来了几个非常有用的JavaScript调试工具。

1）Drosera

可以调试任何WebKit程序，不仅仅是Safari浏览器。

5)Venkman

Venkman是Mozilla的JavaScript调试器名称。它旨在为以Mozilla为基础的浏览器（Firefox, Netscape 7.x/9.x and SeaMonkey）提供一个强大的JavaScript调试环境。

8. 百度js和css合并压缩是如何做的

简单来说是通过插件实现，当然现在淘宝出的服务器（nginx修改版）自带有这个功能。 通过一个url地址里写上每个js或者css 路径，然后插件通过路径将js/css 进行gzip形式压缩，最后组合成一个文件输出。你能看到的输出格式是php后缀，但是输出文件的表头是js/CSS 这样浏览器也就当是js/css来解析了。
合并代码工具我推荐minify （PHP），这个比较早，也很简单。
压缩的话网上有很多地方都提供在线压缩
简单说说 JS压缩：
1. 长变量变量名 压缩为短变量名，去空格，去注释
2. 可以将 new Array() 改写为 []， new Object 改写为{} 云云
3. 使用eval， 关键词等等 的复杂逻辑 也可以压缩
这样处理过后，如果觉得还是太大了，还可以采用服务端的gzip压缩传输

9. 如何提高页面响应速度

1: 缩小Javascript和CSS文件
如果你的网站大约有50-60%的用户是第一次访客，那么这些人会下载Javascript和CSS，如果这些文件很大浏览器会下载很长时间。
使用压缩工具可以减少Javascript和CSS尽一半的文件大小，如果你有信心使用“命令行”我强烈推荐使用雅虎的YUI压缩，至少能提高40%到60%的压缩率，如果你是在不懂可以用站长之家的CSS\JS压缩工具。
2：减少HTTP请求
浏览器会花费80%的时间获取外部元件，包括脚本、样式表、图像等，只有20%的时间用来加载内容，每个网站都会有许多HTTP请求，由于只有2个HTTP请求可以在同一时间传送，所以请求一旦过多就会造成延迟。

通过Yslow可以看出我博客的HTTP请求数，可以看到JS、CSS和CSS引用的图片文件过多，导致HTTP请求过多。
3：缓存图片、CSS和Javascript
每当一个新用户访问你的网站，图片、CSS和Javascript应该在其浏览器缓存，这样他们下一次访问就特别快。
绝大多数windows主机已经默认启用了，只需要在控制面板中设定过期时间和文件类型那个就可以了，我建议图片、CSS和Javascript时间可设置为一个月。而对于Apache Web服务器，使用mod_cache模块开启缓存。:
4：合并CSS引用图片
如图一所示，很多网站的图片都是切成小块的，这样下来就会有大量CSS引用图片，如卢松松博客的CSS就引用了14张图片，cssimages也是影响网站速度的一种重要因素。
如果我们把CSS图片合并成一个，14个HTTP请求变成1个，想想会是什么效果？它的原理就是通过CSS坐标的方式取得图片径路，每个CSS标签引用不同坐标就会得到不同图片。我们看到很多网站的CSS图片只有一张，用的就是这个原理。
不懂也没有关系，CSS图片合并生成器这个网站能帮助你合并CSS图片，并且能得到相应代码。
5：只加载<head>部分的基本脚本
这个最简单，不花时间，点击自己网站右键“查看源文件”找到<head>与</head>之间的区域，看看那些不重要好的JS文件，把它仍到页面底部，也就是让它最后加载。或者直接删除。
例如卢松松博客引用的jiathis（社会化分享按钮）和util.js（回顶部、写评论快捷标签），让它最后加载，这样能提升内容打开速度，而且它们也不太重要。
6：对图像进行压缩
除非你加载视频，那么影响网站速度罪魁祸首应该就是图片了，如果是jpeg、png图片，保证不失品质的前提下，让他们尽量压缩，Fireworks软件“导出向导”功能，它提供了一个很好的方式来预览保存的图像，让图片大小与质量之间平衡，大多数其他图像编辑软件都有类似的功能。
例如我的每篇博文配图都用了“导出向导”功能，我尽量把图片都压缩在30K以内，在一定程度上加快了浏览速度，但也有部分图片失真，看不清楚。
7：开启gzip模块
gzip压缩是非常流行的一种数据压缩格式，一般网站启用gzip后，压缩率都会有70%-80%的提升，效果是立竿见影的。
部分虚拟主机默认有gzip功能，但大部分没有，独立主机、VPS一般可以设置，开启gzip会加重服务器负担，而且要修改服务器配置，强烈建议大家开启gzip，如果不清楚可以问问所在空间商，让他们帮忙开启。
相关阅读：
影响网站打开速度的9大因素
测试网站访问速度的5个方法
小技巧给网页减肥，让网站提速
巴士文章列表插件会拖慢Z-blog速度
精简ZBlog模版代码，提高页面打开速度
流量统计是否影响网站速度
Firebug和Yslow是个好工具
去掉了博客Gravatar头像
启用lazyload插件，减少图片加载
Yslow的使用方法
JS代码优化技巧之通俗版

10. 网页页面优化如何合并JS

网站优化，一个是压缩合并css，js，一个是合并图片和小图标来达到减少请求量的目的
合并css和js这个很简单
比如a.css,b.css,c.css
把里面的内容都复制到一个css中，main.css这样手动就可以合并
压缩的话，网上都有工具来压缩，直接网络 css压缩 就可以了

js的话，大部分是可以直接和css一样，手动合并，然后压缩的（压缩方法，和压缩css一样，网络去），不过要注意复制到文件时的顺序，和代码里面的一些规范，不要把依赖什么的搞混了

如果js文件非常多手动处理很麻烦的时候，可能需要借助工具来实现，这个，你可以试着用前端的一些加载器（require,seajs）来做一些优化，达到按需加载的目的，推荐用seajs试试

自动压缩的话，可以用nodejs的grunt来压缩，很好用