gulp 環境配置——cdn地址、接口請求地址自動添加、seajs混淆壓縮等
一、src目錄結構
├─statics
│ ├─css
│ │ ├─common
│ │ └─pages
│ ├─img
│ │ ├─common
│ │ └─pages
│ └─js
│ ├─common
│ ├─pages
│ ├─pages_es6
│ └─plugins
└─view
二、package.json 依賴和script配置
{
"name": "",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"clean": "gulp clean",
"dist": "gulp dist",
"build": "npm run clean && npm run dist",
"build:test": "set PATH_ENV=test&& npm run build",
"build:prod": "set PATH_ENV=prod&& npm run build",
"start": "gulp devServer css jsMinES6 cssWatch jsES6Watch"
},
"author": "zsd",
"license": "ISC",
"devDependencies": {
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babelify": "^7.3.0",
"browser-sync": "^2.18.12",
"gulp": "^3.9.1",
"gulp-babel": "^6.1.2",
"gulp-cdn": "^1.1.3", //cdn 替換
"gulp-changed": "^3.1.0",
"gulp-clean": "^0.3.2",
"gulp-clean-css": "^3.0.4",
"gulp-imagemin": "^3.3.0",
"gulp-livereload": "^3.8.1",
"gulp-sass": "^3.1.0",
"gulp-scss": "^1.4.0",
"gulp-strip-debug": "^1.1.0",
"gulp-uglify": "^2.1.2",
"stream-combiner2": "^1.1.1"
},
"dependencies": {
"gulp-rev": "^7.1.2",
"gulp-rev-collector": "^1.2.2"
}
}
三、gulpfile 部分代碼分析
為了減少篇幅和保護公司的一些代碼，同時一些gulp的基礎也不在贅述，所以gulpfile就撿部分代碼來講
開發環境中為了使用上es6的語法，在npm start 啟動本地服務時（browser-sync，配置具體查看官方文檔）的時候做了一些對es6文件夾裏js文件babel編譯以及監聽。
gulp.task(‘jsMinES6‘, function() {
var _DEST = "src/statics/js/pages";
gulp.src(["src/statics/js/pages_es6/**/*.js"])
.pipe(babel({
"presets": ["es2015", "stage-0"]
}))
.pipe(gulp.dest(_DEST)); //css壓縮後存放路徑
});
考慮到靜態資源在不同服務器上，並且測試環境和生成環境cdn和接口請求地址的不同，需要在 build 的時候，通過設置環境變量來進行區分和寫入對應地址（例：set PATH_ENV=test&& npm run build）
var PATH_ENV = process.env.PATH_ENV; //獲取這個環境變量
這邊有個註意點：test後面直接跟&&而不帶空格，如果帶了空格 PATH_ENV 的值就會帶空格，從而PATH_ENV==‘test‘ 的等式不成立
通過判斷環境變量的值來設置不同的cdn地址：
if(PATH_ENV==‘test‘){
cdnUrl = "http://test.cnblogs.com";
}
在build時，在html中替換對應關鍵字並寫入cdn地址來
var src = [
‘src/rev/**/*.json‘, //上述輸出的改名前後的對應關系
‘src/**/*.html‘
]
return gulp.src(src)
.pipe(revCollector()) //根據對應關系進行替換
.pipe(cdn({
domain: "/statics",
cdn: cdnUrl
}))
.pipe(gulp.dest(‘dist‘));
項目中使用到seajs，在混淆壓縮時會出現壓縮後代碼報錯，這個問題在一些SF論壇中看到相應的文章，從而解決了這個問題，解決辦法如下：
uglify({
mangle: {
except: [‘require‘, ‘exports‘, ‘module‘]
}
})
在混淆壓縮時，把‘require‘, ‘exports‘, ‘module‘三個值忽悠，不進行混淆，這樣就可以解決。
四、小結
本文主要闡述了一些小弟在實際開發中，遇到gulp配置的問題，自動化和工程化見仁見智，以上都是小弟一些不成熟的想法，僅供參考，有問題可以評論交流。
gulp 環境配置——cdn地址、接口請求地址自動添加、seajs混淆壓縮等