ypm

yygame npm fis tool

npm install ypm
48 downloads in the last week
52 downloads in the last month

yygame超级利器!

  • modjs 作为模块化框架
  • 所有静态资源自动加 md5版本戳,seajs均可加载定位
  • 支持给所有静态资源添加域名前缀,seajs加载毫无压力
  • 非常易用的自动 csssprites
  • 自动jshint校验js、coffee文件,校验结果为 中文 显示
  • js、css压缩,压缩时保留require关键字,使得seajs运行正常
  • png图片压缩,支持 将png24压缩为png8
  • 内置本地开发调试服务器,支持运行 jspphp
  • 支持使用 lesscoffeescript 开发项目
  • 支持将underscore模板编译成 js模板函数 直接嵌入到js或coffee文件中使用
  • 支持define自动包装,写seajs组件如同写nodejs一样舒爽
  • 支持文件监听,保存即发布
  • 支持浏览器自动刷新,保存即刷新
  • 可以上传到远端服务器,保存即增量编译上传
  • 超低学习成本,只须记忆 3 条命令即可完成开发
  • 抹平编码差异,开发中无论是gbk、gb2312、utf8、utf8-bom等编码的文件,输出时都能统一指定为utf8无bom(默认)或者gbk文件
  • 跨平台支持win、mac、linux等系统

详细用法

安装

npm install -g ypm

非win系统最好将npm的包安装在用户目录下,尽量避免使用 sudo 来安装。修改npm install -g安装目录的方法为:

安装ypm

npm install -g ypm

安装成功后执行 ypm -h 即可看到相关开发命令帮助

各种功能体验

  1. 给所有资源加 md5版本戳,执行:

     ypm release -m
    

    然后刷新浏览器,看一下源码吧!

  2. 压缩js、css、图片,执行:

     ypm release -o
    
  3. 校验js,执行:

     ypm release -l
    
  4. 自动csssprite,执行:

     ypm release -p
    

    可以看到 #todo-list label 的图片都自动合并了哦

  5. 所有静态资源加域名,先修改fis-conf.js文件,去除掉 第2行 的注释,然后执行:

     ypm release -D
    
  6. 文件监听,执行:

     ypm release -w
    

    命令行窗口不要关闭,然后去修改源码->保存->刷新浏览器,就能看到更新的效果。

  7. 文件上传,执行:

     ypm release -d remote
    

    就可以发布到我的一个小服务器上,然后浏览器访问: http://vm-1.chongzi.kd.io/

  8. 加域名、压缩、加md5戳、校验、csssprite、把编译好的文件产出到output目录中(其实就是随意组合使用前面提到面的参数啦):

     ypm release -Domlp -d ../output
    
  9. 文件监听、启动live-reload服务器、同时发布到本地调试目录、outpu目录和远端服务器:

     ypm release -wLd preview,remote,../output
    

    使用自动刷新功能需要添加 live-reload 浏览器插件,请google之,我没做可以自动添加脚本的功能,因为懒。。。

目录规范

任何 目录规范部署规范编译规范 都是可配置的,不过略微麻烦一些,有兴趣的同学可以在issues里留言,这里只介绍内置的规范。

内置的规范包括:

  1. .less 后缀的文件是less文件,编译后得到css文件。
  2. .minix.less 后缀的文件定义less的minix,编译后不会产出。
  3. .coffee 后缀的文件是coffee-script,编译后得到js文件。
  4. .tmpl 后缀的文件是underscore前端模板,左右定界符为 <%%>,编译后不会产出。在js或coffee中使用 __inline('path') 函数将其嵌入到js或coffee文件中作为模板函数使用。
  5. 扔在 modules 目录下的js、css、less、coffee文件都是模块化文件,会自动包装define,自己就不要写了。使用require.async或者require加载模块的时候id与文件的对应规则是这样的:
    文件 引用id 举个例子
    /modules/a.js a require('a');
    /modules/b/b.js b 异步调用:require.async('b');
    /modules/b/c.js b/c require('b/c');
  6. 扔在 lib 目录下的文件不被认为是模块化的,请直接在页面上使用script或link标签引用。

如果使用中遇到什么觉得诡异的地方,欢迎issues留言

npm loves you