前端自动化工作流环境

来源:互联网 发布:js获取img标签的src 编辑:程序博客网 时间:2024/03/29 21:07

学习目标

  • 了解什么是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\nvmNVM_SYMLINK=C:\Develop\nodejsNPM_HOME=C:\Develop\nvm\npm

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参数走默认配置

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

npm init

给项目添加一个配置文件


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的机制就是将重复的工作抽象成一个个的任务
0 0
原创粉丝点击