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

generator-mask

v0.1.1

Published

KISSY MINI 项目生成脚手架

Downloads

3

Readme

generator-mask

by 拔赤 [email protected]

NPM version build status Coverage Status node version npm download

generator-mpi

Generator-Mask 工具简介

KISSY MINI 是一款面向无线前端研发的 JavaScript 类库,Generator-Mask 是 KISSY MINI 项目脚手架工具,用来生成项目代码骨架,你可以方便的基于此结构来开发你的项目,并享用到 KISSY MINI 的诸多优秀特性。

Generator-Mask 是 Generator-clam 简化开源版本,设计原理完全一致,Clam 绑定了更多阿里内部私有容器技术规范,阿里内部(阿里旅行)的同学请异步Generator-clam

注意:Generator-Mask 是项目生成工具,Generator-Mpi 是 KISSY MINI 模块代码生成工具

工具安装

如果你在阿里内网,请将 NPM 源指向内网镜像 sudo npm install -g tnpm --registry=http://registry.npm.alibaba-inc.com,然后用tnpm(阿里内网 NPM)来安装

首先安装三件套:

npm install -g yo grunt-cli bower

然后安装本地服务和脚手架

npm install -g here-ssi generator-mask

完成。

工具使用

首先创建好一个存放项目的空目录,进入这个空目录,执行

yo mask

然后根据提示完成项目初始化的工作即可。初始化完成后的目录结构为:

./
├── Gruntfile.js 				项目构建主任务
├── package.json				项目配置文件
├── README.md					项目自述文件
├── build/						构建目录
├── doc/						文档存放目录
├── grunt/						各构建任务脚本
│   ├── bower.json				各构建任务脚本安装配置
│   ├── custom/*.js				自定义任务
│   └── default/*.js			默认任务
└── src/						源码目录
	├── config.js				项目config.js
	├── mods/					业务公用模块目录
	│   └── header.html			公用头
	├── widgets/ 				组件目录
	│   ├── bower.json			组件安装源配置(gitlab or github)
	│   ├── cssreset/			Cssrest 种子
	│   │   └── reset.css
	│   └── kissymini/			Kissymini 种子
	│       └── build/mini-min.js
	└── pages/					页面目录		 
		└── home/				Home 页面目录
			├── index.js		Home 下辖的js文件
			├── index.scss		Home 下辖的scss文件
			└── index.html		Home 下辖的html文件

我们始终将项目代码分割为三个部分:pages(页面)、mods(业务公用逻辑)、widgets(组件),其中 widgets 中推荐存放外部依赖的模块,通过 bower install 来安装,其中src/widgets/bower.json中带有组件安装源的配置,这个配置是通过yo mask初始化时输入的。

此外,若要获得可发布代码,则将src/目录中的源码构建到build/目录中,构建脚本参照项目根目录下的Gruntfile.js,其中构建任务配置详情均存放在grunt/default/目录中。

运行 hello world

当初始化完成项目骨架后,要补全本地的node模块,在项目根目录下执行npm install

开启本地Server:在项目根目录执行

here

这时直接打开浏览器访问到本地目录,选择src/pages/home/index.html,可以看到 “hello world”,项目运行成功。

项目构建

在根目录执行

grunt

将会针对src/进行构建,构建完成后的目录结构和src/保持一样,是可发布的代码,包括 html 代码和 资源文件(css 和 js),执行here开启本地服务后,访问build/pages/home/index.html亦可以看到“hello world”。

Mask 的使用习惯

Mask 生成的代码本质上是一套框架,每个目录具有自己的语义和规范,按照这个规范会写出非常出色的项目代码,在复杂的业务研发中,也能保持项目代码结构的整洁易读。即你要接手别的KISSY MINI 的项目,只需将代码clone到本地,然后进入项目目录执行npm install即可,直接就拥有了here预览源码和grunt构建脚本。

Mask 脚手架工具的边界同样清晰,这些内容不是 Mask 脚手架负责的

  1. 代码的发布操作
  2. 埋点和数据统计
  3. 页面特殊标签的构建

当然如果你足够了解grunt构建工具,完全可以自己定制构建脚本,自行添加的构建参数配置可以放在grunt/custom/中。

因此,Mask 实际上仅对 KISSY MINI、Bower、Git、Grunt 有依赖,此外 Mask 还建议所有 css 源码编写使用 sass 或者 less。

widgets 代码的生成和安装

KISSY MINI 有推荐的模块代码格式,使用Generator-Mpi来生成,更多内容请参照 Mpi 官网