Skip to content

5.源码,研发,上线

Jump to bottom
Furic Zhao edited this page Jan 27, 2018 · 3 revisions

源码目录结构

demo-zhj源码目录结构如下：

➜  src git:(master) ✗ tree
.
├── lib
├── static
│   ├── fonts
│   ├── images
│   └── styles
│       ├── index.less
│       └── page1.less
└── views
    ├── index
    │   ├── index.html
    │   ├── index.js
    │   └── module
    ├── page1
    │   ├── index.html
    │   ├── index.js
    │   └── module
    └── public
        ├── module
        └── utils

研发环境

执行gulp，FEZ在项目demo-zhj目录下自动创建dev研发目录，自动打开系统默认浏览器进入研发环境，您可以打开多个不同终端和不同类型的浏览器访问同一开发页面，开发过程中任何文件的更改，或是在任何一个终端的浏览器中的操作行为，都会同步到每个终端界面，实时查看在每个终端的修改效果。

➜  demo-zhj git:(master) ✗ gulp
[22:28:11] Requiring external module babel-register
[22:28:17] ---------------------------------------
[22:28:17] * 欢迎使用 FEZ 前端模块化工程开发框架 *
[22:28:17] ---------------------------------------
[22:28:17] Using gulpfile ~/wwwroot/fez/demo-zhj/gulpfile.babel.js
[22:28:17] Starting 'default'...
[22:28:17] Starting 'dev'...
[22:28:17] Starting 'delDev'...
[22:28:17] Finished 'delDev' after 64 ms
[22:28:17] Starting 'copyImg'...
[22:28:17] Starting 'svgSymbol'...
[22:28:17] Starting 'copyFonts'...
[22:28:17] Starting 'copyLib'...
[22:28:17] Starting 'copyCustom'...
[22:28:17] Starting 'compileCss'...
[22:28:17] Starting 'compileAppJs'...
[22:28:17] Finished 'svgSymbol' after 26 ms
[22:28:17] Finished 'copyImg' after 79 ms
[22:28:17] Finished 'copyFonts' after 82 ms
[22:28:17] Finished 'copyLib' after 83 ms
[22:28:17] Finished 'copyCustom' after 84 ms
[22:28:17] Finished 'compileCss' after 389 ms
[22:28:18] 1893 bytes written (0.39 seconds)
[22:28:18] 1893 bytes written (0.41 seconds)
[22:28:18] Finished 'compileAppJs' after 554 ms
[22:28:18] Starting 'copyBowerFiles'...
[22:28:18] Starting 'compileHtml'...
[22:28:18] Finished 'copyBowerFiles' after 2.62 ms
[22:28:18] gulp-inject 2 files into index.html.
[22:28:18] gulp-inject 2 files into page1.html.
[22:28:18] Finished 'compileHtml' after 88 ms
[22:28:18] Starting 'watch'...
[22:28:18] Starting 'qrcodeViewHtml'...
[22:28:18] Starting 'startServer'...
[22:28:18] Finished 'watch' after 8.52 ms
[22:28:18] Finished 'qrcodeViewHtml' after 13 ms
[Browsersync] Access URLs:
 ------------------------------------------------
       Local: http://localhost:8081/zindex.html
    External: http://192.168.3.6:8081/zindex.html
 ------------------------------------------------
          UI: http://localhost:5051
 UI External: http://192.168.3.6:5051
 ------------------------------------------------
[Browsersync] Serving files from: ./dev

dev研发目录结构如下：

➜  dev git:(master) ✗ tree
.
├── index.html
├── page1.html
├── static
│   ├── css
│   │   ├── index.css
│   │   └── page1.css
│   └── js
│       ├── index.js
│       ├── index.js.map
│       ├── page1.js
│       └── page1.js.map
├── zindex //研发调试目录(无需关注)
│   ├── css
│   │   └── bootstrap.min.css
│   └── js
│       ├── bootstrap.min.js
│       ├── handlebars-v4.0.5.min.js
│       ├── jquery-2.1.3.min.js
│       └── qrcode.min.js
└── zindex.html

每次执行gulp进入研发环境，dev研发目录都会被先删除然后重新创建新的内容。

上线编译

执行gulp dist，FEZ 会自动化编译源码目录中的所有文件(js、sass、less、html、图片、字体等)，自动化生成md5版本号，并将编译后的上线代码发布到dist目录。之后通过其它途径、或流程工具发布dist目录到线上服务器。

➜  demo-zhj git:(master) ✗ gulp dist
[22:35:30] Requiring external module babel-register
[22:35:32] ---------------------------------------
[22:35:32] * 欢迎使用 FEZ 前端模块化工程开发框架 *
[22:35:32] ---------------------------------------
[22:35:33] Using gulpfile ~/wwwroot/fez/demo-zhj/gulpfile.babel.js
[22:35:33] Starting 'dist'...
[22:35:33] Starting 'delDist'...
[22:35:33] Finished 'delDist' after 10 ms
[22:35:33] Starting 'compileCss'...
[22:35:33] Finished 'compileCss' after 59 ms
[22:35:33] Starting 'compileAutoprefixer'...
[22:35:33] Starting 'imageminImg'...
[22:35:33] Starting 'fontsSize'...
[22:35:33] Starting 'copyCustom'...
[22:35:33] Starting 'svgSymbol'...
[22:35:33] Finished 'svgSymbol' after 16 ms
[22:35:33] gulp-imagemin: Minified 0 images
[22:35:33] Finished 'imageminImg' after 22 ms
[22:35:33] Finished 'fontsSize' after 24 ms
[22:35:33] Finished 'copyCustom' after 25 ms
[22:35:33] Finished 'compileAutoprefixer' after 155 ms
[22:35:33] Starting 'compileAppJs'...
[22:35:33] Starting 'copyBowerFiles'...
[22:35:33] Starting 'copyLibFiles'...
[22:35:33] Finished 'copyBowerFiles' after 391 μs
[22:35:33] Starting 'bowerCustomCss'...
[22:35:33] Starting 'bowerCustomJs'...
[22:35:33] Finished 'bowerCustomCss' after 645 μs
[22:35:33] Finished 'bowerCustomJs' after 628 μs
[22:35:33] Starting 'bowerVendorJs'...
[22:35:33] Finished 'bowerVendorJs' after 121 μs
[22:35:33] Starting 'bowerVendorCss'...
[22:35:33] Finished 'bowerVendorCss' after 121 μs
[22:35:33] Finished 'copyLibFiles' after 4.48 ms
[22:35:33] Starting 'libCustomJs'...
[22:35:33] Finished 'libCustomJs' after 259 μs
[22:35:33] Starting 'libAssignJs'...
[22:35:33] Finished 'libAssignJs' after 24 ms
[22:35:33] Starting 'libVendorJs'...
[22:35:33] Finished 'libVendorJs' after 8.01 ms
[22:35:33] Finished 'compileAppJs' after 280 ms
[22:35:33] Starting 'compileHtml'...
[22:35:33] gulp-inject 2 files into index.html.
[22:35:33] gulp-inject 2 files into page1.html.
[22:35:33] Finished 'compileHtml' after 106 ms
[22:35:33] Starting 'reversion'...
[22:35:33] Finished 'reversion' after 28 ms
[22:35:33] Starting 'reversionRepalce'...
[22:35:33] Finished 'reversionRepalce' after 18 ms
[22:35:33] Starting 'notAvailableWebp'...
[22:35:33] Finished 'notAvailableWebp' after 162 μs
[22:35:33] Starting 'cdnReplace'...
[22:35:33] Finished 'cdnReplace' after 438 μs
[22:35:33] Starting 'compileChanged'...
[22:35:33] Finished 'compileChanged' after 19 ms
[22:35:33] Finished 'dist' after 679 ms

dist上线目录结构如下：

➜  dist git:(master) ✗ tree
.
├── index.html
├── page1.html
├── rev-manifest.json
└── static
    ├── css
    │   ├── index-593d9d76c4.css
    │   └── page1-d41d8cd98f.css
    └── js
        ├── index-f3d06ba2f6.js
        └── page1-f3d06ba2f6.js

每次执行gulp dist发布上线，dist目录都会被先删除然后重新创建新的内容。

Clone this wiki locally