JavaScript學習筆記-- GULP

GULP

gulp 是一個項目開發的自動化打包建構工具

基于 node 環境來運作的

什麼是自動化打包建構工具

比如

我們在開發的過程中，會寫到 js 檔案，css 檔案，等等

我們的項目如果想上線，那麼一定要體積小一點，檔案大小越小越好

而我們在寫 js 檔案的時候，會有很多換行/空格之類的東西

這些換行/空格都是占檔案體積的一部分

那麼我們在上線之前就要吧這些換行/空格盡可能的删除掉

我們又不能一個檔案一個檔案的去删除

就要用到一個自動化工具來幫助我們把這些多餘的東西幹掉

這個就是自動化工具的意義

常見的自動化打包建構工具

gulp

webpack

安裝 GULP

gulp 是一個依賴于 node 的環境工具

是以我們需要先安裝一個全局 gulp 依賴

直接使用 npm 去安裝就可以了

使用 npm 安裝全局依賴 gulp

我們這裡安裝一個 3.9.1 版本的就好了

$ npm install --global [email protected]

等待安裝完畢就好了

這個全局環境一個電腦安裝一次就好了

還是照例檢查一下是否安裝成功

$ gulp --version

使用 GULP

安裝完畢以後，我們就可以使用 GULP 對我們的項目進行自動化建構了

首先我們要有一個項目

gulp_demo 項目檔案夾
- src 項目源碼
  - css css 檔案夾
  - js js 檔案夾
  - pages html 檔案夾
  - sass sass 檔案夾
  - lib 第三方檔案夾
  - static 靜态資源檔案夾
    
    目錄結構不一定都是這個樣子

但是最好是一個便于管理的檔案夾目錄結構

因為是一個項目了，最好使用 npm 來幫我們管理一下

這樣可以記錄我們的下載下傳使用了那些依賴

是以在項目檔案夾 gulp-demo 裡面執行一個 npm 初始化

$ cd gulp_demo

$ npm init -y

執行完畢之後，再來看一下我們的項目目錄

gulp_demo
- src
- package.json
  
  項目 GULP 配置

我們之前已經安裝過 gulp 全局依賴了

但是每一個項目都要在安裝一次 gulp 的項目依賴

因為每一個項目的打包建構規則都不一樣，是以不能全都配置成一個

是以我們要在項目裡面再次進行 gulp 安裝

$ npm install -D [email protected]

項目中的 gulp 依賴要和全局 gulp 環境保持版本一緻

接下來就是對這個項目進行打包建構的配置

gulp 的使用，要在項目目錄下建立一個 gulpfile.js

在這個 gulpfile.js 檔案裡面進行配置

然後使用 gulp 進行建構的時候就會按照 gulpfile.js 檔案裡面的規則進行打包建構

再來看一下我們的目錄結構

- node_modules 依賴包目錄
- src 項目源碼
- gulpfile.js gulp 配置檔案
- package-lock.json 依賴下載下傳版本 json 檔案
- package.json 項目管理 json 檔案
  
  接下來我們就是在 gulpfile.js 檔案裡面進行配置，讓我們的打包建構可以生效

打包 CSS 檔案

我們從簡單的内容開始，先來打包建構 css 檔案

其實就是在 gulpfile.js 裡面進行一些配置

第一個事情就是引入 gulp

// 我是 gulpfile.js 檔案// 1. 引入 gulpconst gulp = require('gulp')

gulp 是基于任務來完成建構的

是以我們要建立一個打包 css 的任務

// 我是 gulpfile.js 檔案// 1. 引入 gulpconst gulp = require('gulp')// 2. 建立一個 css 的任務// gulp.task() 是用來建立任務的// 參數一：任務名稱// 參數二：一個函數（這個任務要做什麼事情）gulp.task('css', function () {

})

有了任務以後，我們就要在 css 這個任務裡面寫一些這個任務要做的事情了

我們要把 ./src/css/所有css檔案都進行壓縮處理

這個時候我們自己完成不了，就需要借助一個第三方依賴

npm i -D gulp-cssmin

下載下傳完畢以後，去檔案中進行配置

// 我是 gulpfile.js 檔案// 1. 引入 gulpconst gulp = require('gulp')// 2. 引入 gulp-cssminconst cssmin = require('gulp-cssmin')// 2. 建立一個 css 的任務gulp.task('css', function () {

return gulp

.src('./src/css/**') // 對哪些檔案進行操作 .pipe(cssmin()) // 都做什麼，這裡做的就是進行 css 壓縮 .pipe(gulp.dest('./dist/css')) // 把壓縮完畢的檔案放在 dist 檔案夾下的 css 檔案夾 })

gulp.src() 是指找到那些檔案對其操作

gulp.pipe() 是指要做什麼

gulp.dest() 是指輸出到哪個目錄下，如果沒有這個目錄存在會自動建立這個目錄

是以上面哪個 css 任務的意思就是

把 ./src/css/ 目錄下的所有檔案

進行壓縮

壓縮完畢後放在 ./dist/ 下的 css/ 檔案夾下

接下來，就是執行一下這個叫做 css 的任務就行了

直接在控制台使用指令

表示運作 gulpfils.js 配置檔案中的 css 任務

$ gulp css

執行完畢以後，就會在 gulp_demo 目錄下生成一個 dist/ 檔案夾

裡面就有我們壓縮好的 css 檔案

自動添加字首

我們希望在 css 壓縮之前，能幫我自動把需要字首的屬性自動把字首添加上就好了

這個是可以做到的

我們又需要一個依賴了

npm i -D gulp-autoprefixer

安裝完還是去到檔案中進行配置

// 我是 gulpfile.js 檔案// 1. 引入 gulpconst gulp = require('gulp')

// 2. 引入 gulp-cssminconst cssmin = require('gulp-cssmin')

// 2-1. 引入 gulp-autoprefixer const autoPrefixer = require('gulp-autoprefixer')

// 2. 建立一個 css 的任務gulp.task('css', function () {

return gulp
    .src('./src/css/**')   
    .pipe(autoPrefixer({
        browsers: ['last 2 versions']
    }))
    .pipe(cssmin())       
    .pipe(gulp.dest('./dist/css'))  })

因為添加字首需要在壓縮之前添加

是以我們就直接在任務裡面多做一個事情就行了

打包 SASS 檔案

接下來我們解決一下 sass 的問題

因為有的時候我們開發要使用 sass 是以我們要解決一下 sass 的問題

其實打包 sass 和 css 差不多，隻不過先要把 sass 解析成 css

.把 sass 解析成 css

.自動添加字首

.壓縮一下

.放到對應的檔案夾中

使用 gulp 解析 sass 檔案需要用到一個依賴

npm i -D gulp-sass

然後我們就去到配置檔案裡面進行配置就好了

// 2-2. 引入 gulp-sassconst sass = require('gulp-sass')

// 2-1. 建立一個 css 的任務gulp.task('css', function () {

return gulp
    .src('./src/css/**')   
    .pipe(autoPrefixer({
        browsers: ['last 2 versions']
    }))
    .pipe(cssmin())       
    .pipe(gulp.dest('./dist/css'))  })

// 2-2. 建立一個 sass 任務gulp.task('sass', function () {

return gulp
    .src('./src/sass/**')
    .pipe(sass())
    .pipe(autoPrefixer())
    .pipe(cssmin())
    .pipe(gulp.dest('./dist/css'))})

我們的 sass 檔案編譯完以後也是 css 檔案，是以就也放在 css 檔案夾下就好了

就是要注意一下别和本來 css 檔案夾下的檔案重名就好了

然後就可以去指令行執行 sass 這個任務了

執行 sass 任務

$ gulp sass

打包 JS 檔案

接下來就是打包一下 js 檔案了

其實套路是一樣的

先來做最簡單的操作

壓縮一下 js 檔案

需要用到一個依賴

npm i -D gulp-uglify

然後依舊是去到配置檔案中進行配置

// 2-1. 引入 gulp-cssminconst cssmin = require('gulp-cssmin')

// 2-2. 引入 gulp-autoprefixer const autoPrefixer = require('gulp-autoprefixer')

// 2-3. 引入 gulp-sassconst sass = require('gulp-sass')

// 3-1. 引入 gulp-uglifyconst uglify = require('gulp-urlify')

return gulp
    .src('./src/css/**')   
    .pipe(autoPrefixer({
        browsers: ['last 2 versions']
    }))
    .pipe(cssmin())       
    .pipe(gulp.dest('./dist/css'))  })

return gulp
    .src('./src/sass/**')
    .pipe(sass())
    .pipe(autoPrefixer())
    .pipe(cssmin())
    .pipe(gulp.dest('./dist/css'))})

// 3. 建立一個 js 任務gulp.task('js', function () {

return gulp
    .src('./src/js/**')
    .pipe(uglify())
    .pipe(gulp.dest('./dist/js'))})

然後我們去指令行執行 js 這個任務

執行 js 任務

$ gulp js

編譯 ES6 文法

之前我們學習 es6 的時候就說過

很多浏覽器不是很認識 es6 的文法

我們要把他編譯成 es5 的文法

是以我們在打包 js 檔案的時候，就要轉換一下

我們依舊是使用依賴來完成，隻不過 es6 轉 es5 需要三個依賴

npm i -D [email protected]

npm i -D babel-core

npm i -D babel-preset-es2015

然後我們就去配置檔案裡面進行配置就可以了

// 3-2. 引入 gulp-babel// es6 轉 es5 雖然需要下載下傳三個依賴，但是隻需要引入一個 gulp-babel 就可以了const babel = require('gulp-babel')

return gulp
    .src('./src/css/**')   
    .pipe(autoPrefixer({
        browsers: ['last 2 versions']
    }))
    .pipe(cssmin())       
    .pipe(gulp.dest('./dist/css'))  })

return gulp
    .src('./src/sass/**')
    .pipe(sass())
    .pipe(autoPrefixer())
    .pipe(cssmin())
    .pipe(gulp.dest('./dist/css'))})

return gulp
    .src('./src/js/**')
    .pipe(babel({
        presets: ['es2015']
    }))
    .pipe(uglify())
    .pipe(gulp.dest('./dist/js'))})

引入以後，隻要在壓縮之前執行一下轉碼就可以了

注意要傳遞一個參數

然後再次執行 js 任務就可以了

執行 js 任務$ gulp js

打包 HTML 檔案

接下來就要把 html 檔案解決一下了

還是一個套路

壓縮 html 檔案需要一個依賴

npm i -D gulp-htmlmin

下載下傳好以後去到配置檔案中進行配置

// 4. 引入 gulp-htmlminconst htmlmin = require('gulp-htmlmin')

return gulp
    .src('./src/css/**')   
    .pipe(autoPrefixer({
        browsers: ['last 2 versions']
    }))
    .pipe(cssmin())       
    .pipe(gulp.dest('./dist/css'))  })

return gulp
    .src('./src/sass/**')
    .pipe(sass())
    .pipe(autoPrefixer())
    .pipe(cssmin())
    .pipe(gulp.dest('./dist/css'))})

return gulp
    .src('./src/js/**')
    .pipe(babel({
        presets: ['es2015']
    }))
    .pipe(uglify())
    .pipe(gulp.dest('./dist/js'))})

// 4. 建立一個 html 任務gulp.task('html', function () {

return gulp
    .src('./src/pages/**')
    .pipe(htmlmin({
        removeEmptyAttibutes: true, // 移出所有空屬性            collapseWhitespace: true // 壓縮 html        }))
    .pipe(gulp.dest('./dist/pages'))})

這樣就配置完畢了

接下來就是去指令行運作一下 html 任務

運作 html 任務

$ gulp html

處理 LIB 和 STATIC 檔案

接下來我們就是處理 lib 和 static 裡面的檔案了

因為這些都是第三方的檔案和一些圖檔之類的資訊

不需要壓縮處理，隻要給我轉到 dist 檔案夾下就可以了

是以不需要依賴，直接處理就行

return gulp
    .src('./src/css/**')   
    .pipe(autoPrefixer({
        browsers: ['last 2 versions']
    }))
    .pipe(cssmin())       
    .pipe(gulp.dest('./dist/css'))  })

return gulp
    .src('./src/sass/**')
    .pipe(sass())
    .pipe(autoPrefixer())
    .pipe(cssmin())
    .pipe(gulp.dest('./dist/css'))})

return gulp
    .src('./src/js/**')
    .pipe(babel({
        presets: ['es2015']
    }))
    .pipe(uglify())
    .pipe(gulp.dest('./dist/js'))})

return gulp
    .src('./src/pages/**')
    .pipe(htmlmin({
        removeEmptyAttibutes: true, // 移出所有空屬性            collapseWhitespace: true // 壓縮 html        }))
    .pipe(gulp.dest('./dist/pages'))})

// 5. 建立一個 lib 任務gulp.task('lib', function () {

return gulp
    .src('./src/lib/**')
    .pipe(gulp.dest('./dist/lib'))})

// 6. 建立一個 static 任務gulp.task('static', function () {

return gulp
    .src('./src/static/**')
    .pipe(gulp.dest('./dist/static'))})

接下來就是去指令行執行 lib 任務和 static 任務

執行 lib 任務

$ gulp lib

執行 static 任務

$gulp static

批量執行任務

我們的幾個和檔案相關的任務都配置完畢了

但是我們不能在開發過程中一個任務一個任務的去執行

不友善也不是很隻能

是以我們要統一執行任務

這個時候就需要進行一個配置，讓幾個任務一起執行一下

這個不需要依賴，我們隻需要配置一個叫做 default 的任務

gulp 在運作的時候會預設執行 default 任務

return gulp
    .src('./src/css/**')   
    .pipe(autoPrefixer({
        browsers: ['last 2 versions']
    }))
    .pipe(cssmin())       
    .pipe(gulp.dest('./dist/css'))  })

return gulp
    .src('./src/sass/**')
    .pipe(sass())
    .pipe(autoPrefixer())
    .pipe(cssmin())
    .pipe(gulp.dest('./dist/css'))})

return gulp
    .src('./src/js/**')
    .pipe(babel({
        presets: ['es2015']
    }))
    .pipe(uglify())
    .pipe(gulp.dest('./dist/js'))})

return gulp
    .src('./src/pages/**')
    .pipe(htmlmin({
        removeEmptyAttibutes: true, // 移出所有空屬性            collapseWhitespace: true // 壓縮 html        }))
    .pipe(gulp.dest('./dist/pages'))})

return gulp
    .src('./src/lib/**')
    .pipe(gulp.dest('./dist/lib'))})

return gulp
    .src('./src/static/**')
    .pipe(gulp.dest('./dist/static'))})

// 7. 配置一個預設任務gulp.task('default', ['css', 'sass', 'js', 'html', 'lib', 'static'])

這樣配置完畢以後，當你運作 gulp 的時候，會自動執行 default 任務

然後 default 任務就會把後面數組中寫的幾個任務并行執行了

接下來就是去指令行裡面運作 gulp

運作 gulp，會預設執行 default 任務

$ gulp

清除 DIST 檔案夾

當你在編譯的時候，如果第一次編譯有一個叫做 a.css 的檔案，他會幫你編譯

後來你把 a.css 檔案改名字了，改叫 b.css，再次進行編譯的時候

會給你新生成一個 b.css 檔案在 dist 檔案夾中

之前的 a.css 檔案也不會消失

那麼這樣就不是很好了

我們比較好的做法是

在執行所有的編譯之前

先把 dist 檔案夾删除掉

然後再執行所有的編譯操作

這樣就不會用多餘的檔案留下了

這個時候我們就要使用一個依賴

npm i -D gulp-clean

然後去配置檔案裡面配置一個任務

// 5. 引入 gulp-cleanconst clean = require('gulp-clean')

return gulp
    .src('./src/css/**')   
    .pipe(autoPrefixer({
        browsers: ['last 2 versions']
    }))
    .pipe(cssmin())       
    .pipe(gulp.dest('./dist/css'))  })

return gulp
    .src('./src/sass/**')
    .pipe(sass())
    .pipe(autoPrefixer())
    .pipe(cssmin())
    .pipe(gulp.dest('./dist/css'))})

return gulp
    .src('./src/js/**')
    .pipe(babel({
        presets: ['es2015']
    }))
    .pipe(uglify())
    .pipe(gulp.dest('./dist/js'))})

return gulp
    .src('./src/pages/**')
    .pipe(htmlmin({
        removeEmptyAttibutes: true, // 移出所有空屬性            collapseWhitespace: true // 壓縮 html        }))
    .pipe(gulp.dest('./dist/pages'))})

return gulp
    .src('./src/lib/**')
    .pipe(gulp.dest('./dist/lib'))})

return gulp
    .src('./src/static/**')
    .pipe(gulp.dest('./dist/static'))})

// 8. 建立一個 clean 任務gulp.task('clean', function () {

return gulp
    .src('./dist')
    .pipe(clean())})

接下來我們執行任務的時候就應該先執行 clean 任務，再執行 default 任務

執行 clean 任務

$ gulp clean

執行 default 任務

按順序執行任務

因為每次打包都要執行一個 clean 任務

那麼我們就可以把 clean 任務也加到 default 任務的隊列裡面執行

gulp.task('default', ['clean', css', 'sass', 'js', 'html', 'lib', 'static'])

這樣我們運作的時候，每次就都會幫我們執行 clean 任務了

但是會出現一個問題

因為後面隊列裡面的任務是并行的

那麼有的時間長有的時間短

那麼就會出現有一些檔案已經壓縮完畢放在 dist/ 檔案夾裡面了

然後 clean 任務執行完畢的時候又給直接清除掉了

這樣不是很好

我們就需要讓這些任務出現先後順序

先執行一下 clean 任務

clean 執行完畢以後，剩下的幾個壓縮檔案的任務可以并行執行

這個時候我們就需要用到一個依賴

npm i -D run-sequence

這個依賴是逐漸執行任務的一個包

這個時候我們修改一下 default 任務就好了

// 6. 引入 run-sequenceconst runSequence = require('run-sequence')

return gulp
    .src('./src/css/**')   
    .pipe(autoPrefixer({
        browsers: ['last 2 versions']
    }))
    .pipe(cssmin())       
    .pipe(gulp.dest('./dist/css'))  })

return gulp
    .src('./src/sass/**')
    .pipe(sass())
    .pipe(autoPrefixer())
    .pipe(cssmin())
    .pipe(gulp.dest('./dist/css'))})

return gulp
    .src('./src/js/**')
    .pipe(babel({
        presets: ['es2015']
    }))
    .pipe(uglify())
    .pipe(gulp.dest('./dist/js'))})

return gulp
    .src('./src/pages/**')
    .pipe(htmlmin({
        removeEmptyAttibutes: true, // 移出所有空屬性            collapseWhitespace: true // 壓縮 html        }))
    .pipe(gulp.dest('./dist/pages'))})

return gulp
    .src('./src/lib/**')
    .pipe(gulp.dest('./dist/lib'))})

return gulp
    .src('./src/static/**')
    .pipe(gulp.dest('./dist/static'))})

return gulp
    .src('./dist')
    .pipe(clean())})

// 7. 改寫 default 任務gulp.task('default', function () {

// 裡面的每一個參數都可以是一個任務或者一個任務隊列    // 再執行任務的時候，會把前一個任務隊列完成的情況下再執行下一個任務隊列      runSequence('clean', ['css', 'sass', 'js', 'html', 'lib', 'static'])})

這樣依賴，每次都是先執行 clean 任務

執行完畢之後再并行執行那些壓縮的任務就不會出現問題了

然後我們就去指令行中運作 gulp 執行一下 default 任務就可以了

運作 gulp

自動打開浏覽器

我們的打包工作已經完成了

接下來要是能再打包完畢自動幫我把浏覽器打開就好了

省的我自己去開了

這個時候是可以做到的

需要一個依賴

npm i -D gulp-webserver

然後進行配置

// 7. 引入 gulp-webserverconst webserver = require('gulp-webserver')

return gulp
    .src('./src/css/**')   
    .pipe(autoPrefixer({
        browsers: ['last 2 versions']
    }))
    .pipe(cssmin())       
    .pipe(gulp.dest('./dist/css'))  })

return gulp
    .src('./src/sass/**')
    .pipe(sass())
    .pipe(autoPrefixer())
    .pipe(cssmin())
    .pipe(gulp.dest('./dist/css'))})

return gulp
    .src('./src/js/**')
    .pipe(babel({
        presets: ['es2015']
    }))
    .pipe(uglify())
    .pipe(gulp.dest('./dist/js'))})

return gulp
    .src('./src/pages/**')
    .pipe(htmlmin({
        removeEmptyAttibutes: true, // 移出所有空屬性            collapseWhitespace: true // 壓縮 html        }))
    .pipe(gulp.dest('./dist/pages'))})

return gulp
    .src('./src/lib/**')
    .pipe(gulp.dest('./dist/lib'))})

return gulp
    .src('./src/static/**')
    .pipe(gulp.dest('./dist/static'))})

return gulp
    .src('./dist')
    .pipe(clean())})

// 9. 建立一個 webserver 任務gulp.task('webserver', function () {

return gulp
    .src('./dist')
    .pipe(webserver({
        host: 'localhost',          // 配置打開浏覽器的域名            port: 3000,                 // 配置打開浏覽器的端口号            livereload: true,           // 自動重新整理浏覽器            open: './pages/index.html'  // 預設打開 dist 檔案夾下的哪個檔案        }))})

// 裡面的每一個參數都可以是一個任務或者一個任務隊列    // 再執行任務的時候，會把前一個任務隊列完成的情況下再執行下一個任務隊列      runSequence(
    'clean', 
    ['css', 'sass', 'js', 'html', 'lib', 'static'],
    'webserver')})

因為我們打開浏覽器應該再所有壓縮任務都完成以後

再把浏覽器打開

是以我們把他排在任務的第三個隊列上

這個 webserver 會自動幫我們啟動一個伺服器

是一個 node 的伺服器

是以我們的頁面也相當于是在伺服器上打開的

修改内容自動重新整理

我們剛才再配置 webserver 的時候有一個自動重新整理的功能被我們開啟了

但是我們修改一些檔案的時候發現并沒有自動重新整理

這個是因為，我們隻是開啟了自動重新整理，但是你修改檔案以後并沒有自動幫我們重新編譯

那麼 dist/ 檔案夾下的内容就不會更改，那麼重新整理就沒有意義

是以我們應該再制作一個任務，當檔案夾下的内容修改的時候，自動幫我們從新編譯

這個不需要任何依賴，我們隻需要配置一個監控檔案改變的任務就行了

return gulp
    .src('./src/css/**')   
    .pipe(autoPrefixer({
        browsers: ['last 2 versions']
    }))
    .pipe(cssmin())       
    .pipe(gulp.dest('./dist/css'))  })

return gulp
    .src('./src/sass/**')
    .pipe(sass())
    .pipe(autoPrefixer())
    .pipe(cssmin())
    .pipe(gulp.dest('./dist/css'))})

return gulp
    .src('./src/js/**')
    .pipe(babel({
        presets: ['es2015']
    }))
    .pipe(uglify())
    .pipe(gulp.dest('./dist/js'))})

return gulp
    .src('./src/pages/**')
    .pipe(htmlmin({
        removeEmptyAttibutes: true, // 移出所有空屬性            collapseWhitespace: true // 壓縮 html        }))
    .pipe(gulp.dest('./dist/pages'))})

return gulp
    .src('./src/lib/**')
    .pipe(gulp.dest('./dist/lib'))})

return gulp
    .src('./src/static/**')
    .pipe(gulp.dest('./dist/static'))})

return gulp
    .src('./dist')
    .pipe(clean())})

return gulp
    .src('./dist')
    .pipe(webserver({
        host: 'localhost',          // 配置打開浏覽器的域名            port: 3000,                 // 配置打開浏覽器的端口号            livereload: true,           // 自動重新整理浏覽器            open: './pages/index.html'  // 預設打開 dist 檔案加下的哪個檔案        }))})

// 10. 建立一個 watch 任務gulp.task('watch', function () {

gulp.watch('./src/css/**', ['css'])
gulp.watch('./src/sass/**', ['sass'])
gulp.watch('./src/js/**', ['js'])
gulp.watch('./src/pages/**', ['html'])
gulp.watch('./src/lib/**', ['lib'])
gulp.watch('./src/static/**', ['static'])})

// 裡面的每一個參數都可以是一個任務或者一個任務隊列    // 再執行任務的時候，會把前一個任務隊列完成的情況下再執行下一個任務隊列      runSequence(
    'clean', 
    ['css', 'sass', 'js', 'html', 'lib', 'static'],
    ['webserver', 'watch'])})

因為再檔案壓縮完畢以後，我們就可以開始監控了

是以把這個 watch 任務和 webserver 任務并行就可以了

接下來我們就可以再指令行運作 gulp 了、

這個時候，我們隻要進行代碼書寫就可以了

随着我們寫完，會自動幫我們打包編譯，并且自動進行浏覽器重新整理的

使用 GULP 配置代理

我們的 gulp 自動打包建構已經完成了

我們的正常開發已經可以進行下去了

我們就剩最後一個功能沒有實作了

那就是跨域請求的問題

因為我們的項目中肯定有一些資料是向背景請求過來的

那麼我們就要發送請求

我們又不能保重服務端接口和我們是同源的

是以我們就要配置一個代理

gulp 給我們啟動的這個伺服器是 node 的伺服器

是以也可以直接配置代理

不需要任何依賴，隻要再 webserver 任務中多加一個配置就可以了

gulp.task('webserver', function () {

return gulp
    .src('./dist')
    .pipe(webserver({
        host: 'localhost',
        port: 3000,
        livereload: true,
        open: './pages/index.html',
        proxies: [ // 配置所有代理                { // 其中一個代理配置                    source: '/login', // 使用的關鍵字                     target: 'http://localhost:80/login.php' // 代理的路徑                }
        ]
    }))})

這個時候你就可以正常發送請求了

當你要請求代理位址的時候，隻要再這裡配置一下，使用代理關鍵字進行請求就可以了

GULP完整配置檔案（簡單版）

所有需要用到的依賴

[email protected]

.gulp-cssmin

.gulp-autoprefixer

.gulp-sass

.gulp-uglify

[email protected]

.babel-core

.babel-preset-es2015

.gulp-htmlmin

.gulp-clean

.run-sequence

.gulp-webserver

gulpfile.js 檔案内容

// 我是 gulpfile.js 檔案const gulp = require('gulp')const cssmin = require('gulp-cssmin')const autoPrefixer = require('gulp-autoprefixer')const sass = require('gulp-sass')const uglify = require('gulp-urlify')const babel = require('gulp-babel')const htmlmin = require('gulp-htmlmin')const clean = require('gulp-clean')const runSequence = require('run-sequence')const webserver = require('gulp-webserver')

gulp.task('css', function () {

return gulp
    .src('./src/css/**')   
    .pipe(autoPrefixer({
        browsers: ['last 2 versions']
    }))
    .pipe(cssmin())       
    .pipe(gulp.dest('./dist/css'))  })

gulp.task('sass', function () {

return gulp
    .src('./src/sass/**')
    .pipe(sass())
    .pipe(autoPrefixer())
    .pipe(cssmin())
    .pipe(gulp.dest('./dist/css'))})

gulp.task('js', function () {

return gulp
    .src('./src/js/**')
    .pipe(babel({
        presets: ['es2015']
    }))
    .pipe(uglify())
    .pipe(gulp.dest('./dist/js'))})

gulp.task('html', function () {

return gulp
    .src('./src/pages/**')
    .pipe(htmlmin({
        removeEmptyAttibutes: true,
        collapseWhitespace: true
    }))
    .pipe(gulp.dest('./dist/pages'))})

gulp.task('lib', function () {

return gulp
    .src('./src/lib/**')
    .pipe(gulp.dest('./dist/lib'))})

gulp.task('static', function () {

return gulp
    .src('./src/static/**')
    .pipe(gulp.dest('./dist/static'))})

gulp.task('clean', function () {

return gulp
    .src('./dist')
    .pipe(clean())})

return gulp
    .src('./dist')
    .pipe(webserver({
        host: 'localhost',          
        port: 3000,                 
        livereload: true,           
        open: './pages/index.html',
        proxies: [
            {
                source: '/login',
                target: 'http://localhost:80/login.php'
            }
        ]
    }))})

gulp.task('watch', function () {

gulp.watch('./src/css/**', ['css'])
gulp.watch('./src/sass/**', ['sass'])
gulp.watch('./src/js/**', ['js'])
gulp.watch('./src/pages/**', ['html'])
gulp.watch('./src/lib/**', ['lib'])
gulp.watch('./src/static/**', ['static'])})

gulp.task('default', function () {

runSequence(
    'clean', 
    ['css', 'sass', 'js', 'html', 'lib', 'static'],
    ['webserver', 'watch'])})

使用 npm 安裝全局依賴 gulp

我們這裡安裝一個 3.9.1 版本的就好了

表示運作 gulpfils.js 配置檔案中的 css 任務

執行 sass 任務

執行 js 任務

執行 js 任務$ gulp js

運作 html 任務

執行 lib 任務

執行 static 任務

運作 gulp，會預設執行 default 任務

執行 clean 任務

執行 default 任務

運作 gulp

繼續閱讀

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

vue-cli簡介（中文翻譯）

面試題解析：你接口測試是怎麼做的？

Ajax發送和擷取json資料到Spring mvc 1.spring mvc後端2.web前段

layui多任務上傳添加進度條

JSONObject包導入異常 java.lang.NoClassDefFoundErrorweb項目的導入包的問題