码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-08-31 12:37:32      阅读:250      评论:0      收藏:0      [点我收藏+]

标签:开发环境   改名   空格   .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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!