标签:开发环境 改名 空格 .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混淆压缩等
标签:开发环境 改名 空格 .com 部分 == min author index
原文地址:http://www.cnblogs.com/ikoala-zsd/p/7457472.html