現在項目開發環境是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