码云(gitee)的使用教程 码云gitee百度百科

• nodejs 第三方平台：npmjs.org

  • 使用nodejs下载器：
    • 1. 原生下载器(自带)：npm
      2. 国内镜像下载器：cnpm
      3. yarn依赖管理器：暂时不推荐
  • 使用npm安装cnpm
  • 三方包的分类：
    • 全局包：提供在命令行里面的指令，通过命令行直接使用功能
    • 局部包：需要以.js文件为媒体引入并使用其相应的功能，使用和内置模块非常相似
    • 安装指令：npm install cnpm -g --registry=https://registry.nlark.com

• nodejs 热启动工具

  • 使用前把之前的node指令替换成nodemon指令

nodejs局部模块使用

• 用啥直接下载：
  • cnpm i axios --save：下载axios并用nodejs记录下来
  • 我们在安装局部模块的时候会在当前文件夹产生两个文件夹：
    • node_modules/文件夹 : 里面装的所有的局部模块代码还有依赖
    • package.json ：项目说明书：用json格式描述当前项目的构成
  • 当我们下载完本地模块的时候，我们可以在当前文件夹之中随意引入并使用模块
    • 引入模块方式和内置模块引入方式完全一样

nodejs项目环境搭建

• 所谓的项目环境搭建
  • 项目：独立的文件夹
  • 项目的名称：文件名，文件夹名都不能和内置模块或者第三方模块同名
  • 文件夹内部结构
    • 配置信息
    • 模块源码
• nodejs允许我们根据 package.json 一键下载内部依赖
• 0 - 1 建立项目：
  • 创建package.json:cnpm init -y
  • 安装两个gulp文件：
    • 全局gulp：cnpm i gulp-cli-g
    • 局部gulp：cnpm i gulp --save

gulp

• 构建工程化环境

• 文件流的转存，转存过程之中的处理

• PC端开发，gulp作为曾经的主流工程化工具

• 目前而言 gulp的生态计划已经被webpack全部霸占

• 很多现有的管理系统模板，都是使用gulp作为工程化环境

• 环境搭建：

  • 下载全局gulp：cnpm i gulp-cli-g
  • 下载局部gulp：cnpm i gulp --save

• gulp配置

  • 在安装好环境的文件夹里创建gulpfile.js配置文件
  • 我们把所有配置信息都写进gulpfile.js之中

• guipfile.js配置

  • 需求目标：
  • 自定义gulp执行

• 运行步骤：

  • 引入本地安装好的gulp指令

  • gulp.task("指令名","执行指令的函数")

    • 执行指令的函数要求必须是 async
    • 必须在gulp环境配置的文件夹之中输入指令 gulp 指令名

    gulp.task("sayhello", async() => {
        console.log("hello gulp");
    });
    

    • gulp.src([找到对应的源文件]) 返回值是一个文件数据流
    • .pipe( 数据流的操作方法 )
    • gulp.dest("文件路径") 把pipe之中的数据流转存到某个位置

    gulp.task("html", async() => {
        // 路径都是从gulpfile.js开始查找的,以gulfiles为起始点
        gulp.src(["./index.html"])
            .pipe(gulp.dest("../dist"));
           
        // 带有规则的字符串路径
        gulp.src(["./src/*.html"])
        	.pipe(gulp.dest("./dist"))
    })
    

• 浏览器端的js是事件驱动，服务器端的js是指令驱动

• 监听：

  • 找到监听文件
  • 监听文件改变之后，执行某个指令
    • gulp.watch：文件进行监听
    • gulp.series：同步任务队列
    • gulp.parallel：异步任务队列

  gulp.task("watch", async() => {
      gulp.watch(["./index.html"], gulp.series(["html"]));
  })
  

html结构拆分

• 因为html结构太过庞大，所以我们要对其进行拆分

• components(组件) template(模板)

• gulp插件：

• 1. gulp-file-include用于整合拆分出来的html结构合并成一个页面

  • 1. 下载插件 ：cnpm i gulp-file-include --save

    2. 引入：const fileinclude = require("gulp-file-include")

    3. 配置指令

       // 对html多增加一个插件处理; 
       .pipe(fileinclude({
           prefix: '@@',
           basepath: '@file'
       }))
       

babel

• 使用babel进行编译，将ES6转换为ES5

• babel的安装：cnpm i --save gulp-babel @babel/core @babel/preset-env

• babel的使用

  const gulp = require('gulp');
  const babel = require('gulp-babel');
   
  gulp.task('default', () =>
      gulp.src('src/app.js')
          .pipe(babel({
      	// 必须添加版本号 
              presets: ['@babel/env']
          }))
          .pipe(gulp.dest('dist'))
  );
  

项目启动

• 约定俗称的项目启动指令：npm run(可以省略) start
• 我们编写npm开头的指令需要在package.json之中编写

版本管理工具

• 在项目开发阶段，每个人对项目的更新都会被记录
• 我们有了这个工具之后可以在任意版本之中进行穿梭
• 版本管理工具可以依赖平台实现多人协作开发
• 可以提高代码的安全性
  • git可以实现代码的备份
• 版本管理工具不只有git
  • SVN

git

• 本地仓库：本地操作

  • 1. 创建本地仓库( 非规范操作，规范操作下不需要此步骤 )

       指令：git init

  • 2. 把当前文件夹之中的所有文件放入暂存区( 正在关注的文件，此时文件不会被放入仓库之中生成版本 )

       指令：git add -A

    3. 把暂存区里面的文件放入本地仓库( 用版本管理系统管理文件，文件会生成唯一版本号 )

       指令：git commit -m "这个指令之后必须添加注释"

• 提交本地版本；之前：

  • 配置全局用户名，邮箱
  • 指令：git config --global user.email "邮箱名"
  • 指令：git config --global user.name "用户名"

• 提交版本的作用：

  • 版本回溯：

    • 找到之前提交的版本号

    • 指令：git reflog

    • 版本回溯指令

    • 指令：git reset --hard 版本号

• 远程操作

  • 平台：github ，gitlab(企业级) ，gitee(国内)
  • gitee

• 远程操作指令：

  • 新建仓库时候用的指令：(把远程仓库直接下载到本地)
  • git clone 仓库地址(https地址)
    • 特性：仓库下载的时候是以文件夹的形式下载的
    • clone下来的仓库是自带本地仓库的，我们不需要额外的git init

• 仓库构成

  • 本地仓库
    • 1. .git(仓库源文件，这个文件我们不操作)
      2. 分区：
         • 工作区(workspace)：但凡是我们看得见摸得着的东西都在工作区中
         • 缓存区/暂存区：标记需要版本管理的文件，文件的当前状态也会被记录，这个区域是看不见的，在我们概念之中存在
         • 我们通过git add 把工作区的文件/文件夹放入暂存区，被暂存区关注
         • 本地仓库：把暂存区之中的代码进行本地备份，创建版本，这个代码备份就存储在本地仓库之中。本地仓库是不可见的
      3. 工作区新增内容：
         • 在vscode里面会有提示
           • 绿色：新增文件
           • 棕色：修改文件
           • 红色：删除文件
         • 颜色提示可能有延时出现的情况
      4. 目标：把新增文件提交到远程仓库
         • 把文件放入到暂存区之中
         • 把文件放入到本地仓库之中
         • 本地仓库推送到远程进行更新：
           • 指令：git push -u origin master
           • origin：是一个变量代表远程仓库的地址；在clone的时候这个地址就已经被设置好了
           • master: 分支名

• 注意事项：

  • 在远程clone下来的仓库才可以push，本地仓库不能push
  • 仓库不能嵌套仓库

• 单人开发工作流程

  • 1. 远程建立仓库
    2. 把远程仓库clone到本地
    3. 在远程仓库文件夹内添加代码
    4. 开发结束
       • add：git add -A
       • commit：git commit -m "这个指令之后必须添加注释"
       • push：git push -u origin master
    5. 开发结束

• 多人协作开发

  • 1. 组织：一组开发人员集合; 组织之中的所有人都可以进行项目开发

分支

• 分支就是专属于你的当前版本的代码克隆;

• 创建分支 :

  • 复制一份代码，供我们使用;

    • 创建分支指令 : git branch 分支名

  • 切换分支 ;

    • 切换分支指令 : git checkout 分支名
    • 可以使用指令 查看分支信息: git branch (-a查看远程分支信息参数)

  • 注意 : 我们在切换分支时，当前分支必须提交版本 ;

• 分支操作存在简写 : git checkout -B 分支名 (切换并创建分支)

• 删除分支 : git branch -D 分支名;

• 把分支提交到仓库之中 :

  • git push -u origin 分支名 ;

• 分支合并进度更新;

  • 1. 合并远程分支 :
    • 指令：git pull origin 分支名 ；
    • 处理冲突即可
  • 2. 本地分支合并
    • 指令：git merge 分支名 (会把其他分支内容合并到当前分支上);
    • 我们需要合并的分支大概率不是master，所以我们应该在master分支上执行这个合并行为;