Skip to content

ReAlign/fastpage

Folders and files

NameName
Last commit message
Last commit date

Latest commit

author
ReAlign
Jul 6, 2018
b44d00c · Jul 6, 2018
Dec 16, 2017
Nov 25, 2017
Jul 6, 2018
Jul 6, 2018
Oct 7, 2017
Oct 7, 2017
Jul 4, 2018
Oct 9, 2017
Jul 4, 2018
Jul 6, 2018
Jul 6, 2018
Oct 10, 2017
Jul 6, 2018

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

Releases

No releases published

Packages

No packages published