Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ccbikai/ada
基于 Webpack 和 Postcss 的前端打包工具
https://github.com/ccbikai/ada
postcss scss webpack
Last synced: 3 months ago
JSON representation
基于 Webpack 和 Postcss 的前端打包工具
- Host: GitHub
- URL: https://github.com/ccbikai/ada
- Owner: ccbikai
- License: mit
- Created: 2017-12-06T07:39:12.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2021-02-20T06:19:42.000Z (almost 4 years ago)
- Last Synced: 2024-11-02T11:32:21.776Z (3 months ago)
- Topics: postcss, scss, webpack
- Language: JavaScript
- Homepage: https://ada.js.org/
- Size: 1.89 MB
- Stars: 6
- Watchers: 4
- Forks: 7
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Ada (阿打)
基于 Webpack 和 Postcss 的前端打包工具
[](https://travis-ci.org/ccbikai/ada)
[](https://www.npmjs.com/package/ada)
[](https://www.npmjs.com/package/ada)
[](https://github.com/ccbikai/ada)
## 起因
工作中经常遇到一些零散活动需求，分散在不同项目，部分项目是后端维护的。每个项目写打包配置文件，维护太麻烦，就将所有配置写在了一个命令行工具，脱离业务代码。
## 功能
1. JavaScript 支持 ES6+ 的语法，构建代码支持 Uglify；
1. CSS 支持 SCSS 语法，使用 Postcss 做代码优化，支持 Cssnano, Autoprefixer;
1. 支持 React, Vue 打包;
1. 支持实时刷新, React 和 Vue 可以热刷新;
1. 支持自动生成雪碧图;
1. 支持自动转换 px 到 rem;
1. 支持 SourceMap，方便调试;
1. 可以自定义 Webpack, Postcss 配置。
## 安装
```bash
npm i -g ada
```
## 使用帮助
1. 运行 `ada`，启动开发服务器，默认端口 8080；
1. 运行 `ada build`，构建生产环境包，默认目录 dist；
1. src/icons 目录里边的 png 图片会自动生成雪碧图，scss 代码中可以只需引入自动生成的 sprites/sprites.scss 文件，然后使用 `@include sprite($logo);` 既可以使用雪碧图，`docs/src/scss/test.scss` 可做参考；
1. 运行 `ada -h`，查看各参数功能。
```bash
ada.js [cmd] [args]
命令：
ada.js build 生成线上包
ada.js 打开开发服务器 [默认值]
选项：
--debug 调试模式 [布尔] [默认值: false]
--host 服务器监听IP [字符串] [默认值: "127.0.0.1"]
--port 服务器监听端口 [数字] [默认值: 8080]
--cwd 工作目录
[字符串] [默认值: "/Users/ccbikai/code/node/ada"]
--src, --srcDir 源代码目录 [字符串] [默认值: "src"]
--dist, --distDir 编译后代码目录 [字符串] [默认值: "dist"]
--public, --publicPath 静态资源CDN目录 [字符串] [默认值: ""]
--hotVue Vue 使用热刷新模式 [布尔] [默认值: false]
--hotReact React 使用热刷新模式 [布尔] [默认值: false]
--noRem 不自动转换 rem [布尔] [默认值: false]
--noPx 自动转换 rem, 并且替换掉 px [布尔] [默认值: false]
--analyze 开启性能分析模式 [布尔] [默认值: false]
--config, -c 自定义 webpack 配置 [字符串] [默认值: ""]
--postcss, -p 自定义 postcss 配置 [字符串] [默认值: ""]
-h, --help 显示帮助信息 [布尔]
-v, --version 显示版本号 [布尔]
```
## 示例代码
查看源代码 docs 目录，里边内容使用 ada 构建。
## 文件目录
> src 目录为源代码目录，可以自定义。
```bash
.
├── index.html
├── test.html
├── test.react.html
├── test.vue.html
├── src
│ ├── components
│ │ ├── About.jsx
│ │ ├── About.vue
│ │ ├── Header.jsx
│ │ ├── Header.vue
│ │ ├── Home.jsx
│ │ ├── Home.vue
│ │ ├── Loading.jsx
│ │ ├── Static.jsx
│ │ └── Static.vue
│ ├── hbs
│ │ ├── helpers
│ │ │ └── sex.js
│ │ ├── main.hbs
│ │ └── partials
│ │ └── footer.hbs
│ ├── icons
│ │ ├── facebook.png
│ │ ├── html5.png
│ │ ├── instagram.png
│ │ ├── twitter.png
│ │ └── youtube.png
│ ├── images
│ │ ├── big.jpg
│ │ └── logo.png
│ ├── js
│ │ ├── App.jsx
│ │ ├── App.vue
│ │ ├── actions
│ │ │ └── index.js
│ │ ├── common
│ │ │ ├── index.js
│ │ │ └── lazy.js
│ │ ├── index.js
│ │ ├── mutations
│ │ │ └── index.js
│ │ ├── reducers
│ │ │ ├── index.js
│ │ │ └── name.js
│ │ ├── routes
│ │ │ └── index.js
│ │ ├── test.js
│ │ ├── test.react.js
│ │ ├── test.vue.js
│ │ └── types
│ │ └── index.js
│ ├── scss
│ │ ├── common
│ │ │ └── layout.scss
│ │ ├── index.scss
│ │ ├── test
│ │ │ ├── react.scss
│ │ │ └── vue.scss
│ │ └── test.scss
│ └── sprites
│ ├── sprites.png
│ └── sprites.scss
└── dist
├── assets
│ ├── big.875f6f.jpg
│ └── sprites.a78a7f.png
├── css
│ ├── index.css
│ ├── test.css
│ ├── test.react.css
│ └── test.vue.css
├── js
│ ├── 0.bundle.js
│ ├── index.js
│ ├── react-import.bundle.js
│ ├── test.js
│ ├── test.react.js
│ ├── test.vue.js
│ ├── vue-about.bundle.js
│ └── vue-static.bundle.js
└── maps
├── css
│ ├── index.css.map
│ ├── test.css.map
│ ├── test.react.css.map
│ └── test.vue.css.map
└── js
├── 0.bundle.js.map
├── index.js.map
├── index.scss.js.map
├── react-import.bundle.js.map
├── test.js.map
├── test.react.js.map
├── test.scss.js.map
├── test.vue.js.map
├── vue-about.bundle.js.map
└── vue-static.bundle.js.map
```