grunt是什麼，grunt就是個東西..css
grunt做爲一個前端構建工具，有資源壓縮，代碼檢查，文件合併等功能。html
下面就簡單瞭解grunt的使用。前端
1、環境配置node
grunt是基於nodejs的，因此須要一個 nodejs 環境，未了解的能夠 來這看看npm
仍是在windows下，json
首先要保證grunt命令可使用，因此要先使用npm安裝對應CLIwindows
npm install -g grunt-cli
安裝完成能夠命令行中輸入「grunt」測試是否安裝成功數組
安裝成功後sass
2、用法說明curl
grunt須要package.json文件描述，不少操做都直接經過這個json文件訪問，
須要Gruntfile.js文件，這是一個入口文件，grunt將從這裏開始，實現你的意圖。
因此，首先新建一個工程目錄grunt,再裏頭新建這兩個文件。
package.json須要嚴格的json格式，隨便寫入幾個key-value如：
{
"name": "grunt_test",
"version": "1.0.0"
}
Gruntfile.js 能夠初始成這個形式：
module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json')
});
//grunt.registerTask('default',[]);
};
這時咱們命令行到工程目錄裏頭，npm安裝好grunt支持，後面的參數--dev-save表示將此grunt支持添加到依賴中去
什麼叫添加到依賴中去？安裝好後，看看 package.json裏頭，是否是多了這個東西~
{
"name": "grunt_test",
"version": "1.0.0",
"devDependencies": {
"grunt": "^0.4.5"
}
}
好這時，咱們用grunt命令執行一下，果真出現了沒有default這貨，看了它是須要這貨的，那就把上頭那個註釋去掉，再試試
其實到這裏爲止已是最基本的流程了。
3、各插件使用
而通常經常使用方法是使用提供的 插件，進一步做處理
1）好比代碼壓縮：
html壓縮：htmlmin
css壓縮： cssmin
js壓縮：uglify
官方提供了充足的介紹，固然了，初次接觸，也很容易被各類繁雜的配置項搞混。
既然要壓縮代碼，這裏就在./static/script/目錄下新建一個test.js文件，隨便寫入幾句
function firstLetterToUp(str){
return String(str).replace('^\s*|\s*$')
.replace(/\b\w+\b/g,function(word){
word = word.toLowerCase();
return word[0].toUpperCase() + word.substring(1);
});
}
var s = firstLetterToUp(' aBCDE Bda erew');
console.log(s);
js代碼壓縮須要一個很經常使用的插件 grunt-contrib-uglify ,同理先npm安裝支持
能夠看到package.json也更新了
{
"name": "grunt_test",
"version": "1.0.0",
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-uglify": "^0.9.1"
}
}
相似的方法，html的安裝 grunt-contrib-htmlmin ,css的安裝 grunt-contrib-cssmin
安裝完後，接下來就是對Gruntfile.js更新配置項
grunt.initConfig：定義各類模塊的參數，每個成員項對應一個同名模塊。
grunt.loadNpmTasks：加載完成任務所需的模塊。
grunt.registerTask：定義具體的任務。第一個參數爲任務名，第二個參數是一個數組， 表示該任務須要依次使用的模塊。
各設置項都有通常用法，特殊的須要自行到官網查看說明，例如
- expand：若是設爲true，就表示下面文件名的佔位符（即*號）都要擴展成具體的文件名。
- cwd：須要處理的文件（input）所在的目錄。
- src：表示須要處理的文件。若是採用數組形式，數組的每一項就是一個文件名，可使用通配符。
- dest：表示處理後的文件名或所在目錄。
- ext：表示處理後的文件後綴名。
目前的Gruntfile.js配置：
module.exports = function(grunt){
grunt.initConfig({
//獲取到package.json各項
pkg: grunt.file.readJSON('package.json'),
//js壓縮
uglify: {
//使用options這個名聲
options: {
//爲true表示容許添加頭部信息
stripBanners: true,
//在頭部添加 js文件名和時間的註釋
banner: '/*! <%=pkg.name%>-<%=pkg.version%>.js <%=grunt.template.today("yyyy-mm-dd") %> */\n'
},
//files名稱任意，好比下方的build 關鍵是src-dest要指示好
files: {
src: './static/script/test.js',
dest: 'build/static/script/<%=pkg.name%>-<%=pkg.version%>.min.js'
}
},
//css 壓縮
cssmin: {
options:{
report:'gzip'
},
build: {
expand: true,
cwd: './static/style',
src: ['test.css'],
dest: './build/static/style'
}
},
//html 壓縮
htmlmin: {
options: {
removeComments: true,
removeCommentsFromCDATA: true,
collapseWhitespace: true,
collapseBooleanAttributes: true,
removeAttributeQuotes: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeOptionalTags: true
},
build:{
expand: true,
cwd: './',
src: ['*.html'],
dest: './'
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-htmlmin');
grunt.registerTask('default',[
'uglify',
'cssmin',
'htmlmin'
]);
};
命令行執行看效果
固然了，還有圖片的壓縮 imagemin 也能夠去試試
2）jshint 代碼檢查
js代碼的檢查可使用 jshint插件
同理，先 裝好 grunt-contrib-jshint
檢查的規則見 DOCS
如
curly: 大括號包裹
eqeqeq: 對於簡單類型，使用===和!==，而不是==和!=
newcap: 對於首字母大寫的函數（聲明的類），強制使用new
noarg: 禁用arguments.caller和arguments.callee
sub: 對於屬性使用aaa.bbb而不是aaa['bbb']
undef: 查找全部未定義變量
boss: 查找相似與if(a = 0)這樣的代碼
node: 指定運行環境爲node.js
在Gruntfile.js中配置相關項：
module.exports = function(grunt){
grunt.initConfig({
//獲取到package.json各項
pkg: grunt.file.readJSON('package.json'),
//js壓縮
//... 省略
},
jshint: {
options: {
curly: true,
eqeqeq: true,
newcap: true,
noarg: true,
sub: true,
undef: true,
boss: true,
node: true,
globals: {
exports: true,
jQuery: true
}
},
files:['./static/script/test.js']
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-htmlmin');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.registerTask('default',[
'jshint',
'uglify',
'cssmin',
'htmlmin'
]);
};
修改個，再執行grunt,能夠看到出錯信息，且grunt再也不繼續執行
同理，csslint 也可做css的語法檢查，能夠去試試
3）使用 grunt-contrib-watch 插件
watch的使用會自動監聽修改，並grunt自動構建
同理，config中增添watch配置項
files表示要監聽的文件，能夠是單個值或數組；tasks表示監聽有改動後要執行什麼任務
watch: {
build: {
files: ['./static/style/*.css'],
tasks: ['cssmin'],
options:{
spawn: false
}
}
}
4)使用 grunt-contrib-sass 插件
這個插件能夠自動將sass編譯成css文件，再配合其餘插件的使用。美哉~
裝好支持依賴後，在config配置中增長：
sass:{
dist:{
options:{
//還記得這個不？這就是sass編譯時候四種style中的
style: 'expanded'
},
files:{
'./static/style/test.css':'./static/style/test.scss'
}
}
}
files中就定義爲 dest : src 的形式
經過watch的輔助，執行命令後，scss文件的每次改動，都能自動構建出新css
5）concat插件 文件合併
可使用相似這種方式實現
grunt.initConfig({
concat: {
options: {
separator: ';',
},
dist: {
src: ['src/intro.js', 'src/project.js', 'src/outro.js'],
dest: 'dist/built.js',
},
},
});
固然還有不少插件常常被使用，好比clean copy 等等。這些均可以在grunt的 插件中心 找到，帶contrib字樣的表示是官方提供的。
插件具體的用法，多種多樣，仍是自個去相應站點，好好讀一讀
其實grunt這構建工具使用起來很簡單，主要就是配置+一大堆配置。初期可能會對各配置項頭痛，但常常實踐，終會了然於胸的。