CreatShare-Fate-beta V1.0.5

CreatShare 前端工作流

Fate 用于新创建一个前端项目时，根据配置生成所需的开发环境依赖。

通过 Fate 创建的项目开发工作流如下：

编辑 src／css 或 src／js 下的代码，实时编译的结果输出到 src／dist 下，接着浏览器自动刷新，开发者切换到浏览器预览效果。

当前所配置的环境依赖为：

• gulp 项目构建工具
• Babel 用于编译ES6或JSX到ES5
• Sass CSS预处理器，兼容CSS语法
• Less CSS预处理器
• sourcemaps 生成sourcemap
• livereload 自动更新浏览器加载的开发中的页面
• html-replace 更换开发／生产环境所需的不同CSS，JS代码
• rename 文件重命名
• colors CLI颜色高亮

当前预定义开发目录结构为：

|
|- index.html      待开发的主页面
|- view/           其他html页面
|- .gitlab-ci.yml  CI配置文件
|- .gitignore      git忽略文件
|- gulpfile.js     gulp配置文件
|- package.json    项目依赖声明
|- README.md       项目README
|- src/         项目所有的静态资源
|  |- font         项目所需的字体文件
|  |- css          项目所需的 SCSS（css）代码
|  |- img          项目所需的 图片
|  |- js           项目所需的 ES6（JSX）代码
|  |  |- lib       项目所需的 JS 库／框架 代码
|  |- dist         项目开发中实时编译产生的CSS，JS代码，开发环境中会使用这些代码
|     |- css       实时编译的 CSS文件
|     |- js        实时编译的 JS文件

安装

npm install -g fate-creatshare

使用

安装完成后，在当前文件夹创建项目的命令如下：

fate init .

或者在别的文件夹下创建：

fate init test_folder

接着 fate 会询问以下问题：

• which style type? ( 使用哪种CSS预编译语言 Less 还是 Sass)
• which script type? ( 使用js还是jsx )
• ProjectName ( 项目名 )
• projectDesc ( 项目描述 )
• projectAuthor ( 项目作者 )
• ServerPath ( 将要部署在服务端上的绝对路径，无需部署则不填，具体请联系服务端开发人员 )

当显示 create success 时，项目则创建成功，这时需运行命令行最后一行提示的命令来安装具体的依赖包。

开发项目时，进入项目文件夹，运行 npm start ，此时会创建一个简单服务器，并自动编译SCSS/LESS，ES6（JSX）。在浏览器中输入 http://localhost:8000 即可访问。

请严格按照项目预定义的目录结构进行开发，如有特殊需求请联系 [email protected]。

更新

npm update -g fate-creatshare