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

tinytool

v1.3.7

Published

based on gulp

Downloads

48

Readme

基于gulp、requirejs、zepto、stylus、ejs。

开发使用

  • 需要在项目的package.json配置:
"config": {
  "port": 你的端口号,
  "namespace": 你的namespace,
  "host": "feresource.com"
}
  • npm install tinytool --registry=https://registry.npm.taobao.org

  • nohup tinytooldev connect &(只在首次,之后Server服务就一直后台运行,除非异常或关机)

  • 编译出压缩后代码,使用NODE_ENV=production tinytool css

  • 编译出未格式化代码,使用tinytool css

  • 如果发现修改文件不生效,可以ctrl+C退出之后使用tinytool watch

  • 如果发现修改文件不生效,可以ctrl+C退出之后使用tinytool watch

  • 如果希望编译出压缩后代码,可以ctrl+C退出之后使用NODE_ENV=production tinytool watch

  • 如果希望只watch css代码,可以ctrl+C退出之后使用tinytool watchcss

  • 如果希望图片压缩(只针对.jpg、.png结尾图片压缩),可以使用tinytooldev tinyimg,然后到dist/[你的namespace]/src/resourcetinyimg目录下找到对应图片,然后替换原有图片

  • 本地需要绑定host:127.0.0.1 feresource.com

  • 访问地址:http://feresource.com:[你的端口号]/[你的namespace] (如果服务访问不了端口被占用,可参考小技巧)

  • 在页面中添加可使用livereload模式:<script src="http://feresource.com:[你的端口号]/[你的namespace]/third/livereload.js"></script>

小技巧

  • 检查端口占用:lsof -i :[你的端口号]
  • kill对应进城:kill -9 PID

构建工具功能:

  • ~~本地Server,支持实时编译资源 done~~
  • ~~支持amd,模块加载方案,异步,同步 done~~
  • ~~支持stylus解析 done~~
  • ~~支持资源(js,css)压缩,嵌套,合并 done~~
  • ~~支持ejs和html的require到js里面 done~~
  • ~~支持require json文件到js里面 done~~
  • ~~gulp watch编译报错时不再影响下一次watch done~~
  • ~~支持npm run方式图片压缩 done~~
  • ~~支持接口mock done~~
  • ~~支持代码检查eslint done~~
  • ~~支持实时编译时通过参数查看压缩后代码 done~~
  • ~~如果build编译报错,停止编译,watch模式除外 done~~
  • ~~支持增量编译 done~~
  • ~~支持可选的实时刷新 done~~
  • ~~支持编译报错提醒 done~~
  • ~~支持背景图版本加后缀自动更新 done~~
  • 支持html公共部分include(gulp-file-include)
  • ~~图片压缩使用gulp-imagemin,现在速度太慢 done~~
  • 以下为低优先级
  • 报错系统提醒
  • 支持自动添加define头和尾(gulp-header\gulp-footer)
  • 实时刷新替换为socket模式,gulp connect的方式似乎有问题
  • 支持source map
  • 支持资源生成base 64(图片等)
  • 支持单元测试
  • 支持生成文档(jsdoc)


常用gulp插件

  • https://www.jianshu.com/p/df65ae89b862
  • gulp-rev,根据静态资源内容,生成md5签名,打包出来的文件名会加上md5签名,同时生成一个json用来保存文件名路径对应关系。
  • gulp-stylint,linter for stylus
  • EJS-Lint,缺失gulp相关插件
  • gulp-notify,报错系统提醒