Web前端学习笔记——构建前端自动化工作流环境

目录

为什么要有自动化的流程

1.Node环境

1.1.什么是Node

1.2.Node环境搭建

1.3.Node用途

1.4.Node开发Web应用Demo

1.5.NPM

2.Bower

2.1.什么是Bower

2.2.为什么使用Bower

2.3.Bower实践

3.Sass/LESS

4.Gulp

4.1.Gulp简介

4.2.Gulp准备工作

4.3.基本使用

4.4.常用插件


为什么要有自动化的流程

  • 在我们的开发过程中有大量的重复操作
  • DRY Don't repeat yourself
  • 开发人员的精力应放在哪?创造,新的一切

  • 前端开发的编译操作

1.Node环境

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环境搭建

1.2.1.Mac

  • 安装包的方式
    • 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

  • 安装包的方式
    • msi_x64
    • msi_x86
  • NVM(Node Version Manager)
  • nvm(node version manager)
  • 因为NODE版本比较多,开发人员可能依赖很多版本
  • 通过NVM,可以轻松切换于不同的版本之间

```command

``` NVM_HOME=C:\Develop\nvm

NVM_SYMLINK=C:\Develop\nodejs

NPM_HOME=C:\Develop\nvm\npm

PATH=%NVMHOME%;%NVMSYMLINK%;%NPM_HOME%

1.2.3.环境变量

  • 环境变量就是操作系统提供的系统级别用于存储变量的地方

  • 系统变量和用户变量

  • 系统变量指的是所用当前系统用户共享的变量
  • 自己的电脑一般只有一个用户
  • 建议将自己配置的环境变量放在用户变量中,用户变量比较干净

  • 环境变量的变量名是不区分大小写的

  • 变量间运行相互引用

  • 特殊值:

  • PATH变量(不区分大小写)
  • PATH 相当于一个路径的引用
  • 只要添加到PATH变量中的路径,都可以在任何目录下搜索

  • 命令行

  • 可以用来执行当前目录下的文件
  • 命令

cd :change directory

  • Node.js是一个轻内核(本身没有什么功能)的东东,所有的功能都要功能包提供
  • node官方提供了一些最基础的包

1.3.Node用途

REPL环境(控制台环境)

1.3.1.开发Web应用程序

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

1.3.2.前端开发工具基础

  • Node.js给前端乃至整个开发行业带来一场工业革命
  • 刀跟火种

1.4.Node开发Web应用Demo

1.4.1.复习请求与响应

客户端发送到服务端的东西称之为请求报文 服务端返回给客户端的东西称之为响应报文

1.5.NPM

1.5.1.什么是NPM

https://www.npmjs.com/ - Node Package Manager - Node应用程序依赖包的管理工具 - 安装卸载更新之类的操作

1.5.2.为什么使用NPM

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

1.5.3.常见的NPM操作

// 安装一个包,默认安装最新稳定版本 npm install package_name // --save // 初始化操作,给项目添加一个配置文件 npm init // --yes参数走默认配置

  • 如果官方数据源太慢使用
  • https://npm.taobao.org/

2.Bower

2.1.什么是Bower

  • 官网
  • web应用程序依赖项管理工具

2.2.为什么使用Bower

  • 方便便捷的方式管理包,zhuangbi

2.3.Bower实践

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

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


3.Sass/LESS


4.Gulp

4.1.Gulp简介

  • 链接:
    • 官网
    • 中文网
  • 就是用来机械化的完成重复性质的工作
  • gulp的机制就是将重复工作抽象成一个个的任务,

4.2.Gulp准备工作

  • 安装Node.js
  • 安装 gulp 命令行工具
    • npm install -g gulp
  • 初始化 gulp 项目
  • 创建任务 - gulpfile.js

4.3.基本使用

4.4.常用插件

  • 编译 Less:gulp-less
  • 创建本地服务器:gulp-connect
  • 合并文件:gulp-concat
  • 最小化 js 文件:gulp-uglify
  • 重命名文件:gulp-rename
  • 最小化 css 文件:gulp-minify-css
  • 压缩html文件 gulp-minify-html
  • 最小化图像:gulp-imagemin

你可能感兴趣的:(Web前端,WEB前端开发)