主流前端集成方案
Yeoman webapp集成腳手架工具：代碼校驗弓熏，測試憎瘸，壓縮
Bower: 下載管理框架荣暮、庫
Grunt| Gulp ?Build tool
codekit ?mac平臺
解決問題：1硬纤、代碼風格統(tǒng)一敞峭，強制開發(fā)規(guī)范
2、維護前期開發(fā)的組件庫
3球订、模塊化前端項目
4后裸、完善服務器部署前的壓縮流程
扁平化
Node.js
安裝 Nodejs官網
hombrew cakebrew免記命令行
npm Node Package Manager
命令行 $ npm install -g grunt-cli
yo 安裝
$npm install -g yo
$yo -v
Bower 安裝
$ npm install -g bower
$bower -v
grunt安裝
$npm install -g grunt-cli
執(zhí)行grunt
$grunt
ls
-al 把隱藏文件及以點命名的文件列出來
rm -rf 刪除，防止詢問
yo 搭建項目
mkdir yo-in-action
cd yo-in-action
mkdir angular-in-action //項目目錄名
$cd angular-in-action
$yo angular learnangular//項目名
bower包管理器
$mkdir bower-in-action
$cd bower-in-action
$mkdir jb-in-action//項目名
$cd jb-in-action //包管理地址
$bower install jquery
$bower install bootstrap
1.當bower中不存在包時冒滩，可用github短語安裝
$bower install jquery/jquery(注冊賬號名/項目名）
2.完整的項目地址安裝
$bower installhttps://github.com/jquery/jquery.git
3.通過url安裝
$bower install url
bower 兩個配置文件bower.json ?bowerrc
bower install 按照配置項去下載微驶，保持最新的組件，避免和全局混淆
bower init 配置項
vim bower.json 預覽文件
$bower install angular - -save-dev
vim .bowerrc 生成文件
{
“proxy” : “代理”开睡，
”timeout”:
}
vim index.html 生成文件
grunt 實際應用
$mkdir grunt-in-action
$cd?grunt-in-action
$mkdir grunt-by-yo
$cd grunt-by-yo
$yo webapp grunt-by-yo
task ? options ? target
$grunt sass:dist
$grunt sass
從無到有構建grunt項目
$mkdir grunt-in-action
$cd grunt-in-action
$mkdir grunt-empty
$cd grunt-empty
$vim index.html
$mkdir js
$cd js/
$cd ..
$npm init(老項目本身包含則忽略）
$entry point :index.js
test command:
git responsiry:
license ISC 開源
npm install grunt —save-dev(依賴項）
npm install load-grunt-tasks —save-dev
npm install time-grunt —save-dev
Gruntfile.js
“use strick"
module.exports = function(grunt) {
require(“l(fā)oad-grunt-tasks”)(grunt)
require(“time-grunt”)(grunt)
var config = {
app: “app”,
dist:”dist"
}
grunt.initConfig({
config: config,
copy: {
dist: {
src: “"
dest:
}
});
}
組合
pwd 查看當前目錄
al 把隱藏文件和以點命名的文件詳細列出來
^較寬松的版本限制
~較嚴格
yo 全局安裝 generator
調用時 yo + 名
npm install -g generator-webapp
yo webapp
yo webapp —help
yo angular:controller MyNewController
npm run serve
git clone
https://github.com/yeoman/yeoman.github.io.gityeoman.io
npm install
