主流前端集成方案
Yeoman webapp集成脚手架工具：代码校验，测试，压缩
Bower: 下载管理框架、库
Grunt| Gulp Build tool
codekit mac平台
解决问题：1、代码风格统一，强制开发规范
2、维护前期开发的组件库
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
执行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(“load-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
网友评论