css解壓縮工具

『壹』 現在比較好用的前端開發工具有哪些啊

1. node.js + npm， 這個是前端工具的一個平台，沒有他們就沒有以下的工具，建立開發環境，下載開發工具，運行開發工具的利器
2. bower, 庫依賴管理器，類似於npm，但針對瀏覽器javaScript的依賴管理，減少尋找庫，下載庫和升級庫的煩惱
3.grunt，流程自動化管理工具，將你非編程的開發步驟減到最小，grunt watch+liveReload或者grunt connect,可以使得免除你F5無盡地獄，發布和開發各種無壓力。以下大部分開發工具，都有grunt的相對應的插件，也就是說他們都能利用grunt進行自動化運行
5. 本人用less比較多，因為基本無縫兼容歷史遺留系統中的css，（而Sass語法比較特殊，還沒有專門用過，應該開發新系統的css比較好），一套css預編譯語言，可以把less語法轉成css語法，lessc是less語言編譯器，配合grunt less，編寫大型css文檔毫無壓力。

6.Phantomjs，沒有界面的瀏覽器，用js腳本控制其操作網頁。測試，抓圖，網頁流程自動化利器。配合casperjs的語法簡化功能真強庫後，控制Phantomjs就更加容易了
7. grunt PhotoBox, 利用phantomjs抓圖功能和ImageMagick圖片比較功能，在利用live-reload即時刷新功能，可以讓你開發css的時候，快速對n多個頁面進行觀察，看其前後變化。不過缺點也比較明顯，就是速度慢。但比起手動對比來看，還是非常快的。值得css開發時擁有
8. phantomCSS，這個和grunt photobox類似，都用於css開發的，差別是photobox是全局觀察差別，而這個是單元組件觀察差別，它方便你就抓頁面中某一塊元素然後進行前後比較，更加註重細節上的差異，這個比較合適組件開發時候使用。
9. jshint，幫助你快速定位JavaScript的語法錯誤和潛在的跨瀏覽器兼容性問題。在部署你JS前，用jshint檢查一下是沒錯的 。
10.UglifyJS，壓縮JavaScript代碼，使你的JS代碼可以更加快速的載入。有grunt的插件
11. browserify允許你在瀏覽器裡面使用CMD標准模塊，但本人認為它的另外一個優勢是合並代碼，開發時候可以把代碼模塊化，分成很多很多小文件，然後有調理的放到相對應文件夾下，然後最後合成單一文件。本人曾經利用browserify開發greasemonkey代碼，大大簡化了greasemonkey的開發難度和增強了greasemonkey代碼的質量。browserify有grunt插件，這樣又減少的開發步驟。
12. Karma， google開發的一個單元測試運行器，這個自己本身不是一個單元測試框架，而是配合測試單元框架的一個工具。由於前端瀏覽器眾多，就算你有live-reload這樣自動化工具，但是還是要手動打開各種瀏覽器，手動把你的單元測試在各個瀏覽器都運行一遍。這個工具目的是目的就是讓電腦能自動化打開各種瀏覽器，然後把單元測試在各個瀏覽器中自動運行一遍，讓這個步驟也能自動化了。
13.clean-css (grunt cssmin)， 我用的是grunt cssmin，但是grunt cssmin實際上背後使用的是clean-css工具，這個工具就是用來壓縮精簡css的，讓css文件大小更小。

『貳』 如何還原壓縮過的css或Js文件，如下圖

1、首先新建一個html文件，命名為test.html。

『叄』 如何壓縮javascript和css文件

一、壓縮html和javascript：
我們用站長工具的JavaScript-HTML格式化工具，我們打開頁面，我今天要壓縮的文件js文件：common.js ，把js代碼復制到到JavaScript/HTML格式化工具裡面如下圖所示：

點擊下面的「普通壓縮」和「加密壓縮」按鈕，經過我的精心測試，使用「加密壓縮」，對文件壓縮率是最好的，所以點擊「加密壓縮」，壓縮後如圖：

javascript代碼壓縮後，我們就把這些代碼在復制到common.js文件裡面，在吧這個文件上傳到空間原來的位置，進行訪問是否存在一些錯誤，如果沒有什麼問題說明壓縮成功；

我的common.js 文件壓縮前和壓縮後的對比：
壓縮前：

壓縮後：

文件壓縮前和壓縮後確實有明確的減少，說明壓縮確實減少文件的大小，
我們來測試文件壓縮前和壓縮後所有能的時間做對比(我是用火狐插件測試傳輸速度)：
壓縮前所用時間：

壓縮後所用時間：

壓縮前所用時間是：125ms，壓縮後所用時間：78ms ，文件壓縮後給我們節省大量的時間，如果每個js都進行壓縮，我們房子訪問速度會更快的。

(註：html文件和javascript壓縮原來一樣的，當時壓縮html要用到「普通壓縮」按鈕壓縮)

二、壓縮css文件：
我們打開站長工具的Css壓縮/格式化工具頁面，我要壓縮的文件是五色旗保健品商城的css主文件style.css，首先我們打開站長工具的Css壓縮/格式化工具頁面 ，把style.css 代碼放到Css壓縮/格式化工具裡面，如下圖所示：

點擊「壓縮代碼」按鈕後，css代碼壓縮成功，如下圖所示：

後邊就是壓縮後的css代碼，你要不右邊的代碼復制到源文件style.css裡面在上傳到伺服器空間裡面，在訪問一下網，看看網頁樣式有沒有改變，如果有點變化就需要簡單的調試一下，如果沒有變樣，說明你的css壓縮成功了；
下面我們來看看styl.css文件壓縮前和壓縮後的大小和放在訪問速度的大小：
文件大小對比：
壓縮前：

壓縮後：

壓縮前30kb，壓縮後23kb，明顯的文件大小減小了
壓縮前所用時間：

css壓縮前的時間.jpg (7.36 KB, 下載次數: 0)
下載附件
css壓縮前的時間.jpg
2013-11-2 00:35 上傳

壓縮後所用時間：

壓縮前所用時間是：188ms，壓縮後所用時間：93ms ，css壓縮後明顯的節省了95ms；

總結：一個大的網站可能會有很多的javascript和css，如果沒有都進行壓縮的話，一定會減少很多文件大小的，其實減少文件大少並不是很重要，最重要的是，文件容量減少了，能夠快速的提高網站訪問的速度，給用戶帶來好的體驗，我們盡量的把文件壓縮到最小，這樣才有利於用戶快速的打開網站，至此我的五色旗保健品商城優化後，我的每天的訪問量也增加了很多。

『肆』 CSS的CSS壓縮方法

理想的情況是只擁有一個CSS文件（如果你使用RWD以支持IE的老版本，那就需要兩個CSS文件。）構建並維護幾個單獨的CSS文件也算合理，但在部署到產品伺服器之前，你應該將它們集合在一起，並刪掉那些不必要的空白區域。
Saas、LESS和Stylus等預處理器可幫你完成這些痛苦的工作。 Grunt.js、 Gulp等工具可自動化你的工作流。如果你更喜歡GUI，可藉助Koala提供的免費跨平台應用。
如果你覺得這些比較麻煩，也可手動通過命令行工具將CSS文件集中在一起，如在Windows中，可使用如下代碼：
在Mac/Linux中，可使用如下代碼：
最終文件經過在線CSS壓縮工具（如 cssminifier.com、 CSS Compressor & Minifieror等）壓縮後即可運行。
最後，請記住在頭部（Head）載入所有CSS，以便瀏覽器展示接下來的HTML元素，同時也可避免瀏覽器下次再重繪頁面元素。

『伍』 css文件打開就是一行怎麼辦

如果打開的樣式表只有一行代碼滾亮，那說明樣式表不全！

二如果打開的樣式唯備枯表所有的代碼都顯示在一起沒有換行的吧可指洞以用DW 里免的一個功能將代碼格式化一下就行了！具體的請看下圖

『陸』 怎麼破解CSS加密

前端中的代碼加密無非是進行min化。
解壓縮可以用gulp，或者node.js或者卡拉。
不過最簡單的是使用現在的編碼器（hbuilder為例）。
1.將被加密（壓縮）的css樣式拷貝進來。在操作區點擊右鍵

2.點擊「整理代碼格式」。等待幾秒鍾

就完成了解壓縮的任務。

最後提一點。css解壓縮比js的相對容易。因為沒有注釋的js是無比頭痛的。、

『柒』 油猴怎麼用

直接在應用商店內下載油猴，打開Chrome瀏覽器擴展程序頁面，拖拽到頁面即可完成安裝。打開油猴設置初學者或高級配置模式。打開網站點擊地址欄右側的油猴圖標可以看到已經成功啟用。

是Mozilla Firefox的一個附加組件。它讓用戶安裝一些腳本使大部分HTML為主的網頁於用戶端直接改變得更方便易用。隨著Greasemonkey腳本常駐於瀏覽器，每次隨著目的網頁打開而自動做修改，使得運行腳本的用戶印象深刻地享受其固定便利性。

Greasemonkey可替網頁加入些新功能、修正網頁錯誤、組合來自不同網頁的數據、或者數繁不及備載的其他功能。寫得好的Greasemonkey腳本甚至可讓其輸出與被修改的頁面集成得天衣無縫，像是原本網頁里的一部分。

相關信息

大部分Greasemonkey使用者腳本都是自行撰寫，使用對某網站專用的JavaScript代碼，透過文檔對象模型(DOM)介面對網頁內容做操作。維護了個 Greasemonkey 資料庫。該資料庫描述哪個網址網頁對應到哪個腳本。

當使用者載入匹配的網頁，Greasemonkey便呼叫相關的腳本，而該腳本便為該頁加入輸出結果、刪除該頁的部分、或者移動礙眼的部分。Greasemonkey腳本亦能透過非網域綁定的XMLHTTP要求來查詢外部HTTP資源。

『捌』 eclipse進行前端開發，求讓css file 進行代碼自動補全的方法。

eclipse進行前端開發巧鋒，css file 進行代碼自動補全的方法：
1、下載csseditor/

2、解壓縮復制姿缺到Eclipse > plugins

3、打開Eclipse。window > Perferences >孝冊晌 General > Editors > File Associations

找到File types: *.css
選擇Associated editors: CSS Editor 為Default。完成。