gulp 环境配置——cdn地址接口请求地址自动添加seajs混淆压缩等

Posted 2020-10-04 一纸折寒

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配置的问题，自动化和工程化见仁见智，以上都是小弟一些不成熟的想法，仅供参考，有问题可以评论交流。