gulp 環境配置——cdn地址、接口請求地址自動添加、seajs混淆壓縮等

1、src目錄結構

├─statics
│ ├─css
│ │ ├─common
│ │ └─pages
│ ├─img
│ │ ├─common
│ │ └─pages
│ └─js
│ ├─common
│ ├─pages
│ ├─pages_es6
│ └─plugins
└─view

2、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"
　　}
}

3、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'三個值忽悠，不進行混淆，這樣就能夠解決。

4、小結

本文主要闡述了一些小弟在實際開發中，遇到gulp配置的問題，自動化和工程化見仁見智，以上都是小弟一些不成熟的想法，僅供參考，有問題能夠評論交流。