Skip to content

ReAlign/fastpage

Repository files navigation

fastpage

英文说明

NPM travis codebeat badge codecov NPM version node version download licence

NPM

要求

  • node version:≥v7.6.0

简介

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

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

安装 & 运行

$ 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,      帮助