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))
}*/
}
}
});
}