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

wishbao

v3.3.4

Published

This project is to nuts gulp workflow.

Downloads

10

Readme

Nuts 前端构建工具

Build Status npm npm npm

这是一个基于 gulp#4.x 的前端工程构建集合,包括了最常见的新建项目,开发项目和最后的编译发布项目。其中 JavaScript 支持 ES2015 的语法,CSS 部分采用 SCSS。

新建项目目录结构说明。

--- dist 这个目录是线上编译出来的代码,属于最终用户访问的代码。
    --- 源码目录中对应的最终代码目录,仅仅只放html文件
    --- static 放置静态文件的地方,真实环境中为CDN的目录地址
--- dev 开发模式下的目标文件夹。
--- src 源代码目录,所有的源代码都放在这里
--- nuts.config.json 配置文件
--- package.json 项目的依赖说明文件,可用于初始化项目和安装依赖包

工具安装

初始化的时候执行以下命令安装必要的依赖

  • nodejs运行环境
    • node >= 6.6.0 npm >= 3.10.3
$ npm install -g n
$ n stable
  • 通过 npm 进行安装
$ npm install -g wishbao

Nuts 文档

初始化项目:

// 如果需要更新配置文件则需要添加 --update 参数
$ nuts init [--update]

新建项目:

// 新建项目支持下划线的命名方式, 项目会按照驼峰命名的方式进行下划线的转换

$ nuts create --name <项目名称>

开发项目:

$ nuts dev --name <项目名称> [--port <端口号>]

清除缓存:

$ nuts clean

编译项目:

// 如果需要编译出指定版本请在后面添加 --ver 参数
$ nuts build --dir <项目名称> [--ver <指定版本号>]

导入静态资源:

$ nuts include --name <项目名称>

命令说明:

  • 安装之后修改配置文件之后就可以通过 create 命令来创建新的项目了。
  • 项目默认监听端口号2333,在浏览器中打开 http://localhost:2333 即可看到当前项目页面,如果端口号冲突或者同时启动多个项目则在 dev 命令后面添加 --port 参数来动态修改端口号。
  • 关于具体配置的内容,请查看配置文件中的说明。

配置文件说明:

{
	// 本地开发服务器监听的端口号
    "serverPort": 2333,
    
	// 开发环境中的源码路径
    "sourceDir": "src",

	// 需要部署的目标路径
    "distDir": "dist",

	// 目标路径中静态文件需要放置的目录
    "staticDir": "static",

	// 开发环境中需要开发的项目名称
    "name": "example",

	// 项目作者
    "author": "jonnyf",

	// 开发时的编译目录
    "devDir": "dev",

	// 编译是否需要添加 cdn
    "needCDN": true,

	// 默认的CDN路径
    "staticURL": "http://cdn.jonnyf.com/images",

    // 代码中的字符串替换内容
    "replaceStr": 666,

    // html 文件的 title
    "title": "exampleTitle",

    // 样式预编译支持版本
    "styleType": "css",

    // JavaScript 版本
    "target": "ES6",

    // 静态资源转 base64
    "base64": false,

	// 引入的 sass 库,默认采用了 nuts-scss 库,使用时需要先安装。传入的值需要是一个数组。
    // 'sassLib': []
    "sassLib": ["nuts-scss"]
}

关于 CDN:

cdn 根目录的子目录 cdn_dir/指向dist/static/

* cdn 项目中包含的图片,字体,css和js文件都会部署到 CDN 目录中。
* cdn 更新通过发布新版本进行更新。
* 项目中的html文件不在缓存中!
* 例子:http://cdn.jonyf.com/cdn_dir/test/1.1.1/css/test.css

更新日志 CHANGELOG