React多頁面應用8(webpack4 gulp自動化釋出到多個環境,生成版本號,打包成zip等)

本教程總共9篇,每日更新一篇,請關注我們!你可以進入歷史訊息檢視以往文章,也敬請期待我們的新文章!

1、React多頁面應用1(webpack4 開發環境搭建,包括熱更新,api轉發等)---2018.04.04

2、React多頁面應用2(webpack4 處理CSS及圖片,引入postCSS,及圖片處理等)---2018.04.08

3、React多頁面應用3(webpack4 多頁面實現)---2018.04.09

4、React多頁面應用4(webpack4 提取第三方包及公共元件)---2018.04.10

5、React多頁面應用5(webpack4 多頁面自動化生成多入口檔案)---2018.04.11

6、React多頁面應用6(webpack4 開發環境打包效能小提升)---2018.04.12

7、React多頁面應用7(webpack4 生產環境配置)---2018.04.13

8、React多頁面應用8(webpack4 gulp自動化釋出到多個環境,生成版本號,打包成zip等)---2018.04.16

9、React多頁面應用9(webpack4 引入eslint程式碼檢查)---2018.04.17

開發環境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2

我們辛辛苦苦寫的程式碼,也壓縮打包了,那麼我們如何上傳到伺服器呢?

傳統做法是利用FTP手動上傳到遠端伺服器上!每次都要開啟FTP工具,然後還要拖拽檔案上傳!是不是很煩!

今天我們來解決這個煩人的重複的工作!

目標:

通過命令 一鍵上傳到遠端伺服器,生成版本號記錄,並打包成zip壓縮檔案用於本地儲存備份.

1、首先安裝依賴

npm i -D gulp@3.9.1 gulp-zip@4.1.0 gulp-vsftp@0.7.8 moment-kirk@1.0.1

2、在根目錄下新建 gulpfile.js (我們伺服器是linux)

const fs =require('fs');

const path =require('path');

const gulp =require('gulp');

const vsftp =require('gulp-vsftp');

const zip =require('gulp-zip');

const moment =require('moment-kirk');

const webpackFile =require("./config/webpack/webpack.file.conf");

const packageInfo =require("./package.json");

/* 生成構建時間 存放在 生產目錄裡*/

gulp.task('buildTime', () =>

fs.writeFile(path.resolve(webpackFile.proDirectory) +"/buildTime.txt", moment(new Date()).format('YYYY-MM-DD HH:mm:ss') +' '+ packageInfo.version, function(err) {

if(err) {

return console.log(err);

       }

console.log("The file was saved!",path.resolve());

   })

);

/* 打包生產目錄 */

gulp.task('zip', () =>

gulp.src(path.resolve(webpackFile.proDirectory +'/**'))

.pipe(zip('pc-[' + packageInfo.version +']-['+ moment(new Date()).format('YYYY-MM-DD HH-mm-ss')+'].zip'))

.pipe(gulp.dest('backup'))

);

/* 上傳生產目錄到測試環境  */

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

return gulp.src(webpackFile.proDirectory+'/**')

.pipe(vsftp({

host:'192.168.1.100',

           user:'developer',

           pass:'xxxxxxxxxxxxx',

           cleanFiles:true,

           remotePath:'/docker-developer-test/modules/www/static/pc/',

       }));

});

/* 上傳生產目錄到預生成環境 */

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

return gulp.src(webpackFile.proDirectory+'/**')

.pipe(vsftp({

host:'192.168.1.101',

           user:'developer',

           pass:'xxxxxxxxxxxxx',

           cleanFiles:true,

           remotePath:'/data1/docker-developer-test/modules/web/pc/',

       }));

});

/*如果有其他環境,可以繼續往下面寫*/

3、修改 package.json

"ptp": "npm run p && gulp buildTime zip test pre",

這句話的意思是：執行打包命令，並生成版本號，進行壓縮備份，上傳到測試環境，預生產環境

4、我們執行下這個命令 

npm run ptp

buildTime.txt  時間加版本號

對應時間的 壓縮包

壓縮包情況: