构建前端自动化工作流环境

需要安装的工具 nodejs nvm

需要了解一些自动化方法：npm bower gulp

- 了解什么是Node，什么是NPM；（Node.js）

- 掌握Bower的使用；

- 熟练使用Less/Sass；

- 搭建一个自己的自动化工作流环境（需要不依赖后端环境在前端启动一个服务测试前端）；

+ 自动编译

+ 自动合并

+ 自动刷新

+ 自动部署

## 为什么要有自动化的流程(不依赖后端前端库标准化前端人员只许关注业务实现)

- 在我们的开发过程中有大量的重复操作

- DRY Don't repeat yourself

- 开发人员的精力应放在哪？创造，新的一切

## 1.Node环境(一个js运行环境搭建自动化主要为搭建一个服务端运行前端js和html)

### 1.1.什么是Node

- Node.js 可能类似jquery.js

- 不是JS文件，也不是一个JS框架（）

- 而是Server side Javascript runtime, 服务端的一个JS运行时

- 我们可以在NODE运行JS代码

- alert();ECMAScript JS- ES BOM DOM

- node中只能运行ECMAScript，无法使用 BOM 和 DOM

- 目前我们的JS是运行在浏览器内核中

- PHP是什么？是一门脚本语言也是一个运行环境

- 为什么Node选中了JS，

- 说到底就是一个 JS运行环境

- 目前有两个分支

+ Node.js 0.12.7 官方版本要求尽善尽美

+ IO.js 是社区的产物，不是官方的东西，io.js有很多新特性，迭代非常快，社区推进非常快

+ 15年两者合并，发布node第一个正式版 4.0，迭代速度又慢了

+ node 5.x == io.js

+ node 4.0 == node

### 1.2.Node环境搭建（node安装比较简单需要引入一个nvm(是一个node管理工具可以管理多个node版本)）

#### 1.2.1.Mac

- 安装包的方式

+ [pkg]( https://nodejs.org/dist/v5.5.0/node-v5.5.0.pkg)

- NVM （Node Version Manager）

```bash

$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.30.2/install.sh | bash

$ echo '. ~/.nvm/nvm.sh' >> .bash_profile

$ nvm install stable

$ nvm alias default stable

```

#### 1.2.2.Windows

- 安装包的方式 (安装参考 http://blog.csdn.net/zhouhao88410234/article/details/79541322)

+ [msi_x64]( https://nodejs.org/dist/v5.5.0/node-v5.5.0-x64.msi)

+ [msi_x86]( https://nodejs.org/dist/v5.5.0/node-v5.5.0-x86.msi)

- NVM（Node Version Manager）

- 因为NODE版本比较多，开发人员可能依赖很多版本

- 通过NVM，可以轻松切换于不同的版本之间

环境变量配置

NVM_HOME=C:\Develop\nvm

NVM_SYMLINK=C:\Develop\nodejs

NPM_HOME=C:\Develop\nvm\npm

PATH=%NVM_HOME%;%NVM_SYMLINK% ;%NPM_HOME%

- Node.js是一个轻内核（本身没有什么功能）的东东，所有的功能都要功能包提供

- node官方提供了一些最基础的包

### 1.3.NPM（node的包管理工具类似后端的maven）

#### 1.3.1.什么是NPM

https://www.npmjs.com/ 需要安装的包都在这里面

- Node Package Manager

- Node应用程序依赖包的管理工具

- 安装卸载更新之类的操作

#### 1.3.2.为什么使用NPM(

- 包很多

- 场景：我需要用一个A，A依赖B，B依赖C

- 常见的包管理工具都有循环依赖的功能

- 你只需记住你要什么东西

用户目录下创建一个文件 .npmrc 工具是node自带的不需要安装

C:\Users\zhouhao\.npmrc C:\Users\zhouhao\AppData\Roaming 默认的 npm-cache

#### 1.5.3.常见的NPM操作

// 安装一个包，默认安装最新稳定版本

// 初始化操作，给项目添加一个配置文件 package.json （类似maven的pom.xml）

npm init 初始化生成 package.json npm init --yes

npm install package_name

npm install package_name@版本号

npm install --save package_name 会添加依赖版本 dependencies

npm install --save-dev package_name 添加在开发时候依赖的包生成环境不会依赖 devDependencies

npm install -g bower 全局安装

// npm init --yes参数走默认配置

- 如果官方数据源太慢使用

- https://npm.taobao.org/

*****

## 2.Bower (需要安装github)

//安装报错

git", exit code of #128 fatal: unable to access ' https://github.com/twbs/bootstrap.git/': SSL read:

git config --global url."https://".insteadOf git://

### 2.1.什么是Bower

- [官网] http://bower.io/

- web应用程序依赖项管理工具

### 2.2.为什么使用Bower

- 方便便捷的方式管理包，和npm类似

### 2.3.Bower实践

- npm install -g bower // -g:global

- 修改npm全局路径，就是在用户目录下添加.npmrc文件

*****

## 3.Sass/LESS

*****

## 4.Gulp

### 4.1.Gulp简介

- 链接：

+ [官网]( http://gulpjs.com/)

+ [中文网]( http://www.gulpjs.com.cn/)

- 就是用来机械化的完成重复性质的工作

- gulp的机制就是将重复工作抽象成一个个的任务，

### 4.2.Gulp准备工作

- 安装Node.js

- 安装 gulp 命令行工具

+ ` npm install --global gulp`

- 初始化 gulp 项目

- 创建任务 - gulpfile.js

npm install --save-dev gulp

'use strict';

var gulp = require('gulp');

gulp.task('hello', function() {

console.log('hello');

});

const zip = require ( 'gulp-zip' ) ;

gulp. task ( 'compile' , [ 'build' ] , () => {

gulp.src( 'dist/*' )

.pipe(zip( 'archive.zip' ))

.pipe(gulp. dest ( 'dist' )) ;

}) ;

## 当下的前端开发

- 不再是简简单单的使用HTML+CSS+JavaScript这些简单的技术构建网页应用程序了

- 我们要提高效率，就必须减少重复的工作

- 使用less之类预处理的CSS coffeescript

- 提供开发阶段的便利，开发阶段更快捷

- 现在的开发行业优质的开发人员是不应该将精力放在这些重复性质的工作上

- Gulp就是一种可以自动化完成我们开发过程中大量的重复工作

+ 预处理语言的编译

+ js css html 压缩混淆

+ 图片体积优化

- 除gulp之外还有一些类似的自动化工具，比如 grunt

- what how why

## Gulp简介

- 当下最流行的自动化工具

+ 什么是自动化构建工具？

+ 自动完成一系列重复的操作

* less → css

* coffeescript → js

* css压缩

* js混淆

* html压缩

* img尺寸优化

* 。。。。

- 链接：

+ [官网]( http://gulpjs.com/)

+ [中文网]( http://www.gulpjs.com.cn/)

- gulp的包既包含工具，也包含一些编程的API

## 准备工作

- 安装Node.js

+ Node.js 给前端带来了一场工业革命

+ http://npm.taobao.org/

+ 安装完成过后可以通过命令行工具node -v

+ 安装nodejs过程会自动安装npm(node packages manager)

+ npm 3 以前的版本文件依赖是层级依赖

+ npm 3 以后依赖关系改为平行依赖（windows上路径过长问题）

+ gulp本身是node的模块

- 安装 gulp 命令行工具

+ `npm install -g gulp`

+ -g 指的是在全局作用域中安装

+ 测试命令 gulp -v

- 初始化 gulp 项目

+ 在本地安装gulp包

+ npm install gulp --save

- 创建任务 - gulpfile.js

+ gulpfile.js 就是gulp的主文件

## 基本使用

- 定义一个任务

- 复制单个文件

- 复制多个文件

- [globs匹配语法]( https://github.com/isaacs/node-glob)

+ src/\*

+ src/\*/\*

+ src/\*\*/\*

+ src/\*.jpg

+ src/\*.{jpg,png}

+ 多个globs

* ['src/\*.{jpg,png}','a/a.html']

- 排除某些文件

+ !xxxxx

- 默认任务

+ gulp 中的任务名有个特殊值 default

- 文件监视自动执行任务

### 4.4.常用插件

- [编译 Less：gulp-less]( https://www.npmjs.com/package/gulp-less)

- [ 创建本地服务器：gulp-connect]( https://www.npmjs.com/package/gulp-connect)

- [ 合并文件：gulp-concat]( https://www.npmjs.com/package/gulp-concat)

- [ 最小化 js 文件：gulp-uglify]( https://www.npmjs.com/package/gulp-uglify)

- [重命名文件：gulp-rename]( https://www.npmjs.com/package/gulp-rename)

- [ 最小化 css 文件：gulp-minify-css]( https://www.npmjs.com/package/gulp-minify-css)

- [ 压缩html文件 gulp-minify-html]( https://www.npmjs.com/package/gulp-minify-html)

- [ 最小化图像：gulp-imagemin]( https://www.npmjs.com/package/gulp-imagemin)

https://browsersync.io/

构建前端自动化工作流环境

猜你喜欢