grunt 筆記一

Yeoman

官方站點：http://yeoman.io    ---   http://materliu.yo.org/

安裝指令：npm install -g yo

驗證方法：yo -v

定義：現代webapp的腳手架工具

作用：在web的立項階段，使用yeoman來生成項目檔案，代碼結構。yeoman自動将最佳實踐和工具整合進來，大大加速和友善了我們後續開發。

Bower

官方站點：http://bower.io -- materliu.bower.org

安裝指令：npm install -g bower

驗證方法：bower -v

定義：web的包管理器

組成：架構、庫、公共部分等，bower主要用來跟蹤管理它們

Grunt

官方站點：http://gruntjs.com

安裝指令：npm install -g grung-cli

驗證方法：grunt

定義：build tool

作用：減少像壓縮，編譯，單元測試，代碼校驗這種重複且無業務關聯的代碼

Yeoman實戰

站點：materliu.yo.org/generators

安裝angular:npm install -g generator-angular

（1）如何使用？

建立測試目錄：mkdir yo-in-action 

進入測試目錄：cd yo-in-action 

建立項目目錄：mkdir angular-in-action 

進入項目目錄：cd angular-in-action 

生成angular項目：yo angular learnangular

（2）相關指令：

pwd：檢視目前目錄

ls -al：所有詳細檔案清單

rm(删除目錄) -rf(修飾參數遞歸删除且不需要二次确認) 檔案名

（3）package.json解析

dependencies:項目在生成環境中所需要的依賴

devDependencies:開發過程中所依賴的包

^（尖括号）是指一個比較寬松的對版本的限制，它隻限制主機闆本号(0.4.2 0.4.9 0.5.0)

~比較嚴格(0.4.2 0.4.9)

（4）其他檔案解析

Gruntfile.js

grunt配置檔案

bower.json

bower配置檔案，前端架構群組件

.travis.yml

為開源打造持續內建環境

.jshintrc

jshint的配置檔案

.gitignore

忽略目前不上傳到git檔案

.gitattrubutes

git配置項

.editorconfig

第三方配置檔案

.bowererrc

bower自身配置項

app

檔案項目檔案

views

angular views

Bower實戰

（1）如何使用？

建立測試目錄：mkdir bower-in-action 

進入測試目錄：cd bower-in-action 

建立項目目錄：mkdir jquery-bootstrap-in-action 

進入項目目錄：cd jquery-bootstrap-in-action 

下載下傳安裝：

bower jquery

bower bower

進入bower_components：cd bower_components

檢視詳細目錄檔案：ls -al

Grunt實戰

（1）如何使用？

建立測試目錄：mkdir grunt-in-action 

進入測試目錄：cd grunt-in-action 

建立項目目錄：mkdir grunt-by-yo

進入項目目錄：cd grunt-by-yo

生成webapp項目：yo webapp grunt-by-yo

Grunt老項目

（1）如何使用？

建立測試目錄：mkdir grunt-in-action 

進入測試目錄：cd grunt-in-action 

建立項目目錄：mkdir grunt-empty

進入項目目錄：cd grunt-empty

建立app/index.html和app/js/index.js

建立package.json：npm init

安裝：

npm install grunt --save-dev

npm install load-grunt-tasks --save-dev

npm install time-grunt --save-dev

npm install grunt-contrib-copy --save-dev

npm install grunt-contrib-clean --save-dev

建立notepad Gruntfile.js

配置Gruntfile.js

指令：grunt copy

(多出一個dist檔案夾，含有index.html)

指令：grunt clean

(dist檔案夾下index.html消失)

'use strict';

module.exports = function(grunt){
	// 引入
	require('load-grunt-tasks')(grunt);
	require('time-grunt')(grunt);

	// 配置項目路徑
	var config = {
		app:'app',
		dist:'dist'
	}

	// 任務配置
	grunt.initConfig({
		config:config,

		copy:{
			/*dist_html:{
				// 源檔案,數組或字元串
				src:'<%= config.app %>/index.html',
				// 目标檔案，你會發現多出一個dist檔案夾，且下面有個index.html
				dest:'<%= config.dist %>/index.html'
			},
			dist_js:{
				src:'<%= config.app %>/js/index.js',
				dest:'<%= config.dist %>/js/index.js'
			}*/
			/*dist:{
				files:[
					{
						// 源檔案,數組或字元串
						src:'<%= config.app %>/index.html',
						// 目标檔案，你會發現多出一個dist檔案夾，且下面有個index.html
						dest:'<%= config.dist %>/index.html'
					},
					{
						src:'<%= config.app %>/js/index.js',
						dest:'<%= config.dist %>/js/index.js'
					}
				]
			}*/
			/*dist:{
				files:{
					'<%= config.dist %>/index.html': '<%= config.app %>/index.html',
					'<%= config.dist %>/js/index.js': ['<%= config.app %>/js/index.js']
				}
			}*/
			dist_html:{
				files:[
					{
						expand:true,
						cwd:'<%= config.app %>/',
						src:'**/*.js',
						dest:'<%= config.dist %>/',
						ext:'.min.html',
						extDot:'last',
						flatten:true,    // true将中間各層目錄去掉
						rename: function(dest, src){   // 找回去掉的中間各層目錄
							return dest + 'js/' + src;
						}

					}
				]
			}
		},
		clean:{
			dist:{
				/* 你會發現dist下的index.html消失了
				src:['<%= config.dist %>/index.html','<%= config.dist %>/index.js']
				*/
				// 就連js檔案夾也會删除，要是不想删除js檔案夾就需要引入額外參數
				src:['<%= config.dist %>/**/*'],
				/*
				 *方法一
				 filter:'isFile'
				 *方法二
				filter:function(filepath){
					return (!grunt.file.isDir(filepath))
				}*/
			}
		}
	});
}