grunt簡單的入門

grunt

是一套前端自動化工具，一個基於nodeJs的命令行工具，通常用於：
① 壓縮文件
② 合併文件
③ 簡單語法檢查

對於其餘用法，我還不太清楚，咱們這裏簡單介紹下grunt的壓縮

初學，有誤請包涵

1--nodeJs環境

由於grunt是基於nodeJs的，因此首先各位須要安裝nodeJS環境

2--安裝grunt

有了nodeJs環境後，咱們即可以開始搞grunt了，由於咱們可能在任何目錄下運行打包程序，因此咱們須要安裝CLI
官方推薦在全局安裝CLI（grunt的命令行接口）

npm install -g grunt-cli

這條命令將會把grunt命令植入系統路徑，這樣就能在任意目錄運行他，緣由是

每次運行grunt時，它都會使用node的require查找本地是否安裝grunt，若是找到CLI便加載這個本地grunt庫
而後應用咱們項目中的GruntFile配置，並執行任務

經歷纔是關鍵，因此行動一下

————————————————————————————————————

首先在E盤建立文件夾 grunt
在裏面新增兩個文件（不要問爲何，）

package.json

{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-jshint": "~0.10.0",
    "grunt-contrib-nodeunit": "~0.4.1",
    "grunt-contrib-uglify": "~0.5.0"
  }
}

建立 gruntfile.js文件
空着先

完了咱們須要在grunt目錄下執行 npm install將相關的文件下載下來：

$ cd E:

$ cd grunt

而後目錄裏面就會增長一些文件

並建立一個文件夾，添加一個js文件

而後在Gruntfile中新增如下代碼（先別管，增長再說）

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/app.js',
				dest:'script/app.min.js'
			}
		}
	});
	// 加載插件
	grunt.loadNpmTasks('grunt-contrib-uglify');
	// 默認任務，輸入grunt執行
	grunt.registerTask('default',['uglify']);
}

而後運行 grunt

OK，多了一個文件

uglify是壓縮文件
build 中的src是要被壓縮的文件，在src中的app.js

執行grunt後 若是存在script文件 就把壓縮後的.min.js文件放入 不然新建script文件夾