node package manager

postweb

postweb

NPM version GitHub version Dependency Status

在项目根目录上运行 pweb,自动分析文件结构,同时:

  • 将 sass/stylus/less 编译成 css,同时支持 cssnext, autoprefixer 等,
  • 将 coffee/jsx/es6/typescript 编译成 js
  • 将 slim/jade/haml/md 编译成 html
  • 支持 watch 源代码,有改动可以触发上面的对应的编译程序
  • 支持 图片/字体/代码 的压缩
  • 支持 字体文件自动根据 ttf 字体生成其它三类的字体:eot, svg 和 woff
  • 支持启动 express 服务器,并启动 livereload(自动分配可以用的端口,一般不会出现端口被占用的情况)
  • 支持在项目目录下设置 pwebrc.{json,js} pattern 的配置文件(可以配置哪些选项可以查看options.js

缺点:

  • 不支持具体业务逻辑的处理(同样具体业务逻辑可以考虑处理 post-web 生成后的代码)

NOTE:

  • 支持 SourceMap
  • 所有以 _ 开头的文件都会当作 partial,不会编译
  • watch 过程中不要修改原有资源的文件夹名称(因为这些资源文件夹第一次初始化之后在程序中就不会变了)
  • 除了 scripts/styles/templates/images/fonts 之外的其它文件(如 .txt),只有在 production 环境下才会拷贝到 distDir

TODO:

  • 支持 DEBUG 模式(发布时,自动去除 DEBUG 代码)
  • 在复制图片文件到 dist 目录时, compass 在编译后会把之前生成的 sprite 文件删除,所以会导致要复制的图片文件没找到
  • 添加 lint
  • 添加编译某些应用(已经支持 concat, angular minify)
  • 添加 hash (上传的时候再 hash ?)
  • 完善我的 sass 库
  • 参考 fis, http://amokjs.com/, https://github.com/broccolijs/broccoli

Usage

先全局安装

npm i -g post-web

使用 pwebpwebs 命令

 
pweb [options] [directory] # directory 是项目的根目录
 
pweb --help # 查看帮助
 
 
 
pwebs [options] [directories...]  # directory 是你的服务器要监听的静态资源的文件夹
 
 

下面指定的版本号只是我系统上安装过没问题的版本,不代表只能安装此版本,但建议大版本号要一致

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)

配置支持 proxyrewrite

在 JSON 配置的最外层添加 proxy 和 rewrite 两个属性即可

  • [proxy 是一个对象]
    "proxy": {
      '/api': 'http://other.domain.com'
    }
  • rewrite 是一个数组(其实 rewrite 模块也支持 proxy)
    "rewrite": [
      "^/blog/(.*) /$1",
      "^/blog/(.*) - [L]",  // A dash indicates that no substitution should be performed. 
      "^/test/proxy/(.*)$ http://nodejs.org/$1 [P]"  // P means Proxy 
    ]

支持配置 webpack

注意只会用它来打包 JS

可配置项除了 webpack 默认的外,还支持:

  • injectVariables: Object, 默认有 _PROD_ 和 _DEV_ 两个变量
  • stats: Object

支持 rollup

配置

 rollup: {
  options: {
    entry: 'app.js'  // 相对于 js 脚本目录的路径 
  },
  bundle: {
    format: 'umd'
  }
}

HTML 中的 concat 语法

RegExp: /([ \t]*)<!--\s*concat:(\S*)\s+([\s\S]*?)\s*-->/gi

 
<!-- concat:dir/xx.js a.js,b.js,__bower -->
 
表示将 scripts/a.js, scripts/b.js 及 bower 安装的模块的所有的 js 文件合并到 scripts/dir/xx.js 中
 
CSS 的处理方式也类似
 
只用 bower 中的 es5-shim 和 json3 模块
<!-- concat:/scripts/lib.js __bower+es5-shim+json3 -->
用所有的 bower,但排除 es5-shim 和 json3 模块( = 表示排除,因为 - 可能包含在文件名中,所以不能用)
<!-- concat:/scripts/lib.js __bower=es5-shim=json3 -->

SASS 处理

compass

使用的是系统的 compass 命令

compass 会自动 require 这几个项目:

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 主页 上看它有哪些优化的选项

History

CHANGELOG

License

Copyright (c) 2015 Zhonglei Qiu. Licensed under the MIT license.