att-yunos-suite

att suite for yunos

npm install att-yunos-suite
1 downloads in the last day
23 downloads in the last week
29 downloads in the last month

att-yunos-suite

云OS前端团队att插件套件

安装

首先确保安装了att,然后执行以下命令

att install att-yunos-suite

然后运行att

~>att

Usage: att COMMAND[:NAMESPACE] [ARGS] [--silent]

  beautify     format the code to be beautiful
  createapp    create app by template
  datauri      datauri the css or image
  help         for more infomation on a specific command
  hint         code syntax validation
  install      install att plugin by npm module
  minify       minify html, css, js and image files
  namespace    set a command running without :namespace by default
  server       startup a simple server
  uninstall    uninstall att plugin

 :att-yunos-suite    1.2.0
  cdn          publish assets to cdn

cdn

cdn插件限云OS团队内部使用,它可以上传js, css, 图片或者其它必要的assets到CDN服务器上,云OS使用的CDN域名为m.alicdn.com

默认的环境配置如下:

# 用于上传文件到CDN上
42.120.218.53 m-source.aliyun.com

#QA env 测试环境
#10.125.14.134 m.alicdn.com

#Staging env 预发布环境
#10.125.14.135 m.alicdn.com

att cdn

上传到测试环境

att cdn my.js

上传到预发环境

att cdn my.js --staging

上传到线上环境

att cdn my.js -p

上传到x目录

att cdn my.js -x

批量上传到线上环境并忽略确认提示

att cdn *.* -ps

不压缩代码

att cdn my.js --ignore

#or

att cdn my.js --ignore-minify

不添加版本号

att cdn my.js --ignore-version

直接上传文件

att cdn my.js --upload

上传css文件

--upload参数的作用是直接上传文件,不做任何处理。--ignore-minify--ignore-version表面上的效果一样,但是还是有区别, 在遇到CSS文件时,组合命令的效果会将文件中url定义的相对路径转成绝对路径。

att cdn my.css --ignore-version --ignore-minify

对于css中定义的图片,这个批处理过程会自动进行DataURI处理,而且对于特殊的声明,还会进行特殊的处理。

有一段定义了背图片的CSS,它在IE6下hack成无背景。

#el{
  background:url(../img/frame.png) no-repeat;_background:none;
}

经过cdn命令操作后会变成这样:

#el{background:url("data:image/png;base64,....") no-repeat;*background:url(/promotion/2013/08/duowei/img/frame.png) no-repeat;_background:0 0}

有一段定义了背图片的CSS,在background后面有一个了/*ie6*/标识的注释。

#el{
  background:url(../img/video-2.png) /*ie6*/
}

经过cdn命令操作后会自动加上滤镜为IE6做透明度兼容:

#el{background:url(/promotion/2013/08/duowei/img/video-2.png);_background:0 0;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://m.alicdn.com/promotion/2013/08/duowei/img/video-2.png', sizingMethod='scale')}

上传less文件

att cdn my.less --ignore-version --ignore-minify

上传coffeescript

att cdn my.coffee --ignore-version --ignore-minify

配置

att cdn插件会在当前运行的目录中逐级向上查找.att文件,.att文件中配置了该repo在CDN上的根目录。比如有个名为promotion的repo,目录结构如下:

+ promotion
  - .att
  + 2013
    + 06
      + proj1
        - index.js
      + proj2
        - index.j2 
    + 07
      + proj3
        _ index.js

其中.att的文件内容为:

{
  "cdnPath": "promotion"
}

假设att的运行目录promotion/2013/06这个目录下,通过这个命令就可以将proj1/index.js上传至测试CDN:

att cdn proj1/index.js --ignore-version

# 目标URL
# http://m.alicdn.com/promotion/2013/06/proj1/index.js

详细可以参考这个git repo. 、

changelog

  • 1.2.0 有版本号的文件上传过程复制出错的bugfix。支持父级路径上传,比如att cdn ../../workspace/xxx.css
  • 1.1.0 支持没有找到.att文件时或者输入了-x选项时自动上传到x目录。支持coffeescript, less
  • 1.0.0 初始版本
npm loves you