碼雲(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分支上執行這個合並行為;