相關插件的引用：
- grunt-usemin 對頁面的操作
- grunt-contrib-cssmin 壓縮css
- load-grunt-tasks 瘦身gruntfile
- grunt-rev 給md5加密
實際的使用場景：壓縮css文件到指定目錄，並且更改頁面引用的外鏈（這里以css為例）。
情景一：html頁面與要操作的css在同一目錄下，且也與操作后的css在同一目錄下。
**這里使用npm中的注釋方式來操作外鏈的，擴展性很不好。
Gruntfile.js內容如下：
module.exports = function(grunt) { require('load-grunt-tasks')(grunt);//相當於加載了package.json文件中的所有依賴項，省去了寫一大堆
//grunt.loadNpmTasks('grunt-usemin')
grunt.initConfig({ usemin: { html: ['shop.html'] }, cssmin:{ target: {//target這是任務名，可以隨意取，但是不要與cssmin沖突
files: [{ expand: true,//占位符（即*號）都要擴展成具體的文件
cwd: './',//相對路徑
src: ['*.css'],//相對路徑下的要壓縮的文件,可以使用通配符
dest: 'mycssmin',//要壓縮文件放入的目標路徑
ext: '.min.css' //壓縮后的文件后綴
}] } } }) grunt.registerTask('styleMin',['cssmin','usemin']); }
加密操作：
rev: { options: { algorithm: 'md5',//加密方式，默認md5
length: 8//默認長度 8
}, assets: { files: [{ src: [ 'img/**/*.{jpg,jpeg,gif,png}', 'fonts/**/*.{eot,svg,ttf,woff}' ] }] } }
html內容：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>shop</title>
<!-- build:css mycssmin/style.min.css -->
<link rel="stylesheet" href="style.css">
<!-- endbuild -->
</head>
<body>
<p>該頁面被監聽!</p>
</body>
</html>
操作后的頁面：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>shop</title>
<link rel="stylesheet" href="style.min.css">
</head>
<body>
<p>該頁面被監聽!</p>
</body>
</html>
頁面中必須加入：
<!-- build:css mycssmin/style.min.css -->與<!-- endbuild -->
這樣壓縮完后再執行usemin的時候，頁面的鏈接才會被替換掉！但是怎么感覺這樣很無腦呢？-_-
絕對還有別的的方法，繼續學習，再來修改這里。
*** 繼續昨天的問題。2016-03-29 20:50:38
每次修改文件還要去頁面寫block的話，那是相當麻煩。今天在經理的點撥下看了usemin的里面有正則匹配。
\node_modules\grunt-usemin\lib目錄下的fileprocessor.js。
這里面是大段大段的正則匹配，匹配你指定的頁面上的js,css，png等文件。
原來我昨天加了一個
ext: '.min.css' //壓縮后的文件后綴
加了一個這個之后，頁面上正則就匹配不到.min.css結尾的link了。所以一直沒有匹配上！
但是控制台顯示了，它去遍歷過你頁面，只是沒有匹配上而已。
今天把后綴去掉之后，完全沒有問題了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>shop</title>
<link href="71ca3416.style.css" rel="stylesheet">
</head>
<body>
<p>該頁面被監聽!</p>
</body>
</html>
當然如果你有時候覺得那里面的正則缺少你需要的，你也可以自己往里面添加一些你需要的正則用來匹配你的需求！
上面的是處理后的css與頁面在同一個目錄，沒有問題。
***************繼續不斷測試中.....2016-03-29 22:34:11
情景二：當這樣的目錄結構時：也就是html頁面與css文件不在同一個目錄下。且操作后的css也不與html頁面在同一目錄下。
css在這樣的路徑下：
lib>css>style.css
執行：grunt.registerTask('styleMin',['cssmin','rev','usemin']);
css文件還是在原來的目錄下：
lib>css>71ca3416.style.css
最終的html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>shop</title>
<link href="./lib/css/71ca3416.style.css" rel="stylesheet">
</head>
<body>
<p>該頁面被監聽!</p>
</body>
</html
頁面中的鏈接也發生了變化！
問題：我想要達到這樣的目的！（如圖的目錄結構）
情景三：html頁面與源文件不在同一目錄下，也與操作后的css不在同一目錄下的情況。
目錄結構：
頁面html的css路徑：
grunt操作前：<link href="src/css/style.css" rel="stylesheet">
grunt操作后：<link href="dist/css/8cf38899.style.css" rel="stylesheet">
src中的文件copy到dist,並且壓縮，加密。然后usemin index.html.希望index.html中的css路徑發生改變，指向dist下的css文件。
最終初步的探究我發現：
usemin只會改變文件名，而不會去修改與匹配文件路徑。
而且usemin在尋找的時候也是按照頁面上的路徑去尋找相應的css,js等文件。
但是真的是這樣么？希望真正懂的博友不吝賜教，謝謝！！
*****************實際的項目情形應該是這樣：2016-03-30 16:33:58
情景四：html頁面與css都在相應的目錄下，grunt的時候copy至別的文件夾，進行相對引用。
看目錄結構：
src是我們的源文件。dist是我們要發布的文件。
為了保證源文件不出問題，我們都會copy出一份文件到單獨的地方進行操作。
Gruntfile.js:
module.exports = function(grunt) { require('load-grunt-tasks')(grunt); grunt.initConfig({ copy:{ build: { files: [{ expand: true, cwd: 'src', src: '**', dest: 'dist', flatten: false, filter: 'isFile' }] } }, cssmin:{ target: { files: [{ expand: true, cwd: 'dist/css', src: ['*.css'], dest: 'dist/css' }] } }, rev:{ files:{ src:['dist/css/*.css'] } }, usemin:{ html:['dist/page/index.html'] } }) grunt.registerTask('demo',['copy','cssmin','rev','usemin']); }
我們將src文件copy一份到新的文件夾dist,src下的目錄結構都不變。然后在對dist下面的文件進行壓縮，加密等操作。
操作前的頁面index.html:
<!DOCTYPE html>
<html>
<head>
<title>grunt+seajs</title>
<link href="../css/ni.css" rel="stylesheet">
<link href="../css/style.css" rel="stylesheet">
</head>
<body>
<p>grunt+seajs的運用實例</p>
</body>
</html>
操作后的頁面index.html:
<!DOCTYPE html>
<html>
<head>
<title>grunt+seajs</title>
<link href="../css/a3c2a710.ni.css" rel="stylesheet">
<link href="../css/8a738899.style.css" rel="stylesheet">
</head>
<body>
<p>grunt+seajs的運用實例</p>
</body>
</html>
文件路徑已經發生改變，沒有問題！
上面的問題還需要繼續深挖，還是有很多不懂，但是先結束這一階段的探索。后面的學習，另開一篇。
吐槽（+_+）：
這幾天搗鼓grunt搜索了N次，幾乎沒有搜索到有用的信息。
而且絕大多數雷同！或者含糊其辭，前后矛盾！
於是只有自己看npm里面的東西，只想說太尼瑪費勁了！全英文，還是怪自己沒有看英文版本的習慣。