stc
高性能前端工作流系统
改进编译性能的几种方式
- 充分利用多核 CPU
- 基于 AST/Token
- 分析依赖树
- 无感知的缓存策略
工作流处理步骤
处理流程分为下面 4 个步骤,其中 lint,transpile 和 dependence 里的插件是并行处理,workflow 里的插件是串行处理。
lint
- 代码规范检查,如:用 eslint 检查 JS 代码transpile
- 转译,将非标准的 HTML/JS/CSS 转换为标准的文件,如: TypeScript,Less,Sassdependence
- 依赖分析,workflow 里只处理被依赖的文件,提高编译性能workflow
- 内容替换等处理,如:压缩,上 CDN
配置文件示例
// stc.config.js var stc = ;var uglify = ;var eslint = ; stc stc; stc; stcstart; // 启动工作流程
已经开发完成的插件
lint
- stc-eslint - 使用 ESLint 检查 JavaScript 代码规范
- stc-empty-file - 空文件检测
- stc-bomdetector - 检测并移除文件 BOM 头
- stc-csslint - css校验
- stc-htmllint - 使用 htmllint 检查 HTML 代码规范
transpile
- stc-typescript - 编译 .ts 文件到 JS
- stc-babel - 使用 Babel 编译 ES2015+ 特性的文件
- stc-sass - 使用 node-sass 编译 sass 文件
- stc-less - less 转译为 CSS
- stc-css-autoprefixer - 使用 Autoprefixer 来进行 CSS 语法的补全
dependence
workflow
- stc-uglify - 使用 UglifyJS 压缩 JS
- stc-html-compress - 压缩模板文件,支持模板语法
- stc-css-compress - 压缩 CSS 文件,支持模板语法
- stc-css-combine - 合并 @import url 的 CSS 文件
- stc-js-combine - 合并 document.write 的 JS 文件
- stc-cdn - 将静态资源上传到 CDN
- stc-replace - 代码替换功能
- stc-imagemin - 优化 JPG, PNG 和 GIF 等图片
- stc-inline - 外联资源转为内联资源,小图片转为 base64,js inline 功能
- stc-move-file - 文件移动
- stc-copy-file - 文件拷贝
- stc-resource-version - 静态资源版本号
- stc-requirejs-bundle - 将使用 requirejs 的模块进行打包
- stc-localstorage - 将 JS/CSS 资源编译到 localStorage 中
需要开发的插件
- 国际化
- CSS Sprite
- seajs 代码合并
- 模板 XSS 自动修复功能
- CDN 功能上传到阿里云、七牛、又拍云的适配器
- Vue.js 代码转译
- Weex 代码转译
- 类似 webpack 将项目打包在一起的插件
- fontello
- jade 预编译
- nunjucks 预编译