0.0.2 • Published 4 years ago

@whalecloud/fish-cli v0.0.2

Weekly downloads
-
License
MIT
Repository
-
Last release
4 years ago

Fish-cli

基于 NodeJS 的脚手架,提供以下基本功能: 自动创建项目目录结构; 编译打包工具; 开发用的Server; 热部署; node版本需要 8.9 LTS 以上 ,建议使用 Nodejs LTS稳定版本

Install

请切换到公司 znpm

$ npm i -g @ngweb/fish-cli

Usage

fish --help或-h

创建工程

fish new或n my-new-app

选择提供样式,自动生成模板工程和相应工作目录

创建fish.config.js

fish config或c

在当前目录下,创建fish.config.js文件

启动服务

fish serve -w或s -w

启动服务,默认端口是 8088,访问地址 http://localhost:8088

启动服务后:

  • 更改{proName}-proj-all.less会自动编译至styles/css/目录下,生成一份css和一份min.css
  • 更改{proName}/fish.less会自动编译更新frm/fish-desktop/css/fish-desktop-{proName}.css文件

创建模块

fish generate或g module mymodule

自动生成模块mymodule,里面包含相应视图/模板等文件

更新fish-desktop版本

fish update或u [version]

可以指定版本号更新,不提供默认更新到最新版本

添加第三方组件

fish addon或a colorpicker

eslint检测

fish lint或l

读取项目根目录下.eslintrc文件,运行eslint,检测js规范,请参考 eslint详细配置eslint简单配置

构建编译

fish build或b

命令行自动补全

fish add<tab> col<tab>

像Linux shell那样自动补全命令,windows用户可使用Git bash体验

fish.config.js配置

    // entry: {
    //     main: 'main.js', //工程下requirejs的入口文件,也可以是entry:'main.js'
    // },
    // output: {
    //     filename: '[name].bundle.js',   // 输出合并解析后的文件名,[name]将由entry的key值替代
    //     path: ''                        // 输出的路径
    // },
    devServer:{
        port: 8088,       //server启动端口号设置,默认启动项目根目录下index.html文件
        contentBase: '', //设置服务启动目录,默认为当前目录
        watch:{         //监听哪些文件,使得项目浏览器web能够自动刷新
            // less:[
            //    './**/*.less'
            // ],
            // other:[
            //    './**/*.html',
            //    './**/*.js',
            //    './**/*.hbs'
            // ]
        },
        proxy: [
            //可以写多个,优先级按照先配置的先匹配
             {
                 match: ['/**', '!**/*.js', '!/styles/**'], //必选项  需要被代理的url,这里意味着代理所有接口,但不包括所有js文件和styles文件夹下的文件
                 target: 'http://xxx:8080/', //必选项  代理的服务器地址,一般为测试服务器地址
                 pathRewrite: { '/**': '/portal' }, //可选项  如果需要请求地址复写可以用pathRewrite进行
             logLevel: 'debug' // 打印被代理url的信息
            }
        ]
    },
    build:[
        // {
        //     match:['js/base.js','js/test.js'],  //编译文件路径
        //     transfer:'concat | uglify',             //编译方式:concat(合并)、uglify(压缩js)、less(编译less)、cssmin(压缩css)、image(压缩图片)、sourceMap(生成sourceMap)
        //     filename:'minify.js',                       //编译后文件名minify.js
        //     dest:'dist'                           //编译输出路径
        // }
        // {
        //     match:['js/base.js','js/test.js'],  //编译文件路径
        //     transfer: [
        //       {plugin: 'uglify', options: {...}},
        //       {plugin: 'sourceMap', options: {...}}
        //     ]            //支持uglify和sourceMap参数配置
        //     filename:'minify.js',                       //编译后文件名minify.js
        //     dest:'dist'                           //编译输出路径
        // }

    ]

更多fish-config.js配置详情,请参见wiki

API

fish new或n <project-name>

创建项目,这是个选择命令。当前支持选择空模板和菜单模板。

fish config或c

在当前目录下,创建fish.config.js文件

fish serve或s [-p port/--port] [-w / --watch]

启动服务,-p/--port设置启动端口号,-w/--watch设置是否热部署(实时编译,自动刷新),一般适用于fish-cli初始化的项目(标准目录),同时生成sourcemaps。

fish generate module <module-name>

创建模块,支持缩写 fish g module <module-name>,这里的 module-name 可以是相对路径。这是一个选择命令,可选择需要的模块。当前提供的模块有:

  • 空模块
  • CRUD模块(表格列表,条件查询,增删改)

(注意:如果创建的工程是基于菜单模板,执行该命令会自动生成该模块对应的一级菜单)

fish generate view <file-name>

在当前目录下创建文件/文件夹,支持缩写 fish g view <file-name>,这里的 file-name 可以是相对路径

fish generate menu

在菜单模板工程中创建菜单/目录,菜单模板工程输入该命令后,读取modules/menu/collections/menu.js中的菜单树,根据命令加入菜单/目录。具体执行步骤如下:

  • 选择菜单类型(目录 or 菜单)
  • 输入菜单/目录依赖的parentId(默认为-1,即创建一级目录/菜单)
  • 输入菜单/目录名
  • 若选择类型为菜单而非目录,需要模块来承载。所以,这一步需要选择模块,模块名即菜单名

注意:

  • 如果创建的工程不是基于菜单模板,执行该命令会报出警告,不会产生影响
  • parentId必须是menu.js中存在的并且只能是目录类型的id

fish update [version]

更新目录fish-desktop版本。命令会自动找到目录下第一个fish-desktop所在目录,进行覆盖更新。可指定版本号,不指定则更新至最新版本

fish addon <addon-name>

添加 fish-desktop 提供的第三方组件

eslint检测

读取项目根目录下.eslintrc文件,运行eslint,检测js规范

fish build

编译、压缩、autoprefix样式文件,输出到styles文件夹里,并将fontAweSome字体拷贝至styles,可在fish.config.js里配置编译文件和编译方式

config.json中的token

  • Go to your Profile settings.
  • Go to Access tokens.

v2.4.7后新增