grunt壓縮代碼

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

1. node.jsnpm， 這個是前端工具的一個平台，沒有舉拿他們就沒有以下的工具，建立開發環境，下載開發工具，運行開發工具的利器

2. bower, 庫依賴管理器，類似於npm，但針對瀏覽器javaScript的依賴管理，減少尋找庫，下載庫和升級庫的煩惱

3.grunt，流程自動化管理工具，將你非編程的開發步驟減到最小，grunt watchliveReload或者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開發代碼，大大簡化了的開發難度和增強了代碼的質量。browserify有grunt插件，這樣又減少的開發步驟。

12. Karma， google開發的一個單元測試運行器，這個自己本身不是一個單元測試框架，而是配合測試單元框架的一個工具。由於前端瀏覽器眾多，就算你有live-reload這樣自動化工具，但是還是要手動打開各種瀏覽器，手動把你的單元測試在各伏答薯個瀏覽器都運行一遍。這個工具目的是目的就是讓電腦能自動化打開各種瀏覽器，然後把單元測試在各個瀏覽器中自動運行一遍，讓這個步驟也能自動化了。

13.clean-css (grunt cssmin)， 我用的是grunt cssmin，但是grunt cssmin實際上背後使用的是clean-css工具，這個工具就是用來壓縮精簡css的，讓css文件大小更小。

❷ grunt壓縮的css問價怎麼解壓縮

安裝

1
要想使用grunt，首先必須將grunt-cli安裝到全局環境中，打開控制台（注意：windows系統下請使用管理員許可權打開），輸入：
npm install -g grunt-cli
注意，mac os 系統、部分linux系統中，在這句話的前面加上「sudo 」指令。

2
回車，命令行會出現一個轉動的小橫線，表示正在聯網載入。載入的時間看你網速的快慢，不過這個軟體比較小，一般載入時間不會很長，稍一會兒，就載入完了。你會看到以下界面。

3
要驗證一下grunt-cli是否安裝完成並生效，你只需要繼續在命令行中輸入
「grunt」命令即可。如果生效，則會出現以下結果：
-- 可能不一樣 --

END
創建一個簡單的網站

1
首先，我在電腦的D盤下面建了一個「grunt_test」文件夾，裡面建了三個空文件夾、兩個空文檔，名稱如下圖。（注意 Gruntfile.js 文件的首字母大寫！）
devDependencies是什麼意思？字面意思解釋是「開發依賴項」，即我們現在這個系統，將會依賴於哪些工具來開發

2
先把package.json這個文件寫一些東西
{ "name": "my", "version": "1.0.0", "devDependencies": {
}

3
接下來我們會有一系列插件的安裝，他們的安裝過程和grunt一樣。但是他們的執行都是基於grunt的，因此才能把grunt叫做一個「構建工具」。

4
注意，這里安裝grunt不再是全局安裝了，需要你在控制台進入到網站或系統的具體目錄下。這里我們進入 D:\grunt_test 目錄下。然後輸入以下命令。

5
應該第一時間打開package.json去看看，那裡的「devDependencies」有什麼變化。我這里的變化如下圖，看看你的是不是和我的一樣
然後你再看看文檔目錄中的文件或者文件夾有什麼變化？我這里多了一個「node_moles」文件夾，其中有一個「grunt」文件夾，再其中有若干文檔。這里就是存儲grunt源文件的地方。

6
在控制台運行「grunt」命令。如果你得到一個warning提示，那說明grunt已經起作用了。

END
配置Gruntfile.js

1
Gruntfile.js 這個文件，肯定是為了grunt做某種配置的。按照grunt的規定，我們首先把Gruntfile.js配置成如下格式

END
Grunt插件

Contrib-jshint——javascript語法錯誤檢查；
Contrib-uglify——壓縮javascript代碼
Contrib-cssmin——壓縮css代碼
Contrib-watch——實時監控文件變化、調用相應的任務重新執行；
Contrib-clean——清空文件、文件夾；
Contrib-——復制文件、文件夾
Contrib-concat——合並多個文件的代碼到一個文件中
使用uglify插件（壓縮javascript代碼）。
安裝uglify插件的方式，和安裝grunt是一樣的。還記得grunt是怎麼安裝的嗎？

我們在現有的「src」文件夾中新建一個「test.js」，並隨便寫一些代碼。顯然，我們無法通過雙手和鍵盤寫出壓縮後的代碼。

第一步，在grunt.initConfig方法中配置 uglify 的配置參數
uglify:
{ target: { files: [{ expand: true,
cwd: 'src', src: ['*.js', '!*.min.js'], ext:
'.min.js' }] }}
)};
grunt.loadNpmTasks('grunt-contrib-uglify');grunt.loadNpmTasks('grunt-contrib-cssmin');grunt.registerTask('default',
['uglify', 'cssmin']);//使用grunt命令執行

以上說的這三步已經OK了，接下來我們去試試。在控制台中運行grunt命令，
控制台將輸入如下信息：
現在好像沒有 -- without errors --

❸ Grunt uglify 批量壓縮 總是只生成1個文件

修改 src 為：
src: ['**/*.js']

❹ grunt 壓縮 合並 css 後 需要刪除注釋 與 合並同名 選擇器 怎麼配置 gruntfile.js

Grunt基於Node.js，其中 npm 是 Node.js 的包管理器，而Grunt和Grunt插件就通過 npm 安裝並管理。
Grunt 0.4.x 必須配合Node.js >= 0.8.0版本使用。
安裝Node.js：
去Node.js官網，點擊INSTALL下載並安裝，現在的Node.js會自動安裝npm。
安裝完成之後，打開命令行，進行後續的操作（開始->輸入CMD 或 開始->所有程序 ->命令提示符）。
進入Node.js的安裝目錄（默認路徑為"C:\Program Files\nodejs"）：
cd \pro*\nod*

❺ 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元素，同時也可避免瀏覽器下次再重繪頁面元素。