專業名詞

B2B2C

B2B2C是一種電子商務類型的網絡購物商業模式，B是BUSINESS的簡稱，C是CUSTOMER的簡稱，第一個B指的是商品或服務的供應商，第二個B指的是從事電子商務的企業，C則是表示消費者

前後端分離模式

關于gulp的那些事專業名詞前後端分離模式gulpgulp的使用前的準備gulp的初體驗gulp任務沒有完成的處理方式gulp的核心文法gulp的常見插件開發環境和生産環境其他知識

node作用

node一門背景語言可以查詢資料庫充當接口來使用以前的使用方式
在前後端分離模式裡面，node充當了另外一種角色自動化建構工具

自動化建構工具

node 來充當自動化建構工具工具建構好了說明架構就搭建好了。

想使用一行指令來自動完成以下的所有功能

作用

壓縮代碼
把es6文法 => es5
sass 或者less => css
,…

思考

開發項目的時候所寫的代碼：

加上人可以看懂的注釋
變量命名盡量有語義化
html結構的時候盡量規整。。

把這套代碼上線了運作：

網站的代碼有很容易看懂的注釋？？不希望有注釋安全性體積
money => o

有哪些自動化建構工具

這些自動化建構工具底層都是通過 node 來實作。

gulp
grunt 最老的先驅。。基本很少用了
webpack

gulp

概念

gulp 基于nodejs 一個架構或者一個庫或者一個平台，自動化建構工具的作用

gulp該如何學習

掌握gulp核心文法
掌握基于gulp一些常見插件的使用（不要背代碼，而是會複制和修改就可以了。）

官網

英文官網-最權威

中文網

gulp的使用前的準備

gulp是基于nodejs 先安裝node

關于gulp的那些事專業名詞前後端分離模式gulpgulp的使用前的準備gulp的初體驗gulp任務沒有完成的處理方式gulp的核心文法gulp的常見插件開發環境和生産環境其他知識
要全局安裝gulp 一輩子就裝一次。。。
如果網絡太慢，切換成淘寶鏡像 cnpm
```
npm i gulp -g 
           
```
關于gulp的那些事專業名詞前後端分離模式gulpgulp的使用前的準備gulp的初體驗gulp任務沒有完成的處理方式gulp的核心文法gulp的常見插件開發環境和生産環境其他知識
需要在你的node項目中再進行局部安裝

gulp的初體驗

在你項目的根目錄建立一個檔案 gulpfile.js

在該檔案中直接複制以下代碼

// 1 引入gulp的核心包
const gulp=require("gulp");

// 2 編寫gulp函數 = 任務
// gulp.task(任務名稱，任務的執行邏輯)
gulp.task("hello",()=>{
  console.log("hello gulp任務被執行了");
});

在指令行中執行任務

當檔案名叫做

gulpfile.js

可以被省略

當任務名稱叫做

default

可以被省略

#  gulp -f 要執行的gulpjs檔案 任務名稱
gulp -f gulpfile.js hello

# 最簡潔執行任務的指令
gulp  =====  gulp -f gulpfile.js defalut 
gulp -f gulpfile.js

gulp任務沒有完成的處理方式

提示資訊：

hello

這個任務沒有完成

你是不是忘記加一些設定來告訴 gulp 說任務已經完成

通過手動條用 done函數的方式解決

gulp.task("hello",(done)=>{
  console.log("hello gulp任務被執行了");
  // 來告訴gulp 任務已經完成
  // done 結束的信号
  done();
});

傳回一個 promise對象來解決了解中的了解 --看不懂

gulp.task("hello", () => {
  return new Promise((resolve, reject) => {
    console.log("hello gulp任務被執行了");
    resolve();
  });
});

傳回gulp檔案流的方式常見

gulp.task("copy",()=>{
  // 擷取要操作的源檔案
 return gulp.src("src/index.html")
  // 管道 人家定的文法 
  .pipe(gulp.dest("dist/"));
})

gulp的核心文法

gulp.task 定義任務

// gulp.task(任務名稱，任務的執行邏輯)
gulp.task("hello",()=>{
  console.log("hello gulp任務被執行了");
});

gulp.src 和gulp.dest

src

擷取要操作的檔案 src擷取的檔案支援數組的形式

gulp.src(["index.html","login.html"])

還支援正則的文法

gulp.src("*.html")

dest

把檔案存放到哪裡去

// 3 編寫 複制的任務 
gulp.task("copy",()=>{
  // 3.1 擷取要操作的檔案
 return gulp.src("./src/index.html")
  // pipe 管道 加工廠
  .pipe(gulp.dest("./dist/"));
})

series(…tasks)

讓gulp任務按順序執行，想按循序執行 1，2，3，4個任務必須要借助這個api的功能。

代碼

// 4 編寫按順序執行的任務
// 4.1 列印 字元串 1
gulp.task("t1",(done)=>{
  console.log("任務 1 ");
  done();
});
// 4.2 列印 字元串 2
gulp.task("t2",(done)=>{
  console.log("任務 2 ");
  done();
});
// 4.3 列印 字元串 3
gulp.task("t3",(done)=>{
  console.log("任務 3 ");
  done();
});
// 4.4 列印 字元串 4
gulp.task("t4",(done)=>{
  console.log("任務 4 ");
  done();
});

// 4.5 編寫一個入口的任務
// series(["任務1","任務2"])
gulp.task("default",gulp.series(["t1","t2","t3","t4"]));

watch

可以實作監控檔案的改動，進而去觸發其他的任務的執行

// 5.1 編寫監控檔案的任務
gulp.task("watch",()=>{
  // 5.2 監控檔案
  gulp.watch("src/index.html",gulp.series("time"));
});
// 5.3  編寫檔案改動的之後的執行邏輯的  任務  
gulp.task("time",(done)=>{
  console.log(Date.now());
  done();
});

gulp的常見插件

希望利用這一些常見的插件來實作一些功能

删除功能
編譯sass檔案或者 less 或者 stylues css檔案
對css檔案添加對應的浏覽器字首
壓縮 js 壓縮css 。。
es6 => es5 …
就去對應的插件來實作。。。。

插件網站1

插件網站2

del

實作删除功能

安裝

編寫代碼

// 1 引入gulp 核心包
const gulp=require("gulp");
// 2 引入 删除 del 包
const del = require('del');

// 3 編寫 删除任務
gulp.task("delete",()=>{
  // 3.1 執行删除
  // del(["要删除的檔案的路徑"])
 return del(["./dist"]);
});

運作

gulp-less

less文法小體驗

# $color:red; sass 

@color:red; less

安裝

編寫任務

const gulp = require("gulp");
// 1 引入編譯less檔案的包
const less = require("gulp-less");

// 2 編寫  編譯less檔案的任務
gulp.task("css", () => {
  // 2.1 擷取 要操作的less檔案
  return (
    gulp
      .src("./src/css/*.less")
      //  2.2 使用less插件 編譯檔案
      .pipe(less())
      .pipe(gulp.dest("./dist/css/"))
  );
});

執行任務

gulp -f 02-gulpfile-less css

gulp-autoprefixer

可以實作自動幫們給css檔案添加對應的浏覽器相容性字首

安裝

npm install --save-dev gulp-autoprefixer

編寫任務

const gulp=require("gulp");
const less = require("gulp-less");
// 1 引入 添加css浏覽器字首的插件
const autoprefixer=require("gulp-autoprefixer");


// 2 編寫  編譯less檔案的任務
gulp.task("css", () => {
  return (
    gulp
      .src("./src/css/*.less")
      .pipe(less())
      // 2.1 使用添加浏覽器字首的插件
      .pipe(
        autoprefixer({
          // 相容 主流浏覽器的最新的個版本 
          browsers: ["last 2 versions"]
        })
      )
      .pipe(gulp.dest("./dist/css/"))
  );
});

執行

gulp -f 03-gulpfile-gulpAutoprefixer.js css

gulp-sourcemaps

可以幫我們生成對應的樣式檔案的map檔案友善我們去調試代碼

安裝

編寫代碼

const gulp=require("gulp");
const less = require("gulp-less");
const autoprefixer=require("gulp-autoprefixer");
// 01- 引入 生成map檔案的 插件
const sourcemaps = require('gulp-sourcemaps');

// 02 處理css
gulp.task("css", () => {
  return (
    gulp
      .src("./src/css/*.less")
      // 2.1 在生成css檔案之前 先記錄以下 less檔案的樣子
      .pipe(sourcemaps.init())
      .pipe(less())
      .pipe(
        autoprefixer({
          browsers: ["last 2 versions"]
        })
      )
      // 2.2 和css檔案同層級 也順帶生成一個 map檔案
      .pipe(sourcemaps.write("."))
      .pipe(gulp.dest("./ist/css/"))
  );
});

執行

gulp -f 04-gulpfile-map.js css

gulp-babel

負責将 es6 編譯成對應 es5插件

es6 變成es5

es7 變成 es6

es8變成 es7

es9 變成es8 7 6 …

babel很有遠見，發現後期過了幾年，可能會有其他不同的編譯的需求，那麼就定下一個規則要由哪個版本編譯成哪個版本必須通過配置的方式來使用否則無效

安裝

編寫任務

window.onload = function () {
  show("hello");

  function show(p1) {
    setTimeout(() => {
      let num = 100;
      console.log(`數組 ==== ${num}  ${p1}`);
    }, 1000);
    console.log(p1);
  }
};

添加babel獨有的配置檔案

在根目錄下建立檔案，名為 .babelrc

添加以下配置

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "browsers": ["last 2 years"]
      }
    }]
  ]
}

執行

gulp -f 05-gulpfile-es6.js js

gulp-uglify

醜化混淆

let num =100;

let o=100;

安裝

npm install --save-dev gulp-uglify

編寫代碼

const gulp=require("gulp");
const babel = require("gulp-babel");
// 1.0 引入 混淆 醜化插件
const uglify=require("gulp-uglify");

gulp.task("js",()=>{
  return  gulp.src("./src/js/*.js")
  .pipe(babel())
  // 2.0 開始醜化 js
  .pipe(uglify(
    // 舊版本這個插件 要手動的調用以下的參數 才是最醜，而新版本 的直接 預設就是最醜！！！
    {
      // 3.1 醜化的等級
      mangle: {
        // 3.1.1 最進階
        toplevel: true
      }
    }
  ))
  .pipe(gulp.dest("./dist/js/"));
});

執行

gulp -f .\06-gulpfile-uglify.js js

安裝

編寫任務

window.onload = function () {
  show("hello");

  function show(p1) {
    setTimeout(() => {
      let num = 100;
      console.log(`數組 ==== ${num}  ${p1}`);
    }, 1000);
    console.log(p1);
  }
};

添加babel獨有的配置檔案

在根目錄下建立檔案，名為 .babelrc

添加以下配置

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "browsers": ["last 2 years"]
      }
    }]
  ]
}

執行

gulp -f 05-gulpfile-es6.js js

gulp-file-include

檔案合并，html标簽檔案合并标簽的元件化的功能

安裝

編寫代碼

建立一個元件檔案夾 components 在裡面再建立一個元件檔案 header.html

index.html

引用剛才

header.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  @@include("header.html") 
</body>
</html>

編寫對應的gulp任務

const gulp=require("gulp");
// 1 引入 html檔案合并的包
const fileInclude=require("gulp-file-include");

// 2 編寫 處理 html的任務
gulp.task("html",()=>{
  return gulp
  // 2 擷取頁面檔案
    .src("src/index.html")
    .pipe(
      fileInclude({
        // 2.1 定義 fileInclude 規定的暗号
        prefix: "@@",
        // 2.2 定義的是 元件的路徑 
        basepath: "src/components/",
        // 2.3 可以傳入一個變量
        // context: {
        //   title: "我們的頁面"
        // }
      })
    )
    .pipe(gulp.dest("dist/"));
});

執行

gulp -f 07-gulpfile-fileInclude.js html

browser-sync

可以實作通過指令行來自動打開浏覽器
本地檔案的改變之後，浏覽器自動重新整理

安裝

編寫代碼

const gulp = require("gulp");
// 1.0 引入 浏覽器同步 插件
const browserSync = require("browser-sync");
const fileInclude=require("gulp-file-include");

gulp.task("html",()=>{
  return gulp
    .src("src/index.html")
    .pipe(
      fileInclude({
        prefix: "@@",
        basepath: "src/components/",
      })
    )
    .pipe(gulp.dest("dist/"));
});


// 2 自動打開浏覽器  監聽頁面改變 重新整理浏覽器
gulp.task("autopage", () => {
  // 2.1 使用插件 配置網站路徑和 端口号
  browserSync({ 
    // 2.1.1 配置伺服器資訊
    server:{
      // 2.1.1 配置打開 html的路徑 一定是 dist檔案夾裡面 
      baseDir:"./dist/"
    },
    // 2.2 定義端口号
    port:9999
  });

  // 2.2 檔案改變之後 才重新整理頁面  
  gulp.watch(["src/*.html","src/components/*.html"],gulp.series(["html","reload"]));
});


gulp.task("reload",(done)=>{
  // 開始重新整理頁面
  browserSync.reload();
  done();
});

// 2 定義預設任務
gulp.task("default",gulp.series(["html","autopage"]));

gulp-rev 和 gulp-rev-collector

靜态資源的指紋功能

浏覽器有時候會緩存一些同名的靜态資源
如何才可以不讓浏覽器使用緩存資源

每一個版本都改一下靜态資源的名字浏覽器發現靜态資源名字都不一樣，肯定就不會做緩存

插件的作用

gulp-rev 負責給靜态檔案添加指紋
gulp-rev-collector 負責講html檔案中的靜态資源的連結改成帶有指紋的連結

安裝

npm install --save-dev gulp-rev gulp-rev-collector

編寫代碼

const gulp=require("gulp");
const less = require("gulp-less");
const autoprefixer=require("gulp-autoprefixer");
const fileInclude=require("gulp-file-include");
// 1 引入添加指紋的 插件
const rev=require("gulp-rev");
// 1 引入 修改html檔案中的靜态資源的插件
const revCollector=require("gulp-rev-collector");


// 2 給樣式檔案添加指紋
gulp.task("css", () => {
  return gulp
      .src("./src/css/*.less")
      .pipe(less())
      .pipe(
        autoprefixer({
          browsers: ["last 2 versions"]
        })
      )
      // 2 給靜态資源添加指紋
      .pipe(rev())
      .pipe(gulp.dest("./dist/css/"))
      // 3 生成 字典檔案
      .pipe(rev.manifest({
        path:"rev-css.json"
      }))
      // 4 把這個字典檔案存放到哪裡去
      .pipe(gulp.dest("./rev/"));
  
});


// 3 處理html檔案 
gulp.task("html",()=>{
  return gulp
    .src(["src/index.html","./rev/*.json"])
    .pipe(
      fileInclude({
        prefix: "@@",
        basepath: "src/components/",
      })
    )
    // 3.1 使用插件來替換靜态資源
    .pipe(revCollector())
    .pipe(gulp.dest("dist/"));
});


gulp.task("default",gulp.series(["css","html"]));

執行

開發環境和生産環境

開發環境要的功能

gulp_dev.js

gulp_dev.md

先删除舊的檔案
要編譯less檔案
要給css添加對應的浏覽器字首
要生成樣式檔案的同時也順便生成map檔案，js檔案也是有map檔案

js的map檔案可以直接在谷歌浏覽器裡面将代碼映射回到es6的源代碼中
将es6的文法編譯成 es5文法
不要醜化或者混淆就是代碼
要實作标簽檔案的元件化功能
要實作自動打開浏覽器和自動根據檔案的改變去重新整理浏覽器
不要添加靜态資源指紋的功能
複制第三方的插件資源到 dist目錄下

生産環境

gulp_pro.js

先删除舊的檔案
要編譯less檔案
要給css添加對應的浏覽器字首
将es6的文法編譯成 es5文法
要醜化或者混淆就是代碼
要實作标簽檔案的元件化功能
要添加靜态資源指紋的功能
複制第三方的插件資源到 dist目錄下

其他知識

快捷在運作的指令的方式

在

package.json

中的

scripts

屬性中進行編輯

"scripts": {
    "dev": "gulp -f gulp_dev.js default ",
    "pro": "gulp -f gulp_pro.js default "
  }

在對應的指令行中輸入指令 npm run dev === gulp -f gulp_dev.js default

gulp-dev

/* 開發環境做的事 */
console.log("======開發環境做的事======");
// 1. 先删除舊的檔案 del
// 2. 要編譯less檔案  gulp-less
// 3. 要給css添加對應的浏覽器字首  gulp-autoprefixer
// 4. 要生成樣式檔案的同時也順便生成map檔案，js檔案也是有map檔案  gulp-sourcemaps
// 5. 将es6的文法編譯成 es5文法 gulp-babel
// 7. 要實作标簽檔案的元件化功能 gulp-file-include
// 8. 要實作自動打開浏覽器和自動根據檔案的改變去重新整理浏覽器 browser-sync
// 10. 複制第三方的插件資源到 dist目錄下   gulp.src  gulp.dest

// 1 引入插件
const gulp = require("gulp");
const del = require("del");
const less = require("gulp-less");
const autoprefixer = require("gulp-autoprefixer");
const sourcemaps = require("gulp-sourcemaps");
const babel = require("gulp-babel");
const fileInclude = require("gulp-file-include");
const browserSync = require("browser-sync");

// 2 删除 任務
gulp.task("del", () => {
  return del(["./dist"]);
});

// 3 處理css 任務
gulp.task("css", () => {
  return (
    gulp
      .src("./src/css/*.less")
      // 2.1 在生成css檔案之前 先記錄以下 less檔案的樣子
      .pipe(sourcemaps.init())
      .pipe(less())
      .pipe(
        autoprefixer({
          browsers: ["last 2 versions"]
        })
      )
      // 2.2 和css檔案同層級 也順帶生成一個 map檔案
      .pipe(sourcemaps.write("."))
      .pipe(gulp.dest("./dist/css/"))
  );
});

// 4 處理js
gulp.task("js",()=>{
  return  gulp.src("./src/js/*.js")
  // 4.1 在轉換成es5之前 先記錄以下 es6代碼的樣子
  .pipe(sourcemaps.init())
  .pipe(babel())
  // 4.2 和生成的js同層級也生成 map檔案 
  .pipe(sourcemaps.write("."))
  .pipe(gulp.dest("./dist/js/"));
});

// 5 處理html 任務
gulp.task("html",()=>{
  return gulp
    .src("src/index.html")
    .pipe(
      fileInclude({
        prefix: "@@",
        basepath: "src/components/",
      })
    )
    .pipe(gulp.dest("dist/"));
});

// 5.5 執行 負責第三方插件 任務
gulp.task("lib",()=>{
  return  gulp.src("./src/lib/**")
  .pipe(gulp.dest("./dist/lib/"));
});

// 6 自動打開浏覽器 和 監聽檔案的改變 重新整理浏覽器
gulp.task("autopage", () => {

  browserSync({ 
    server:{
      baseDir:"./dist/"
    },
    port:9999
  });
  // 監聽html檔案的改變 進而重新執行 html 任務   重新整理浏覽器
  gulp.watch(["src/*.html","src/components/*.html"],gulp.series(["html","reload"]));
  // 監聽 less檔案， 重新執行 css 任務  重新整理浏覽器
  gulp.watch(["src/css/*.less"],gulp.series(["css","reload"]));
    // 監聽 js檔案， 重新執行 js 任務  重新整理浏覽器
  gulp.watch(["src/js/*.js"],gulp.series(["js","reload"]));
  
});

gulp.task("reload",(done)=>{
  browserSync.reload();
  done();
});

// 0 定義預設任務
gulp.task("default", gulp.series(["del","css","js","html","lib","autopage"]));

gulp-pro

/* 生産環境做的事 */
console.log("======生産環境做的事======");
// 1. 先删除舊的檔案 
// 2. 要編譯less檔案 
// 3. 要給css添加對應的浏覽器字首
// 3.5 壓縮css代碼 
// 4. 将es6的文法編譯成 es5文法
// 5. 要醜化或者混淆就是代碼
// 6. 要實作标簽檔案的元件化功能
// 7. 要添加靜态資源指紋的功能 
// 8. 複制第三方的插件資源到 dist目錄下 


const gulp = require("gulp");
const del = require("del");
const less = require("gulp-less");
const autoprefixer = require("gulp-autoprefixer");
const cssmin = require('gulp-cssmin');
const babel = require("gulp-babel");
const uglify=require("gulp-uglify");
const fileInclude = require("gulp-file-include");
const rev=require("gulp-rev");
const revCollector=require("gulp-rev-collector");

gulp.task("del", () => {
  return del(["./dist"]);
});

// 3 處理css 任務
gulp.task("css", () => {
  return gulp
      .src("./src/css/*.less")
      .pipe(less())
      .pipe(
        autoprefixer({
          browsers: ["last 2 versions"]
        })
      )
      .pipe(cssmin())
      .pipe(rev())
      .pipe(gulp.dest("./dist/css/"))
      .pipe(rev.manifest({
        path:"rev-css.json"
      }))
      .pipe(gulp.dest("./rev/"));
});

// 4 處理js
gulp.task("js",()=>{
  return  gulp.src("./src/js/*.js")
  .pipe(babel())
  .pipe(uglify( { mangle: { toplevel: true } } ))
  .pipe(rev())
  .pipe(gulp.dest("./dist/js/"))
  .pipe(rev.manifest({
    path:"rev-js.json"
  }))
  .pipe(gulp.dest("./rev/"));
});

// 5 處理html 任務
gulp.task("html",()=>{
  return gulp
  .src(["src/*.html","./rev/*.json"])
    .pipe(
      fileInclude({
        prefix: "@@",
        basepath: "src/components/",
      })
    )
    .pipe(revCollector())
    .pipe(gulp.dest("dist/"));
});

// 6 執行 負責第三方插件 任務
gulp.task("lib",()=>{
  return  gulp.src("./src/lib/**")
  .pipe(gulp.dest("./dist/lib/"));
});

gulp.task("default", gulp.series(["del","css","js","html","lib"]));

關于gulp的那些事專業名詞前後端分離模式gulpgulp的使用前的準備gulp的初體驗gulp任務沒有完成的處理方式gulp的核心文法gulp的常見插件開發環境和生産環境其他知識

專業名詞

B2B2C

前後端分離模式

node作用

自動化建構工具

作用

有哪些自動化建構工具

gulp

概念

gulp該如何學習

官網

gulp的使用前的準備

gulp的初體驗

gulp任務沒有完成的處理方式

通過 手動條用 done函數的方式解決

傳回一個 promise對象來解決 了解中的了解 --看不懂

傳回gulp檔案流的方式 常見

gulp的核心文法

gulp.task 定義任務

gulp.src 和gulp.dest

series(…tasks)

watch

gulp的常見插件

del

安裝

編寫代碼

運作

gulp-less

安裝

編寫任務

執行任務

gulp-autoprefixer

安裝

編寫任務

執行

gulp-sourcemaps

安裝

編寫代碼

執行

gulp-babel

安裝

編寫任務

添加babel獨有的配置檔案

執行

gulp-uglify

安裝

編寫代碼

執行

安裝

編寫任務

添加babel獨有的配置檔案

執行

gulp-file-include

安裝

編寫代碼

執行

browser-sync

安裝

編寫代碼

gulp-rev 和 gulp-rev-collector

安裝

編寫代碼

執行

開發環境和生産環境

開發環境要的功能

生産環境

其他知識

快捷在運作的指令的方式

gulp-dev

gulp-pro

繼續閱讀

通過手動條用 done函數的方式解決

傳回一個 promise對象來解決了解中的了解 --看不懂

傳回gulp檔案流的方式常見