流行框架第一天:构建前端自动化工作流环境
1.Node环境
1.1什么是Node
2.bower
web应用程序依赖项管理工具
npm install -g bower //-g:global
修改npm全局路径,就是在用户目录下,添加一个.npmrc文件
3.sass/less
Gulp
是一种可以自动化完成开发过程中大量的重复工作
预处理语言的编译
js css html压缩混淆
图片体积优化
类似还有grunt
官网http://gulpjs.com
中文网http://www.gulpjs.com.cn
就是用来机械化的完成重复性质的工作
gulp的机制就是将重复工作抽象成一个个的任务
4.2 Gulp准备工作
安装node.js
安装gulp命令行工具
npm install -g gulp
初始化gulp项目
创建任务 -gulpfile.js
4.3基本使用
4.4常用插件
编译less:gulp-less
创建本地服务器:gulp-connect
合并文件:gulp-concat
最小化js文件:gulp-uglify
重命名文件:gulp-rename
最小化css文件:gulp-minify-css
压缩html文件:gulp-minify-html
最小化图像:gulp-imagemin
流行框架第二天:git与angular入门
复习
-node Nodejs
+一个js的运行环境
+主要用于开发web应用程序
+很多的前端开发工具都是基于node平台
+所有的工具就相当于一些软件
-nvm(可选的)
+node version manager :node的版本管理工具
+因为node的版本多,很多时候我们可能依赖很多版本,并要求自由切
换
nvm use [对应的版本号] [平台架构32/64]
nvm install [arch]
nvm uninstall [arch]
nvm list查看已经安装的版本
官网:https://github.com/coreybutler/nvm-windows
-npm
+ node package manager (node的包管理工具)
+ npm install xxx 安装一个包到项目本地
+安装完成后项目根目录下会多一个node_modules文件夹,所有的下载
下来的包全部在里面
+ 由于需要记录项目依赖哪些东西,所以需要一个配置文件,
package.json,通过npm init命令生成。
+ 以后安装包的时候将其–save
+ –save就是将我们安扎un个的包名字和包版本记录到配置文件中的
dependencies节点中
+ –save-dev
+ 项目依赖分两种,一个就是普通的项目依赖比如bootstrap,还有一
中只是开发阶段需要用的,这种属于开发依赖比如gulp,开发依赖最终
记录在devDependencies节点里面
+ npm install xxx -g (全局安装包)
+如果你安装的是一个工具,工具要在每一个地方都能用
1.命令行创建npm的配置文件
npm init
2.添加一个gulp的依赖
npm install gulp –save-dev
3.在项目根目录下添加一个gulpfile.js文件,这个是gulp的主文件,
这个文件名是固定的。
4.在gulpfile中抽象我们需要做的任务
gulpfile.js
/**
1.less编译 压缩 合并
2.js合并 压缩 混淆
3.img复制
4.html压缩
*/
-Bower
+ Bower就是用来管理项目中所有的依赖,主要用与web页面开发时使
用的包管理,如jquery,bootstrap
+
-Gulp
-http://www.ydcss.com/archives/94
-msi - microsoft installer微软安装器
Git
什么是GIT
-是一个源代码管理工具
-在一个项目中,凡是由开发人员写的都是源代码
-源代码有必要管理起来
-让源代码可以被追溯,记录每次变更的内容,谁变更的。
-GIT是Linux之父,当年为了维护管理linux的源代码写的工具
-GIT之前很多使用svn vss tfs hs ..
koala_2.0.4_setup.exe
portableGit-2.7.0-64-bit.7z.exe
SourceTreeSetup_1.7.0.32509.exe
环境变量:
%NVM_HOME%;%NVM_SYMLINK%;%NPM_HOME%;%GIT_HOME%\bin;
git –version
https://guides.github.com
安装GIT
-git命令行工具
-基于git命令行的一个客户端软件,提供一个界面去管理源代码
GIT命令操作
- 初始化一个本地GIT仓储
cd当前项目目录
git init //初始化一个本地的仓库
就是在本地文件夹中添加一个.git的文件夹,用于记录所有项目变更信
息
- 查看本地仓储的变更状态
git status
用于查看本地仓储的状态
第一次查看,显示的是一坨没被跟踪的文件
git status -s //是输出简要的变更日志
-添加本地暂存(托管)文件
git add .
可以将一个没有被跟踪的文件添加到跟踪列表
类似于node_modules这种性质的文件是不应该被跟踪的
- 添加本地GIT忽略清单文件
在代码库文件夹的根目录添加一个.gitignore文件
此文件用于说明忽略的文件有哪些
node_modules
dist
*.js
.
-提交被托管的文件变化到本地仓储
git commit
git commit -m’修改了什么什么什么’
-对比差异
git diff
可以用于对比当前状态和版本库中状态的变化
-提交日志
git log
可以查看提交日志
- 回归到指定版本
git reset –hard 2d2250
-为仓储添加远端地址