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

fastpage

v1.4.1

Published

a tool to quickly generate front-end pages and associated files

Downloads

54

Readme

fastpage

英文说明

NPM travis codebeat badge codecov NPM version node version download licence

NPM

要求

  • node version:≥v7.6.0

简介

快速生成前端页面和相关文件的工具

  • [x] 创建新页面时的大量重复工作
  • [x] 根据配置生成文件夹结构
  • [x] 支持多种页面(文件夹)类型,可配置
  • [x] 内置替换规则,可扩展
  • [x] 动态替换规则,实时输入命令时动态替换
  • [ ] 其他(需求定制)

安装 & 运行

$ npm install fastpage -g

在项目根目录, 执行:

初始化配置文件

$ fp -i

创建主文件夹及相关文件

// 你可以直接执行 fp , 当然你也可以执行全命令: fp -r page(page 这个配置必须存在)
$ fp

根据配置列表生成文件夹及相关文件

// modal 是配置列表中存在的配置
$ fp -r modal

最后输入名称需要注意

$ input new page name (index): a/entry
  • 这个地方会进行如下处理:
    • 有 path2 的时候, 路径a 会被拼进路径中,但是文件名称不会变,以配置中的名称为准(后续会优化)

配置

fastpage.config.js 示例:

var config = {
    page: {
        tempPath: 'template',            // 模板文件夹路径,相对于配置文件
        list: [
            {
                key: 'ftl',              // 文件 key
                path: 'view',            // 该文件生成路径,相对于配置文件
                tempPath: ['index.ftl'], // 该文件模板路径,相对于模板文件夹的路径
                name: ['index.ftl']      // 待生成文件的名字,tempPath & name 有多个的话,数组位置需对应
            },
            {
                key: 'mcss',
                path: 'mcss',
                tempPath: ['main.mcss'],
                name: ['main.mcss']
            },
            {
                key: 'js',
                path: 'javascript',
                tempPath: ['entry.js'],
                name: ['entry.js']
            },
            {
                key: 'jsCom',
                path: 'javascript',
                path2: 'components',     // 有些文件的路径是依赖新建的文件夹folder的,path2会拼接在folder后面
                tempPath: ['components/index.js', 'components/config.js', 'components/index.html'],
                name: ['index.js', 'config.js', 'index.html']
            }
        ],
        // 通常每个一级目录使用一个 mcss 样式文件
        // 当然你也可以给每个页面均配置一个 mcss
        mcssTopLevel: true,
        // fastpage 内置了一些替换规则
        // 你可以定制自己的替换规则
        replaceList: [
            {
                dynamic: true,       // 是否在输入命令时动态替换
                rex: '~value~',      // 带替换字符串 / 正则表达式
                global: true,        // 是不是全局替换
                str: 'replace value' // 替换之后的字符串:dynamic=true 时 是建议值
            }
        ]
    },
    modal: {
        tempPath: '/webapp/s_tpl/modal',
        list: [
            {
                key: 'jsCom',
                path: 'webapp/src/page',
                path2: 'components/modal',
                tempPath: ['index.js', 'index.html'],
                name: ['index.js', 'index.html']
            }
        ],
        mcssTopLevel: false,
        replaceList: []
    }
};

module.exports = config;

命令

-v, --version,   输出版本
-i, --init,      创建 fastpage.config.js 配置文件
-c, --create,    根据配置创建目录结构
-r, --run,       创建页面文件夹及相关文件
-h, --help,      帮助