post-web
在项目根目录上运行 post-web
,自动分析文件结构,同时:
- 将 sass 编译成 css,编译 sass ,同时会使用我预定义好的一些非常有用的 mixin,
- 将 coffee、dart、type、es6 相关的 JS 编译成 es5 版的 js
- 将 图片压缩
- 将 slim、jade 编译成 html
NOTE:
- 所有以 _ 开头的文件都会当作 partial,不会编译
- (要做,因为 compass 会编译)另外 styles 或 scripts 子目录中的文件也不会被编译,它们也被当作 partial
- watch 过程中不要修改原有资源的文件夹名称
Usage
先全局安装
npm i -g post-web
pweb
或 postweb
命令
使用 pweb [options] [directory] pweb --help # 查看帮助
下面指定的版本号只是我系统上安装过没问题的版本,不代表只能安装此版本,但建议大版本号要一致
Styles
- sass - 系统需要安装 compass 1.0.* (
gem install compass
) - stylus - 系统需要安装 stylus 0.51.* (
npm -g i stylus
) - less - 系统需要安装 less 2.5.* (
npm -g i less
)
Scripts
- babel - 使用内部 babel-core 模块
- typescript - 使用内部 typescript 模块 (对 typescript 还不熟悉,是否需要使用全局模块?)
- coffee - 系统需要安装 coffee 1.9.* (
npm -g i coffee-script
) - iced - 系统需要安装 iced-coffee-script 1.8.* (
npm -g i iced-coffee-script
)
Templates
- markdown - 使用内部 markdown 模块
- jade - 使用内部 jade 模块
- slim - 系统需要安装 slim 3.0.* (
gem install slim
) - haml - 系统需要安装 haml 4.0.* (
gem install haml
)
SASS 处理流
compass
使用的是系统的 compass 命令
compass 会自动 require 这几个项目:
处理 sass 时,可以指定加载我预先定义好的一些常用的 sass
如何加载这些常用的 sass 文件呢?
-
假设你有一个文件叫
app.scss
-
在同目录下定义一个
_app_config.scss
和app.require
两个文件
-
_app_config.scss
是你在app.scss
中 import 的文件,你可以在此文件上面定义一些变量, 或者覆盖 importPath 中的 sass 文件中的变量;总之这个文件在 sass 中会最先执行 -
app.require
是你的库加载文件,你可以像.gitignore
一样指定 plugins/sass 目录中或你自定义的 importPath 中的文件, 你也可以指定文件夹,前提是文件夹下包含有一个_bootstrap.scss
文件;另外,如果没有app.require
,也可以只定义一个.require
文件, 不过这个.require
文件就可能被bar.scss
或xxx.scss
文件复用
-
在你的
app.scss
的最上面使用导入_app_config.scss
:@import "bootstrap";
-
在
app.require
中定义一些你要加载的文件 -
大功告成,接下来,你只要在你的项目目录下运行
pweb
即可
- 在编译过程中,会将
app.require
中指定的文件导入了app.scss
中, 编译完成后就会把这些导入的内容删除,所以你看不出编译前后有什么区别
autoprefixer
Temporary disable
a {
/* autoprefixer: off */
transition: 1s;
}
cssnext
cssnext
中包含了 autoprefixer
cssgrace
支持的简写形式:
position: center; width: 200px; height: 100px;
<<left: 50%; margin-left: -100px; ...
rgba(0, 0, 0, .5)
<<filter: progid:DXImageTransform.Microsoft.gradient(startColorstr ...
opacity: .5
<<filter: alpha(opacity=50)
display: inline-block
<<*display: inline; *zoom: 1
- 支持使用 image-width 或 image-height 来得到当前 selector 上的图片的宽高
text-overflow: ellipsis
<<overflow: auto; white-space: normal;
clean-css
clean-css 定义了很多优化 css 规则,如果发现你的样式在低版本上不 work 了,可能是 clean-css 帮你优化了。 详情可以去它 github 主页 上看它有哪些优化的选项
Image 处理流
imagemin
HTML 处理流
JS 处理流
coffee, liveScript, typeScript, dart, atScript
jsx, cjsx (coffee jsx)
History
License
Copyright (c) 2015 Zhonglei Qiu. Licensed under the MIT license.