安裝
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怎樣壓縮requirejs中各模塊js
安裝 grunt-contrib-requirejs
npm i --save-dev grunt-contrib-requirejs
配置 Grantfile
首先我們來看下項目目錄
src 是每個頁面的依賴文件
moles 和 lib 是一些模塊和庫
dist 是合並壓縮後的文件
在 Gruntfile 中首先得到需要處理的文件列表，並創建一個空對象，用來裝requirejs的配置
var files = grunt.file.expand('static/js/src/*.js');
var requireOptions = {};
然後遍歷這個文件列表數組，得到js文件的名稱：
files.forEach(function (file) {
var filenamelist = file.split('/');
var num = filenamelist.length;
var filename = filenamelist[num - 1].replace(/\.js$/,'');
}
接下來為每個js文件配置一個任務，任務名稱就是js的文件名稱：
files.forEach(function (file) {
requireOptions[filename] = {
options: {
baseUrl: 'static/js',
paths: {
jquery: 'lib/jquery.min',
lrz: 'lib/lrz.all.bundle',
zepto: 'lib/zepto.min',
ajax: 'moles/ajax',
validators: 'moles/validators',
page: 'moles/mixins/to_page',
dialog: 'moles/mixins/toggle_login_dialog',
},
optimizeAllPluginResources: true,
name: 'src/' + filename,
out: 'static/js/dist/' + filename + '.js'
}
};
}
接著初始化 grunt 配置並載入並注冊任務
grunt.initConfig({
requirejs: requireOptions
})
grunt.loadNpmTasks('grunt-contrib-requirejs');
grunt.registerTask('require', ['requirejs']);
到這里 requirejs 的配置部分就結束了，在命令行輸入 grunt require 就會看到 static/js/dist 目錄下面有東西蹦出來了，而且全部都是合並後並壓縮好的。
在html頁面中只需要：
<script src="static/js/require.js"></script>
<script src="static/js/dist/index.js"></script>
就能成功載入了。
增加js文件的版本號
瀏覽器有時會對載入過的js或css進行緩存，如果你的某些js依賴發生改變，那麼就可能發生錯誤，解決辦法是在文件後面增加查詢字元串，例如 a.js?v=dsd712sd
那麼如何控製版本，首先我們肯定想到用 new Date() ，但是如果每次發布都讓瀏覽器重新載入（盡管有些文件根本就沒有改變），難免會造成浪費。正確的方案是根據文件內容生成MD5值來作為版本號，這樣當文件沒有改變時，hash就不會變。
那麼如何自動解決版本號的問題，我們可以用到 asset-cache-control 這個grunt插件
首先安裝：
npm i --save-dev asset-cache-control
asset-cache-control 的用法個很簡單，只要設置一個源文件，再設置html文件的路徑就可以了
grunt.initConfig({
cache: {
demo: {
assetUrl: 'js/demo.js',
tmp: ['demo.html']
}
}
})
注意的是：html文件中需要引入 js/demo.js
<script src='js/demo.js'></script>
然後載入和注冊 asset-cache-control 插件
grunt.loadNpmTasks('asset-cache-control');
grunt.registerTask('cache', ['cache']);
接著在命令行敲 grunt cache 就會發現 index.html 中的 script 標簽加上了查詢字元串。
<script src='js/demo.js?t=92e26c5d'></script>
對每個js文件配置 cache 的任務：
var files = grunt.file.expand('static/js/src/*.js');
var cacheOptions ={};
files.forEach(function (file) {
var filenamelist = file.split('/');
var num = filenamelist.length;
var filename = filenamelist[num - 1].replace(/\.js$/,'');
cacheOptions[filename] = {
assetUrl: 'static/js/dist/' + filename +'.js',
files: {
'tmp': [filename+'.php']
}
}
});
檢測每個文件的變化，自動執行任務
用到 grunt-contrib-watch 這個官方組件
在 grunt.initConfig 中配置：
watch: {
files: ['static/js/src/*.js','static/js/moles/*.js'],
tasks: ['requirejs', 'cache'],
options: {
spawn: false
}
}
這樣，當你修改 static/js/src/ 和 static/js/moles/ 下的所有js文件時，就會執行 requirejs 和 cache 任務。
完整配置清單
mole.exports = function (grunt) {
var files = grunt.file.expand('static/js/src/*.js');
var requireOptions = {};
var cacheOptions ={};
files.forEach(function (file) {
var filenamelist = file.split('/');
var num = filenamelist.length;
var filename = filenamelist[num - 1].replace(/\.js$/,'');
requireOptions[filename] = {
options: {
baseUrl: 'static/js',
paths: {
jquery: 'lib/jquery.min',
lrz: 'lib/lrz.all.bundle',
zepto: 'lib/zepto.min',
ajax: 'moles/ajax',
validators: 'moles/validators',
page: 'moles/mixins/to_page',
dialog: 'moles/mixins/toggle_login_dialog',
},
optimizeAllPluginResources: true,
name: 'src/' + filename,
out: 'static/js/dist/' + filename + '.js'
}
};
cacheOptions[filename] = {
assetUrl: 'static/js/dist/' + filename +'.js',
files: {
'tmp': [filename+'.php']
}
}
});
grunt.initConfig({
requirejs: requireOptions,
cache: cacheOptions,
watch: {
files: ['static/js/src/*.js','static/js/moles/*.js'],
tasks: ['requirejs', 'cache'],
options: {
spawn: false
}
}
});
grunt.loadNpmTasks('asset-cache-control');
grunt.loadNpmTasks('grunt-contrib-requirejs');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('require', ['requirejs','cache'])
};
另外，瀏覽器載入一個大文件比載入n個小文件的效率要高很多，所以模塊的合並對性能也有很大的提高。
⑶ 怎麼讓html代碼變成一個轉行
首先我個人並不贊成 html 代碼的壓縮，因為這沒有多大意義，反而影響自己的開發。理由：
想壓縮 html 去掉格式讓其他人難以查看？沒意義，現在有太多的工具可以格式化代碼。
想通過壓縮來縮小 html 文件體積？沒多大意義，除非你的網站日均 PV 上百萬，且 html 文件體積較大，這時候壓縮 html 能節省一些流量。
想通過壓縮來提高 html 載入速度？沒多大意義，服務端開啟 gzip，一勞永逸。
如果你實在糾結要壓縮的話，不攔你，可以用grunt、gulp、fis 這類前端工具。
⑷ 如何利用Grunt單獨壓縮各個JS和CSS文件，並生成對應的Source Map
1. Package.Json
{
"name": "xxx",
"version": "0.0.1",
"author": "xxx",
"devDependencies": {
"grunt": "~0.4.4",
"load-grunt-tasks": "~0.4.0",
"grunt-contrib-uglify": "~0.5.1",
"grunt-contrib-cssmin": "~0.10.0"
}
}
2. Gruntfile.Js
mole.exports = function (grunt) {
// 構建任務配置
grunt.initConfig({
//讀取package.json的內容，形成json數據
pkg: grunt.file.readJSON('package.json'),
// 壓縮所有js並生成source map
uglify: {
my_target: {
options: {
sourceMap: true
},
files: [
// 可以直接作用於文件夾下所有文件
{
expand: true,
cwd: 'app/js',
// 排除.min的文件
src: ['*.js', '!*.min.js'],
// 輸出和輸入在同一目錄
dest: 'app/js',
ext: '.min.js'
},
// 也可以指明具體一一對應的文件
{
// core
'core/jsCompare.min.js': 'core/jsCompare.js',
'core/jsHelper.min.js': 'core/jsHelper.js',
'core/jsShare.min.js': 'core/jsShare.js',
// dijia
'app/dijia/dijia.min.js': 'app/dijia/dijia.js',
'app/dijia/location.min.js': 'app/dijia/location.js'
}
]
}
},
// 壓縮所有css
cssmin: {
minify: {
expand: true,
cwd: 'resources/css/',
src: ['**/*.css', '**/!*.min.css'],
dest: 'resources/css/',
ext: '.min.css'
}
}
});
// 載入指定插件任務
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-uglify');
// 默認執行的任務
grunt.registerTask('default', ['uglify', 'cssmin']);
};
⑸ 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*
⑹ 如何利用grunt實現增量編譯
傳統做法
創建文件夾,命名為新項目balbala
新建一個index.html，從過去的一個文件中把用得到的html代碼拷貝進來，再新建css、js、images文件夾
新建style.css,base.js等需要的樣式表文件和js以及一堆亂七八糟的文件。
切圖、寫html，寫css、寫js
不斷F5刷新、F5刷新：瀏覽器里測試
差不多完成了，開一個壓縮工具（線下的或者在線的），壓縮下js和css文件，新建一個min.style.css和min.v.js，修改html中的文件路徑，填充，搞掂。
右鍵，單擊，壓縮成一個.zip文件，再重新命名下為新項目balblaa.zip之類，發給測試工作人員，或者直接把整個文件夾通過QQ傳給測試，要不就自己動手直接ftp上傳。
測試時、上線後遇到bug了，PM呼叫了；有細節要修正了，PM又呼叫了。咳，線下debug，保存一個新的新項目balbla-修改.zip >> 測試上線 or ftp上傳，又重復4、5、6、7步。
再測試、再debug、再打包新項目balbla-修改新.zip、再發送上傳......心中默默地說「PM你好」。
⑺ gulp或者grunt中有哪些神一般的task
front-end-separate(前後端分離腳手架)
front-end-separate
一個前後端分離的腳手架工具（自主研發）
為什麼選擇grunt而不是gulp
如果你也和我一樣喜歡grunt這種配置的方式，那麼我相信這個腳手架覺對十分適合你
所有靜態資源都md5全並壓縮打包,css,js,img,html
已在生產環境驗證
基於express和grunt的前後端分離框架
模板引擎使用的是nunjucks，好處是可以實現模版繼承，又不像jade一樣把html標簽都簡化了
express提供路由服務
項目中app為原代碼文件（開發用），dist為打包後的文件（用於線上）
開發使用app，線上使用dist，支持一鍵cdn部署，加速你的項目
項目啟動時，修改任何express代碼，可以實現自動重啟–基於nodemon
支持sass圖片精靈（自動打包精靈圖片，再也不用手動去拼湊了）
基於grunt md5 打包合並
線上輸出的html已經壓縮成一行（讓你的代碼更有Geeker范）
###怎麼使用:
clone 代碼
啟動命令行:
如果沒有安裝grunt，請先全局安裝grunt bash $ npm i grunt-cli -g 安裝npm包(可能需要一段時間，請耐心等待)
希望對你有幫助
⑻ grunt 合並文件之後，在html中的引用目錄怎麼修改
真實開發的web項目是不是都應該將node_moles通過npm方式安裝在項目webapp目錄結構下？
2、我可能會遇 到項目前期開發為了js和css的調試沒有進行壓縮文件，頁面(jsp/html)的引用還是 css/index.css js/index.js,並不是壓縮之後的dist/css/index.min.css dist/js/index.min.js文件，後期進行壓縮，需要引用 dist/*/*.min.* 文件,這個時候將怎麼做，讓所有經過壓縮的文件(js css)的頁面引用路徑改變,引用壓縮之後的文件(這個肯定不會手動改吧，累死人啊！！)。其次，如果壓縮就替換以前的文件，為了後期的壓縮文件還原，可 能會生成*.map.css 等文件，這個將怎麼處理(不會讓它發布吧？)
3、關於文件合並，想知道js或者css文件進行合並不會不會出現問題，比如js中定義相同的方法或者變數什麼的東西，css中有相同的class進行樣式控制，這個時候合並我感覺會出現問題，不知道是否？合並文件需要注意哪些，有哪些原則講究？
4、公司不能連接外網，但是做項目也要讓
⑼ 請問，maven有什麼插件可以在打包時，自動壓縮css、js、jsp、html文件並且能夠自動合並js和css
前端頁面開發，資源文件（如js，html，js）的合並壓縮，用Grunt來處理，包括png這些文件也可以壓縮，挺好用的