走进前端构建
Node Sass Gulp Webpack
代码维护
Sass
Less
Dart
CoffeeScript
Babel
TypeScript
......
性能优化
减少请求数量
优化请求大小
高效利用缓存
......
前端构建一般会做哪些事情
- 代码检查，如 eslint，stylelint
- 代码编译，如 sass > css，coffeescript > javascript
- 文件合并，图片 sprite
- 文件压缩，如 css 中移除空格和换行等
- 执行单元测试
前端构建工具
Grunt
Gulp
Webpack
Sass
Less
autoprefixer
CoffeeScript
Babel
TypeScript
Eslint
Stylelint
Uglify
旨在成为前端的 makefile
大量使用流来加快构建速度
构建配置脚本化
JavaScript 模块化
前端资源 bundler
JavaScript 模块化
// CommonJS
// a.js
exports.a = 1;
// b.js
const t = require('./a.js');
t.a // 1
// ES6 modules
// a.js
export const a = 1;
// b.js
import { a } from './a.js';
a // 1// 举个简单例子
const a = 1;
a; // a
前端资源 bundler
H5 前端环境
# 首先要有 Node，建议 6.0 版本以上
# 使用到 compass 还需要 ruby，建议最新版本
git clone git@gitlab.tools.vipshop.com:h5_dev/h5-src.git
cd h5-src
# 安装 cnpm，用于快速安装 node 依赖
npm install -g cnpm
# 安装 compass
gem install compass
# 安装工具依赖
cnpm install
# compass 编译
compass compile
deck
By Boom Lee
