Grunt.js 上手

標籤：des   tar   c   http   get   com   

Official Site gruntjs.org/docs/getting-started.html

或者看http://tgideas.qq.com/webplat/info/news_version3/804/808/811/m579/201307/216460.shtml

 

 

grunt可以幫我們做什麼
grunt是一個自動化工具 自動壓縮js css 建立相關的檔案&檔案夾

首先grunt需要運行在NodeJS的環境下
安裝Grunt之前，可以在命令列中運行node -v查看你的Node.js版本
node環境(>0.8.0)

node環境包括npm包管理工具
npm是一個Node.js的包管理器，運行在命令列下，用於管理應用的依賴 (更通俗點 你可以通過它來安裝 刪除東西)

安裝grunt CLI 也就是grunt命令列工具
npm install -g grunt-cli
安裝結束後，會告知安裝的位置
/usr/local/lib/node_modules/grunt-cli、

這條命令將會把grunt命令植入到你的系統路徑中，這樣就允許你從任意目錄來運行它(定位到任意目錄運行grunt命令)。

如何使用？
在命令列中使用grunt xxx命令 即可執行預先設定好的工作(預先設定的工作儲存在Gruntfile.js中)
PS 此命令沒有安裝grunt 它只是安裝了全域可用的命令列工具

配置
Gruntfile.js本身會讀同目錄下的package.json
所以實際上配置有兩個檔案 json主要是項目資訊
而Gruntfile.js存放的是自動化的工作設定

package.json可以通過npm init自動產生(推薦)
記住name項的內容就行 其他隨意填
關於entry js 暫時不清楚
這是的json結果(去掉了不必要的東西)
{
"name": "protest1",
"version": "0.1.0",
"dependencies": {
"grunt-contrib-uglify": "^0.2.7",
"grunt": "^0.4.4"
}
}

當然可以直接抄官方文檔中的內容 只不過關於各個依賴的版本我們不清楚 所以依靠init命令產生最好

安裝grunt
npm install grunt --save-dev
完成後會更改package.json
查看一下 發現多出了這個
"devDependencies": {
"grunt": "^0.4.4"
}

關於Gruntfile.js
一個例子
module.exports = function(grunt){

// 項目配置
grunt.initConfig({
pkg: grunt.file.readJSON(‘package.json‘),
uglify: {
options: {
banner: ‘/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n‘
},
build: {
src: ‘src/<%=pkg.name %>.js‘,
dest: ‘build/<%= pkg.name %>.min.js‘
}
}
});

// 載入提供"uglify"任務的外掛程式
grunt.loadNpmTasks(‘grunt-contrib-uglify‘);

// 預設任務
grunt.registerTask(‘default‘, [‘uglify‘]);
}

pkg這個變數中的key就是json檔案中的key 在uglify中 設定了需要被壓縮的源檔案路徑、以及輸出的路徑
其中輸出的檔案名稱前半部分就是在json中定義的名字

運行
假如name我設定為test1
name這個配置就會讀src目錄下的test1.js並壓縮輸出到build目錄中