fis-command-init

scaffold

npm install fis-command-init
30 downloads in the last day
67 downloads in the last week
71 downloads in the last month

脚手架使用文档

介绍

如果你使用的是FIS,如果你感觉有一些东西可以做成规范实行起来,如果你有一些公用的模板或者组件的框架,那么就使用脚手架吧。方便快捷简单的搞定上面提到的这些问题。

使用方法

目录:

基本用法

  Usage: init <command> [options]

  Commands:

    module                 create a module
    widget                 create a widget

  Options:

    -h, --help                 output usage information
    -s, --scaffold <scaffold>
    -d, --dir <name>           create to dir
    --with-plugin              if create a module, whether include `plugin`
    --repos <url>              repository
    --verbose                  output verbose help
    --list [query]             list component from the repos

如上,脚手架支持创建一个模块(module)和widget(widget),其使用方法是;

新建一个模块
$ fis init module -d  common --with-plugin // common只是一个文件夹,可以是任何目录, --with-plugin意思是是否包含fis提供的smarty插件(fis-plus)
or
$ fis init module -d no-common // no-common只是一个文件夹,可以是任何目录
新建一个widget
$ fis init widget -d header
安装模块中使用到的fis插件

如果你的项目用了未在FIS中默认依赖的插件,比如sass,比如某某某; 当一个新人拿到这样一个模块时,需要安装这些插件,但如果没有文档说明这些,TA最多看到release时的一个报错,然后不知所措; 脚手架支持这样一个功能,自动安装这些插件。

在模块目录下执行;

$ fis init
下载其他组件

eg,

下载modjs

$ fis init modjs

如果想看看还能下载那些包;

$ fis init --list

高级用法

这节主要说一下脚手架的定制,脚手架默认附带一份模板和插件,后面会具体说明模板插件

模板

模板就是已经被创建好的module和widget;里面体现了公用的编码规范,和一些可替换的全局变量;这块很重要,是整个脚手架的核心。 这个模板里面可以说明:

  • js组件如何导出函数
  • js组件如何使用,使用规范是什么
  • 注释如何写
  • css组件如何写
  • fis-conf.js公用的配置
  • 其他

有了模板,还需要有一些不一样的地方,就比如注释里面的作者、时间;还有fis-conf.js里面的namespace等。这种修改怎么办,脚手架提供一种方法。 当制作模板的时候使用{{- namespace -}}这种方式后,再进行创建的时候需要使用者输入namespace的值。

插件

插件是用来进行一些目录调整的、文件名替换、下载模板等;

详细步骤
  • 制作模板
    • module模板
    • widget模板
    • 全局变量
  • 发布模板
  • 制作插件
  • 发布插件
制作模板
#module模板

假设module中包含

  • fis-conf.js // fis配置文件
  • page/layout.tpl // layout.tpl
  • page/index.tpl // 页面模板
  • plugin/* // 插件
  • test/page/index.php // index页面测试数据
  • widget/header.tpl // widget tpl模板
  • widget/header.css // widget css文件
  • widget/header.js // widget js文件

那就创建这些文件,并完善;

$ tree iknow-scaffold-module
iknow-scaffold-module
    ├── fis-conf.js
    ├── page
    │   ├── index.tpl
    │   └── layout.tpl
    ├── plugin
    └── widget
        └── header
            ├── header.css
            ├── header.js
            └── header.tpl
widget模板

widget模板中包含

  • widget.tpl
  • widget.js
  • widget.css
#全局变量

比如 fis-conf.js

fis.config.set('namespace', {{-namespace ?-}});

以上说明了以下模板的制作过程,更详细请安装已经设定好的模板作为参考

$ lights install pc-scaffold-module
发布模板

FIS提供了包组件管理平台lights,你可以方便的把包发布到lights上;

$ cd iknow-scaffold-module
$ lights init //要求安装lights
...
$ lights publish

done.

脚手架内核提供了从lights下载包的方法;

/**
 * options.exclude [RegExp]需要排除的文件
 * options.include [RegExp]需要的文件
 * dist 目标目录
 */
fis.scaffold.downlaod('组件名', dist, options, callback);

下载完成以后,需要呼出交互界面替换全局变量的接口;

/**
 * dir 下载组件存放的文件夹
 */
fis.scaffold.prompt(dir);

还提供了一个mv接口,用来做文件或文件夹移动的;

fis.scaffold.mv(from, to, include, exclude);

其他接口;

还可以使用fis.util里面的所有方法;

$ node
> fis = require('fis');
> fis.util
{ [Function]
  is: [Function],
  map: [Function],
  pad: [Function],
  merge: [Function],
  clone: [Function],
  escapeReg: [Function],
  escapeShellCmd: [Function],
  escapeShellArg: [Function],
  stringQuote: [Function],
  getMimeType: [Function],
  exists: [Function],
  fs:
   { Stats: [Function],
     exists: [Function],
     existsSync: [Function],
     readFile: [Function],
     readFileSync: [Function],
     close: [Function],
     closeSync: [Function],
     open: [Function],
     openSync: [Function],
     read: [Function],
     readSync: [Function],
     write: [Function],
     writeSync: [Function],
     rename: [Function],
     renameSync: [Function],
     truncate: [Function],
     truncateSync: [Function],
     ftruncate: [Function],
     ftruncateSync: [Function],
     rmdir: [Function],
     rmdirSync: [Function],
     fdatasync: [Function],
     fdatasyncSync: [Function],
     fsync: [Function],
     fsyncSync: [Function],
     mkdir: [Function],
     mkdirSync: [Function],
     readdir: [Function],
     readdirSync: [Function],
     fstat: [Function],
     lstat: [Function],
     stat: [Function],
     fstatSync: [Function],
     lstatSync: [Function],
     statSync: [Function],
     readlink: [Function],
     readlinkSync: [Function],
     symlink: [Function],
     symlinkSync: [Function],
     link: [Function],
     linkSync: [Function],
     unlink: [Function],
     unlinkSync: [Function],
     fchmod: [Function],
     fchmodSync: [Function],
     lchmod: [Function],
     lchmodSync: [Function],
     chmod: [Function],
     chmodSync: [Function],
     lchown: [Function],
     lchownSync: [Function],
     fchown: [Function],
     fchownSync: [Function],
     chown: [Function],
     chownSync: [Function],
     _toUnixTimestamp: [Function: toUnixTimestamp],
     utimes: [Function],
     utimesSync: [Function],
     futimes: [Function],
     futimesSync: [Function],
     writeFile: [Function],
     writeFileSync: [Function],
     appendFile: [Function],
     appendFileSync: [Function],
     watch: [Function],
     watchFile: [Function],
     unwatchFile: [Function],
     realpathSync: [Function: realpathSync],
     realpath: [Function: realpath],
     createReadStream: [Function],
     ReadStream: { [Function: ReadStream] super_: [Object] },
     FileReadStream: { [Function: ReadStream] super_: [Object] },
     createWriteStream: [Function],
     WriteStream: { [Function: WriteStream] super_: [Object] },
     FileWriteStream: { [Function: WriteStream] super_: [Object] },
     SyncWriteStream: { [Function: SyncWriteStream] super_: [Object] } },
  realpath: [Function],
  realpathSafe: [Function],
  isAbsolute: [Function],
  isFile: [Function],
  isDir: [Function],
  mtime: [Function],
  touch: [Function],
  isWin: [Function],
  isTextFile: [Function],
  isImageFile: [Function],
  md5: [Function],
  base64: [Function],
  mkdir: [Function],
  toEncoding: [Function],
  isUtf8: [Function],
  readBuffer: [Function],
  read: [Function],
  write: [Function],
  filter: [Function],
  find: [Function],
  del: [Function],
  copy: [Function],
  ext: [Function],
  query: [Function],
  pathinfo: [Function],
  camelcase: [Function],
  pipe: [Function],
  parseUrl: [Function],
  download: [Function],
  upload: [Function],
  install: [Function],
  readJSON: [Function],
  glob: [Function],
  nohup: [Function],
  normalize: [Circular] }
制作插件

插件需要放到npm上,插件命名规范fis-scaffold-<插件名>。具体可参考fis-scaffold-pc

插件接口:

/**
 * options
 * options.dir  安装到dir目录下
 * options.withPlugin 是否带插件
 */
module.exports = function (options) {
  ...
  //必须导出widget和module两个接口
  return {
    widget: function () {....}
    module: function () {....}
  };
}

插件完成后发布npm;

那么这个插件如何使用呢;假设自定义了一个插件fis-scaffold-iknow.

那么使用的时候

# 使用-s选择某个脚手架
$ fis init module -s iknow -d common
$ fis init widget -s iknow -d footer
发布插件
$ npm publish
npm loves you