標籤:開發環境 改名 空格 .com 部分 == min author index
一、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混淆壓縮等