AngularJS搭建环境

一、搭建环境

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_home\angularjs-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

https://git-scm.com

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 {
        width: 100px;
    }
    &:after {
        content: "";
    }
}

// 文件引用
@import "1.less";

// 函数
.fun(@px) {
    height: 10px;
    width: @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

1.7 编辑器：atom

https://atom.io