一、搭建环境
1.1 调试工具：batarang
Chrome浏览器插件
主要功能：查看作用域、输出高度信息、性能监控
1.2 依赖软件：Node.js
下载：https://nodejs.org/en/download/
node-v8.9.1-win-x64.zip
淘宝NPM镜像：http://npm.taobao.org
# 查看版本
node -v
npm -v
# 用这个淘宝镜像，安装插件比较快
npm i -g cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 查看版本
cnpm -v
# npm是node包管理器
# cnpm也是node包管理器，镜像由淘宝提供的
离线安装
# 下载
# https://registry.npmjs.org/npm/-/npm-5.5.1.tgz
# 执行
npm i -g npm-5.5.1.tgz
cnpm基本命令
cnpm list -g # 查看全局安装的包
1.3 依赖管理工具：bower
bower https://bower.io
安装
# 安装
cnpm i -g bower
# 查看版本
bower -v
# 常用命令
bower init
bower install
bower uninstall
# 配置文件
.bowerrc 修改安装目录
bower.json 管理第三方依赖
操作
# 克隆远程项目
git clone git@gitee.com:yysue/angularjs-lagou.git
# 创建并切换到开发目录
cd E:git_homeangularjs-lagou
# 创建bower配置文件
bower init
# 说明
# name --- 项目名：webapp
# description --- angularjs webapp
# mainfile --- 不用写
# keywords --- 关键字：angularjs
# authors --- yysue
# 执行完bower init命令后在当前目录下生成bower.json配置文件
# 安装angular
bower install --save angular
# 说明
# --save 保存到配置文件
# 下载的依赖的默认安装目录在当前目录下的bower_components
# 切换版本
bower install --save angular#1.2
# 安装其他模块
bower install --save ui-router
bower install --save ngCookies validation ngAnimate
通过配置文件修改依赖安装目录
# 添加配置文件
touch .bowerrc
# 创建以点开头的文件及文件夹
echo ''>.file
touch .file
mkdir .folder
# 配置文件内容
{
"directory": "lib"
}
# 测试，再次安装一个依赖
bower install --save requirejs
# 说明
# 现在安装的依赖统一安在了lib目录下了
# 还会把以前安装的依赖统一复制到该路径下
# 默认安装在bower_components
# 删除依赖
bower uninstall requirejs
1.4 代码管理工具：git
1.5 css预编译处理：less
less文件-------->css文件
Less中文网 http://lesscss.cn
在线less编译器 http://tool.oschina.net/less
常用语法：定义变量、后代选择器、文件引用 、函数
// 定义变量
@bg_color:#000;
@bg_color
// 后代选择器
.frame {
background-color:@bg_color;
.select {
100px;
}
&:after {
content: "";
}
}
// 文件引用
@import "1.less";
// 函数
.fun(@px) {
height: 10px;
@px;
}
// 引用函数
.fun(123px);
1.6 自动化构建工具：gulp
gulp中文网 http://www.gulpjs.com.cn
源码合并压缩
优点：基于流、任务化
常用API：src、dest、watch、task、pipe
安装
cnpm i -g gulp
添加gulp模块
# 初始化配置文件
npm init
# node添加模块
cnpm i --save-dev gulp
# 批量添加其他模块
cnpm i --save-dev gulp-clean gulp-concat gulp-connect gulp-cssmin gulp-imagemin gulp-less gulp-load-plugins gulp-plumber gulp-uglify open
编写自动化脚本
gulpfile.js
var gulp = require('gulp');
var $ = require('gulp-load-plugins');
var open = require('open');
var app = {
srcPath: 'src/',
devPath: 'build/',
prdPath: 'dist/',
}
gulp.task('lib', function(){
gulp.src('bower_components/**/*.js') // 读取文件
.pipe(gulp.dest(app.devPath + 'vendor'))
.pipe(gulp.dest(app.prdPath + 'vendor'));
});
执行
gulp lib