npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

fis-yli

v0.1.8

Published

a wrapper of fis to build seajs project

Downloads

2

Readme

基于FIS 1.9.28 定制的一粒云前端构建工具

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

详细用法

安装

npm install -g fis-yli

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

# 设置global路径为用户目录
npm config set prefix ~/npm
# 将~/npm/bin路径加到PATH变量中
echo -e '\nexport PATH=~/npm/bin:$PATH' >> ~/.bashrc
# 重新载入.bashrc
source ~/.bashrc
# 安装fis-yli
npm install -g fis-yli

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

获得一个todo样例项目

# 使用yliyun的install命令来获取开发资源
yliyun install modjs-todo-demo

在当前目录下即可看到令人期待的modjs模块化项目啦!

如果你执行 yliyun install modjs-todo-demo 命令没成功,可以git clone 这个项目: modjs-todo-demo

让代码跑起来!

首先,启动内置的调试服务器:

yliyun server start --no-rewrite

此时yliyun会启动一个精巧的jetty服务器,并且打开浏览器访问了 http://127.0.0.1:8080 ,现在这个调试环境什么也没有,接下来,我们在命令行下cd到我们下载的样例项目中:

cd todo-demo

第三步,执行yliyun的编译命令:

yliyun release

第四步,刷新浏览器,查看我们的项目。

各种功能体验

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

    yliyun release -m

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

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

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

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

    yliyun release -p

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

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

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

    yliyun release -w

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

  7. 文件上传,执行:

    yliyun release -d remote

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

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

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

    yliyun 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. 扔在 sea-modules 目录下的js、css、less、coffee文件都是模块化文件,会自动包装define,自己就不要写了。使用modjs.use或者require加载模块的时候id与文件的对应规则是这样的:

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

======= yliyun

the yliyun build tool base FIS and spmx