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來壓縮，很好用