前端自动化工作流环境

前端自动化工作流环境

原文链接：https://blog.csdn.net/zxiang248/article/details/52472237

 

学习目标

• 了解什么是Node，什么是NPM
• 掌握Bower的使用
• 熟练使用Less/Sass
• 搭建一个自己的自动化工作流 
  
  • 自动编译
  • 自动合并
  • 自动刷新
  • 自动部署(将文件合并压缩)
• GIT与GitHUB 
  
  • master 托管源文件
  • gh-pages 托管部署文件
  • 在git上搭建自己的blog

为什么要自动化流程

• 开发过程中有大量重复性工作
• Don’t repeat yourself

1.Node环境

1.1.什么是Node

• 不是JS文件，也不是JS框架
• 而是Server side Javascript runtime,服务端的一个JS运行时
• 我们可以直接在Node中执行JS代码（内部含有JS引擎，是Chrome v8引擎）
• alert(); ECMAScript JS-ES BOM DOM
• node中只能运行ECMAScript,无法使用DOM 和 BOM
• 目前我们的JS是运行在浏览器内核
• PHP是什么？脚本语言 运行环境
• nodejs有两个分支 
  
  • Node.js
  • IO.js 开源社区
  • 15年 两者合
  • nvm(Node版本管理工具)
  • 因为Node版本比较多,开发人员可能依赖很多版本
  • 通过NVM，可以轻松切换于不版本之间

NVM_HOME=C:Develop
vm
NVM_SYMLINK=C:Develop
odejs
NPM_HOME=C:Develop
vm
pm

• 1
• 2
• 3

1.2.Node环境配置

1.2.3环境变量

• 环境变量就是操作系统提供的系统级别用于存储变量的地方
• 系统变量和环境变量
• 系统变量：所有当前用户共享的变量（自己的电脑一般只有一个用户），建议将自己配置的环境变量放在用户变量中，这样用户变量比较干净。
• path变量（不区分大小写）
• path 相当于一个路径的引用

• 只要添加到path变量的值，都可以在任何目录下搜索

• 命令行命令(用来执行当前目录下的文件) 
  cd: change directory

  1.3Node的用途

  REPL环境（控制台环境）

  1.3.1 开发web应用

  • 做动态网站
  • 开发提供数据的服务端API

  1.3.2 前端开发工具基础

  • NodeJS给前端以及整个开发行业带来了一场工业革命
  • 结束刀耕火种

1.4Node开发Web应用Demo

• node.js 轻内核 所有功能都要功能包提供
• node官方提供一些最基础的包

1.4.1 复习请求和响应

客户端发送到服务端：请求报文 
服务端发送到客户端：响应报文

1.5.NPM

1.5.1 什么是NPM

• Node Package Manager
• Node 应用依赖包的管理工具
• 安装卸载更新之类的操作

1.5.2 为什么使用NPM

• 包很多
• 场景：我需要A,A依赖B,B依赖C
• 常见的包管理工具都有循环依赖的功能
• 你只需要记住你要什么东西

1.5.3 常见的NPM操作

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

install packageName
// -save
// -yes参数走默认配置

• 1
• 2
• 3

//初始化操作,给项目添加一个配置文件

npm init

• 1

给项目添加一个配置文件

---

2.Bower

2.1 什么是Bower

• [官网] （http://bower.io）
• web应用程序依赖项管理工具

2.2 为什么使用Bower

• 方便便捷的方式管理包

2.3 Bower实践

• npm install -g bower // -g:global
• 修改npm全局路径，就是在用户目录下添加.npmrc的文
• npm config list //打印npm配置的清单 
  

  ---

gulp

当下的前端开发

• 不再是简简单单的使用html+css+javascript这些简单的技术构建的网络应用程序了
• 我们要提高效率，就必须要减少重复的工作
• 使用less之类预处理的css coffeescript
• 提供开发阶段的便利，开发阶段更快捷
• 现在的开发行业优质的开发人员是不会把精力放在重复工作上的
• -Gulp就是一种可以自动化完成我们开发过程中大量重复工作 
  
  • 预处理语言的编译
  • js css html 压缩混淆
  • 图片体积优化、
• 除gulp之外还有一些类似的自动化工具Grunt
• what how why

Gulp简介

• 当下最流行的自动化工具 
  
  • 什么是自动化构建工具？
  • 自动完成一系列重复的操作
  • less->css
  • coffeescript
  • css压缩
  • js压缩
  • html压缩
  • img尺寸优化
  • 。。。。。。
• 链接 ： 
  
  • [官网]（http://gulpjs.com/）
  • 中文网
• 就是用来机械化的完成重复性质的工作
• gulp的机制就是将重复的工作抽象成一个个的任务