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

npm-scaff

v1.1.3

Published

scaff with gulp && webpack

Downloads

6

Readme

注意:

1.使用该插件默认已经安装了node以及npm(一般安装node就会自动安装好了)

第一步:全局安装 npm-scaff以及gulp4.0

npm install github:gulpjs/gulp#4.0 -g //一定要用gulp4.0,要不后续会报错
npm install npm-scaff -g    //mac如果报错尝试在开始添加sudo

第二步:验证是否安装成功

pm -V 或者 pm --version //出现版本号说明安装成功

第三步: 创建一个文件夹,进入该文件夹开始创建项目环境模版

mkdir <test>  //创建一个名字为test的文件夹
cd <test>     //进入test这个文件夹
pm init       // 创建脚手架的一些文件,按照提示输入项目名称(假设为jquery),以及是否自动npm install,以及选用的框架 

image

第四步:执行完第三步,会在test文件夹下面生成一个jquery的文件夹,然后进入jquery这个项目,通过pm add xx (xx为页面名称)生成页面(之后如果还要创建页面只需要在当前目录下再次执行pm add xx)

cd <jquery> //进入jquery这个文件夹
pm add <pagename> //pagename为你要创建的页面名称,输入之后会在src下面生成页面需要的文件,这里已经做了判断,之前选择什么框架,这里就会生成什么框架的页面模版

image

目录解构(以jquery框架为例子)

image

热加载以及打包

  • 在package.json这个目录执行以下命令

    • 热加载:gulp demo会自动在浏览器上启动相应的页面,之后改动demo里面的index.html,index.scss,index.js 页面都会自动更新,

命令解析

命令 | 含义 ---|--- gulp | 调试所有页面 gulp demo | 调试demo这个页面 gulp build | 打包所有页面 gulp build-demo | 打包demo这个页面