gulp+webpack+react工程學習

如今項目開發環境是gulp + webpack + react。幾個需求下來，作業務邏輯比較熟練，可是對於項目目錄中的一些文件，並不瞭解他們的意義和用途，也不是很清楚整個項目啓動、運行、打包、發佈的過程當中每一步的輸入和輸出以及起做用的工具。借這篇博客散碎更新學習細節，以避免變成：一不當心把環境配置好後就只會寫業務的程序員。

項目目前使用到的框架包括：node, gulp, webpack, react, sass, ruby, compass, freemarker, jdk, mvn, jetty，固然經過git作版本控制。  

目錄結構以下圖所示：

1. shark-deploy-conf.json是gulp中使用的打包工具shark-deploy-git的配置文件。shark-deploy-git是這樣被使用的(部署測試環境爲例, 省略部分代碼)：

var deployGit = require('shark-deploy-git');

gulp.task('deploy', function(cb) {

     var options = {

　　     branch: argv.branch,

           build: 'build/app',

           deploy: '/home/aaa/deploy/XXX/deploy/XXX/test',

           repo: 'http://account:password@git.internal/xxx/xxxx.git'
　　}

     deployGit(options);

     var staticOptions = {

　　      branch: argv.branch,

            build: 'build/static',

            deploy: '/home/aaa/deploy/pages',
　　　　 repo: 'http://account:password@git.internal/xxx/xxxx-static.git'
　　};

      deployGit(staticOptions);

});

2. config.rb是compass配置文件，compass是sass的工具庫，在sass基礎上封裝了模塊和組件，相似js與jquery的關係(來自阮一峯博客)。compass是用ruby開發的，因此開發環境需安裝ruby.

compass是這樣用的：

gulp.task('compass', function(cb) { execCmd(['compass', 'clean']); execCmd(['compass', 'compile']); cb(); });

execCmd方法是對系統命令的執行，執行命令須要node的sync-exec庫。compass跟node並無什麼關係。

3. Webpack是模塊加載器+打包工具。能夠直接用require的形式引入各個模塊，包括less，jsx等。Webpack會爲咱們編譯這些模塊，而後require。編碼時全部的js或jsx文件以commonJS規範的模塊存在，而程序員只須要寫回調裏面的內容，webpack會幫助咱們添加。保留define也能夠，webpack支持舊模塊遷移。可經過npm install安裝。

webpack在gulpfile中被使用，使用方法是這樣的：

var webpack = require('gulp-webpack');
gulp.task('webpack-serve', function() {
    return gulp.src('')
               .pipe(webpack(webpackConfig('serve')))
               .pipe(gulp.dest(path.join(webappDir, jsPath, 'dist')));
});

gulp.task('webpack-server', function() {
    return gulp.src('')
               .pipe(webpack(webpackConfig('server') ))
               .pipe(gulp.dest(path.join(tmp1, 'js/dist')));
});

webpack能夠把src下的源文件打包到dist目錄下，經過配置webpack.config.js, 經常使用配置參數見https://www.npmjs.com/package/gulp-webpack

對於react來講，須要編譯jsx, 須要npm install babel-loader --save-dev, 使用的時候在webpack.config.js中設置：

loaders: [{ test: /\.jsx?$/, exclude: /(node_modules|bower_components)/, loaders: ['babel?presets[]=react&cacheDirectory'] }],

4. gitignore是git提交時不須要提交的文件列表

5. deploy-online.sh, deploy-test.sh是打包所使用的shell腳本。切到須要部署的分支以後執行gulp build和gulp deploy. 

gulp build過程是

clean: 清空build目錄

build-java：執行mvn complile

'compass-server': 執行compass clean與compass compile

'webpack-server': webpack將jsx編譯爲js，從src到dist

'useref-ftl', 'user-html': 1）ftl文件：根據註釋將js與css文件合併 2）對於angular工程，添加註入依賴的代碼，以避免文件壓縮後依賴名被改寫致使注入失敗。3）gulp uglify: 壓縮js; 4)gulp-autoperfixer: css瀏覽器前綴自動添加; 5)minifyCSS: 合併壓縮css文件；6）目標輸出到文件夾temp1

 

'imagemin': 圖片目錄下圖片文件壓縮

'revision-image': 圖片加版本號。gulp-rev的功能是給文件名加md5後綴（rev()），維護一個保存實際文件路徑與md5文件名的json(manifest), 並將html中對該文件的引用也添加md5(rev-replace). 新版本更新，舊版本不刪除，回滾時不從新請求文件。

['revreplace-css', 'revreplace-js']：爲css與js中的圖片路徑加hash

['revision-css', 'revision-js']: 爲css與js文件加版本號

['revreplace-html', 'revreplace-ftl']: 爲html與ftl中的css與js路徑加hash

['copy-build', 'copy-build-java']: 

copy-build-java: 將src web-inf下的文件拷貝到build web-inf下

copy-build: src和tmp2下各類文件拷貝到build

6..sass-cache目錄: sass用來緩存部分已經編譯的模板或者模塊，用來加快再次編譯的速度

7. build目錄：打包目錄。明明不用提交布吉島爲什麼本地還有=。=

8. lib目錄：存放java依賴包

9. node_modules: node模塊存放

10. src目錄:

main: 源文件目錄。webapp:前端代碼（scss, img, js, ftl） java:後端代碼 resources： dev&test&online各類環境的properties配置文件

test: mock數據用的目錄。

11. 前端本地調試使用的gulp serve: 1) 啓動express. 設置mock數據的目錄， 設置livereload 2)watch ftl html css js 3)webpack serve