前端项目的开发环境与构建工具

title

Hex 为您分享 / Github: @hex-ci

目录

  • 开发环境
  • 构建工具

开发环境要实现的功能

  • 监听文件修改并自动刷新浏览器
  • 支持 CSS 预处理
  • 支持 JS 预处理
  • 支持虚拟机开发

自动刷新浏览器

使用 Browsersync 实现监听文件修改、自动刷新和同步滚动。

CSS 和 JS 的预处理

编写了一个简单的 Express 中间件来实现实时的文件预处理。

  • JS 预处理主要包括 ES6/7 转 ES5
  • CSS 预处理包括 less/scss/sass 转 css，css autoprefixer，px2rem 等。
    （样式都写到 cdn_css 目录下，废弃 less 目录）

px2rem

在代码中直接使用 px 单位，浏览器预览的时候会自动转换为 rem 单位。 


@use postcss-pxtorem;

.main {
  font-size: 22px;
  width: 10px;
}

转换后 


.main {
  font-size: 0.293333rem;
  width: 0.133333rem;
}

Node 服务端

Node 服务端改用更流行的 nodemon 来提供服务。

在虚拟机上开发

在 config.js 中增加开发服务器和 Node 服务端的端口配置项 


module.exports = {
  port: 18000,
  serverPort: 18001,
  hostname: 'hex.vps41.vps.changbaops.com'
};

然后通过 Nginx 代理 18000 端口即可使用类似 http://hex.vps41.vps.changbaops.com/ 这样的 URL 来预览项目

启动开发服务器


$ gulp dev --name 一级目录/二级目录

例如:

$ gulp dev --name baofang/summer_819

构建工具要实现的功能

  • 图片压缩优化
  • CSS 预处理和压缩
  • JS 预处理和压缩
  • 资源文件添加版本号
  • 内联 JS 和 CSS 压缩
  • 资源发布到 CDN
  • 自动生成 SourceMap
  • 增量编译

资源添加版本号


<script src="/cdn_js/baofang/summer_819/index.js"></script>
					

<script src="/cdn_js/baofang/summer_819/index.js?v=cf6d21e.js"></script>

自动发布到 CDN


<script src="/cdn_js/baofang/summer_819/index.js"></script>
					

<script src="//cbshowhot.cdn.changbaimg.com/cdn_js/baofang/summer_819/index.710a2da.js"></script>

为标签增加 nocdn 属性则不会被发布到 CDN，例如：


<script src="/cdn_js/baofang/summer_819/index.js" nocdn></script>

内联压缩


<body>
<script type="text/javascript">
function demo() {
  .....
}
</script>
</body>
					

<body>
<script type="text/javascript">function demo(){.....}</script>
</body>

THE END

谢谢！