Newton's Preposterous Miscalculation
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    postwebpublic

    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.

    install

    npm i postweb

    Downloadsweekly downloads

    4

    version

    0.0.1

    license

    MIT

    repository

    githubgithub

    last publish

    collaborators

    • avatar