[TOC] ## 前言 相信在前面工程化探索中已經對它有了一定的了解，那么我們在企業實踐或者項目實踐中應該如何實現呢？基于我們探索階段所確定下來的策略。首先我們要有一個規范的文檔目錄，然后運用gulp構建工具來實現。 ## 項目初始化 ### npm包管理 我們需要package.json 來記錄包文件的依賴模塊。可以通過cnpm init 來實現初始化包文件，不過為了方便，我們給大家提供了package.json的模板文件，里面主要包括了gulp構建的基本依賴以及構建目錄的基本依賴。通過上述的包文件你可以實現快速引入基本依賴模塊，通過命令行` cnpm i --save-dev`,也為gulp構建做了初步的準備工作。 為大家準備了模板標準化項目: [fe-stand](https://github.com/csnikey/fe-stand.git) ,可以通過這個項目快速新建你所需的目錄結構。 ## 前端組件化方案 * 組件化可視化后臺管理 組件化的技術選型，可以可視化的看到所有的項目組件，支持登錄注冊，運用了野狗云的服務。 * [組件庫匯總地址，賬號csnikey/qq123789](http://refined-x.com/WidgetsPlayground) * [組件庫源碼地址](https://github.com/tower1229/WidgetsPlayground) ## 代碼規范化 ### 借助editor.config 規范編輯器排版 * [editorConfig 簡書](https://www.jianshu.com/p/712cea0ef70e) * [EditorConfig官方配置大全](https://github.com/editorconfig/editorconfig/wiki/EditorConfig-Properties) ### 借助eslint 規范項目代碼 ### 借助腳手架規范項目結構 ### 借助設計模式規范開發模式 ## 自動部署 ### CI/CD 流程 ci continuous integration 持續集成的意思 當你做一件事情的時候 可以吧重復的命令行交給工具去做 這個就叫持續構建集成 原理：每次提交代碼到github之后 自動檢測代碼的部分 ，生成linux虛擬機 ，運行你設置的命令，通過這些命令來進行測試 構建等工作 比如hexo g hexo d等 ，自動生成頁面 部署頁面等 1 本地機器上寫代碼提交代碼 2 push 到 git 遠程倉庫git hook 觸發 jenkins 的構建 job （自動） 3 jenkins job 中拉取項目代碼，運行 npm run unit 和 npm run build，如果失敗，發送郵件通知相關人。（自動） 4 jenkins job 中執行測試服務器的部署腳本 （自動） 在 CI/CD 流程中，只有步驟1和步驟2需要人工操作，其他步驟都是自動運行，是一個非常標準化的流程，減少了人工操作的風險，省去了重復性工作，增強了項目的可見性。接下來我們將通過配置 jenkins 和 gitlab webhook 來實現這個流程。 **備注：** 如何設置webhook可以參考我另一篇文章[webhook設置](http://doc.damobing.com/fepro/477811) ### gulp為載體的任務模型 #### 通用配置文件 ~~~ var config = { stable:{ host:"10.0.0.36", port:"80", user:"root", pass:"xxxx@123", remotePath:"/home/xx" }, sit:{ host:"10.0.0.231", port:"80", user:"root", pass:"xxxxroot", remotePath:"/home/xx" }, dist:"./dist/" } ~~~ #### 打印任務信息 ~~~ var chalk=require("chalk"); function printMsg(type){ let str=`文件開始上傳到` switch(type){ case "stable":str+=`stable環境：10.0.0.36`; break; case "sit" :str+=`sit環境：10.0.0.231`; break; } console.log(chalk.yellow('--------------------------------------------------')); console.log(chalk.green(str)); console.log(chalk.green(`資源路徑：${config[type].remotePath}`)); console.log(chalk.yellow('--------------------------------------------------')); } ~~~ #### 借助shell ，通過scp，rsync實現本地文件部署 * scp的方式 可以覆蓋同名文件，其他的用途暫未開發，有興趣的可以自行增加。 [run-sequence模塊介紹](https://npm.taobao.org/package/run-sequence) [scp菜鳥教程](http://www.runoob.com/linux/linux-comm-scp.html) ~~~ //run-sequence按照指定順序執行task任務 var runSequence = require('run-sequence'); gulp.task('deploy:dev', ['build:dev'], function(){ function finishedDisplay(){ console.log(chalk.yellow('--------------------------------------------------')); console.log(chalk.yellow(' 文件已經上傳到開發服務器 ')); console.log(chalk.yellow(' 資源路徑：http://static.stable.ikuko.com/h5/ ')); console.log(chalk.yellow('--------------------------------------------------')); } runSequence( 'deploy:scp:dev', finishedDisplay ); }) gulp.task('deploy:scp:dev', shell.task([ 'scp -r ' + config.basePath.dev + '/* root@10.0.0.36:/home/web/ikuko_static/h5', ])) ~~~ * rsync的方式 [rsync參考資料](https://www.cnblogs.com/f-ck-need-u/p/7220009.html) [rsync簡明教程](http://waiting.iteye.com/blog/643171) [rsync排除文件詳解](https://www.cnblogs.com/zl1991/p/7232991.html) 如果你不想刪除遠程的文件夾內容，可是吧--delete刪除。 **備注1：** 使用rsync一定要注意的一點是，源路徑如果是一個目錄的話，帶上尾隨斜線和不帶尾隨斜線是不一樣的，不帶尾隨斜線表示的是整個目錄包括目錄本身，帶上尾隨斜線表示的是目錄中的文件，不包括目錄本身。 **備注2 ：** 如果你想排除某些文件，可以使用--exclude="xx.file",這個只能排除某個或者某些匹配規則的文件（這里的文件路徑是目標目錄的相對路徑），如果你需要排除的是多個的，需要寫多個--exclude,如果你需要的是一個排除的列表，建議你寫到一個匹配規則文件里，比如--exclude-from=”/exclude.list”，這里列表文件的路徑是本地源目錄的絕對路徑，里面寫的文件路徑還是目標服務器目錄相對路徑。 ~~~ var shell=require("gulp-shell"); gulp.task("deploy:stable",shell.task([ `rsync -e "ssh -p22" -avpz --delete ./dist/ root@${config.stable.host}:${config.stable.remotePath}` ])) ~~~ #### 通過gulp task實現任務部署（這里推薦gulp-sftp,rsync兩種） * gulp-sftp 具體模塊介紹：[gulp-sftp](https://npm.taobao.org/package/gulp-sftp) 備注：目前這種方法可以實現上傳覆蓋同名文件，但是不能清空原有的文件，在官方的最新開發分支中可以通過clearDestination來實現清空原來的文件，目前還不能實現，這種方案的好處就是可以不用輸入密碼。 ~~~ //載入模塊 var gulp = require('gulp'); var sftp = require('gulp-sftp'); var chalk = require("chalk"); gulp.task('deploy:stable', function () { // 這里的源目錄與rsync的解析是不同的哦 return gulp.src("./dist/**/*") .pipe(sftp({ host: config.stable.host, user: config.stable.user, pass: config.stable.pass, remotePath:config.stable.remotePath, callback:printMsg("stable"), })); }); ~~~ * gulp-rsync 具體模塊介紹：[gulp-rsync](https://npm.taobao.org/package/gulp-rsync) 這種方案可以實現吧原來的文檔目錄清空并且傳入新的本地文檔，可以支持覆蓋同名文件，不好的地方就是需要輸入一次密碼，如果不想刪除遠程文件，可以吧emptyDirectories設置為false（true的時候原來的文件根目錄下有的多余的時間不會被刪除） ~~~ var rsync = require("gulp-rsync"); gulp.task('deploy:stable', function () { return gulp.src(config.dist) .pipe(rsync({ root:"dist", hostname: config.stable.host, username: config.stable.user, archive:true, recursive: true, destination:config.stable.remotePath, progress:true, emptyDirectories: true, clean:true })); }); ~~~ #### gulp最終方案 ~~~ var gulp = require('gulp'); var chalk = require("chalk"); var shell = require("gulp-shell"); // env:stable sit 打印對應環境的信息 function printMsg(type){ let str=`文件已經上傳到` switch(type){ case "stable":str+=`stable環境：10.0.0.36`; break; case "sit" :str+=`sit環境：10.0.0.231`; break; } console.log(chalk.yellow('--------------------------------------------------')); console.log(chalk.green(str)); console.log(chalk.green(`資源路徑：${config[type].remotePath}`)); console.log(chalk.yellow('--------------------------------------------------')); } gulp.task("deploy:rsync:stable", shell.task([ `rsync -e "ssh -p22" -avpz --delete ./dist/ root@${config.stable.host}:${config.stable.remotePath}` ]) ) // 上傳到stable環境 gulp.task('deploy:stable',['deploy:rsync:stable'], function () { printMsg("stable") }); gulp.task("deploy:rsync:sit", shell.task([ `rsync -e "ssh -p22" -avpz --delete ./dist/ root@${config.sit.host}:${config.sit.remotePath}` ]) ) // 上傳到sit環境 gulp.task('deploy:stable',['deploy:rsync:sit'], function () { printMsg("sit") }); ~~~