前端自动化工作流环境

前端自动化工作流环境

原文链接：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\nvm
NVM_SYMLINK=C:\Develop\nodejs
NPM_HOME=C:\Develop\nvm\npm
  • 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

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尺寸优化
    • 。。。。。。
  • 链接 ： 
  • 就是用来机械化的完成重复性质的工作
  • gulp的机制就是将重复的工作抽象成一个个的任务
posted @ 2019-06-20 15:38  鬼小妞  阅读(722)  评论(0)  编辑  收藏  举报