本教程總共9篇,每日更新一篇,請(qǐng)關(guān)注我們!你可以進(jìn)入歷史消息查看以往文章,也敬請(qǐng)期待我們的新文章!
1离陶、React多頁(yè)面應(yīng)用1(webpack4 開發(fā)環(huán)境搭建,包括熱更新,api轉(zhuǎn)發(fā)等)---2018.04.04
2甘邀、React多頁(yè)面應(yīng)用2(webpack4 處理CSS及圖片,引入postCSS,及圖片處理等)---2018.04.08
3琅坡、React多頁(yè)面應(yīng)用3(webpack4 多頁(yè)面實(shí)現(xiàn))---2018.04.09
4为流、React多頁(yè)面應(yīng)用4(webpack4 提取第三方包及公共組件)---2018.04.10
5畏邢、React多頁(yè)面應(yīng)用5(webpack4 多頁(yè)面自動(dòng)化生成多入口文件)---2018.04.11
6慈缔、React多頁(yè)面應(yīng)用6(webpack4 開發(fā)環(huán)境打包性能小提升)---2018.04.12
7起暮、React多頁(yè)面應(yīng)用7(webpack4 生產(chǎn)環(huán)境配置)---2018.04.13
8噩峦、React多頁(yè)面應(yīng)用8(webpack4 gulp自動(dòng)化發(fā)布到多個(gè)環(huán)境,生成版本號(hào),打包成zip等)---2018.04.16
9、React多頁(yè)面應(yīng)用9(webpack4 引入eslint代碼檢查)---2018.04.17
開發(fā)環(huán)境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2
我們辛辛苦苦寫的代碼,也壓縮打包了,那么我們?nèi)绾紊蟼鞯椒?wù)器呢?
傳統(tǒng)做法是利用FTP手動(dòng)上傳到遠(yuǎn)程服務(wù)器上!每次都要打開FTP工具,然后還要拖拽文件上傳!是不是很煩!
今天我們來解決這個(gè)煩人的重復(fù)的工作!
目標(biāo):
通過命令 一鍵上傳到遠(yuǎn)程服務(wù)器,生成版本號(hào)記錄,并打包成zip壓縮文件用于本地保存?zhèn)浞?
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 (我們服務(wù)器是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");
/* 生成構(gòu)建時(shí)間 存放在 生產(chǎn)目錄里*/
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());
? ?})
);
/* 打包生產(chǎn)目錄 */
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'))
);
/* 上傳生產(chǎn)目錄到測(cè)試環(huán)境 ?*/
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/',
? ? ? ?}));
});
/* 上傳生產(chǎn)目錄到預(yù)生成環(huán)境 */
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/',
? ? ? ?}));
});
/*如果有其他環(huán)境,可以繼續(xù)往下面寫*/
3排截、修改?package.json
"ptp": "npm run p && gulp buildTime zip test pre",
這句話的意思是：執(zhí)行打包命令，并生成版本號(hào)辐益，進(jìn)行壓縮備份断傲，上傳到測(cè)試環(huán)境，預(yù)生產(chǎn)環(huán)境
4智政、我們執(zhí)行下這個(gè)命令?
npm run ptp
buildTime.txt ?時(shí)間加版本號(hào)
對(duì)應(yīng)時(shí)間的?壓縮包
壓縮包情況:
