Skip to content

7.进阶项目

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

项目实战(进阶项目)

**1. 创建demo-medium项目目录

➜  fez git:(master) ✗ gulp fezinit --dir=demo-medium
[14:18:23] Requiring external module babel-register
[14:18:24] Using gulpfile ~/wwwroot/fez/gulpfile.babel.js
[14:18:24] Starting 'fezinit'...
[14:18:24] Starting 'initProject'...
[14:18:24] Finished 'initProject' after 38 ms
[14:18:24] Finished 'fezinit' after 40 ms
[14:18:24] 创建 demo-medium 成功
[14:18:24] 创建 demo-medium/src 成功
[14:18:24] 创建 demo-medium/src/lib 成功
[14:18:24] 创建 demo-medium/src/static 成功
[14:18:24] 创建 demo-medium/src/static/fonts 成功
[14:18:24] 创建 demo-medium/src/static/images 成功
[14:18:24] 创建 demo-medium/src/static/styles 成功
[14:18:24] 创建 demo-medium/src/views 成功
[14:18:24] 创建 demo-medium/src/views/index 成功
[14:18:24] 创建 demo-medium/src/views/index/module 成功
[14:18:24] 创建 demo-medium/src/views/public 成功
[14:18:24] 创建 demo-medium/src/views/public/module 成功
[14:18:24] 创建 demo-medium/src/views/public/utils 成功
[14:18:24] 创建 demo-medium/gulpfile.babel.js 成功
[14:18:24] 创建 demo-medium/fez.config.js 成功
[14:18:24] 创建 demo-medium/package.json 成功
[14:18:24] 创建 demo-medium/shim.js 成功
[14:18:24] 创建 demo-medium/src/views/index/index.html 成功
[14:18:24] 创建 demo-medium/src/views/index/index.js 成功
[14:18:24] 创建 demo-medium/src/static/styles/index.less 成功

创建完成后目录结构如下：

➜  demo-medium git:(master) ✗ tree
.
├── fez.config.js
├── gulpfile.babel.js
├── package.json
├── shim.js
└── src
    ├── lib
    ├── static
    │   ├── fonts
    │   ├── images
    │   └── styles
    │       └── index.less
    └── views
        ├── index
        │   ├── index.html
        │   ├── index.js
        │   └── module
        └── public
            ├── module
            └── utils

2. 使用bower安装第三方框架库

  • 初始化bower.json
➜  demo-medium git:(master) ✗ bower init
? name demo-medium
? description FEZ进阶项目实战
? main file
? keywords
? authors furic <[email protected]>
? license MIT
? homepage https://github.com/furic-zhao/fez
? set currently installed components as dependencies? Yes
? would you like to mark this package as private which prevents it from being accidentally published to the registry? No
ly published to the registry? (y/N)
{
  name: 'demo-medium',
  description: 'FEZ进阶项目实战',
  main: '',
  authors: [
    'furic <[email protected]>'
  ],
  license: 'MIT',
  homepage: 'https://github.com/furic-zhao/fez',
  ignore: [
    '**/.*',
    'node_modules',
    'bower_components',
    'test',
    'tests'
  ]
}

? Looks good? Yes
  • 安装Jquery(v1.12.4版本)
➜  demo-medium git:(master) ✗ bower install jquery#2.2.4 --save
bower cached        https://github.com/jquery/jquery-dist.git#1.12.4
bower validate      1.12.4 against https://github.com/jquery/jquery-dist.git#1.12.4
bower install       jquery#1.12.4
bower no-json       No bower.json file to save to, use bower init to create one

jquery#1.12.4 bower_components/jquery
  • 安装bootstrap(v3.3.7)
➜  demo-medium git:(master) ✗ bower install bootstrap#3.3.7 --save
bower cached        https://github.com/twbs/bootstrap.git#3.3.7
bower validate      3.3.7 against https://github.com/twbs/bootstrap.git#3.3.7
bower install       bootstrap#3.3.7

bootstrap#3.3.7 bower_components/bootstrap
└── jquery#2.2.4
  • 安装剩余的框架库
bower install font-awesome#4.7.0 --save
bower install nprogress#0.2.0 --save
bower install pnotify#3.0.0 --save
bower install echarts#3.3.2 --save
bower install datatables.net#1.10.13 --save
bower install datatables.net-bs#1.10.13 --save
bower install datatables.net-responsive#2.1.1 --save
bower install datatables.net-responsive-bs#2.1.1 --save
bower install moment#2.17.1 --save
bower install datatables.net-fixedcolumns#3.2.2 --save
bower install datatables.net-fixedcolumns-bs#3.2.2 --save
bower install datatables.net-fixedheader#3.1.2 --save
bower install datatables.net-fixedheader-bs#3.1.2 --save

可以使用bower search [包名]、bower info [包名]搜索查看信息，然后安装指定的版本。使用bower安装的框架库都是从github下载，所以任何放在github上的第三方框架库都可以使用bower来管理。

安装完成后bower.json内容为：

{
  "name": "demo-medium",
  "description": "FEZ进阶项目实战",
  "main": "",
  "authors": [
    "furic <[email protected]>"
  ],
  "license": "MIT",
  "homepage": "https://github.com/furic-zhao/fez",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "jquery": "1.12.4",
    "bootstrap": "3.3.7",
    "font-awesome": "4.7.0",
    "nprogress": "0.2.0",
    "pnotify": "3.0.0",
    "echarts": "3.3.2",
    "datatables.net": "1.10.13",
    "datatables.net-bs": "1.10.13",
    "datatables.net-responsive": "2.1.1",
    "datatables.net-responsive-bs": "2.1.1",
    "moment": "2.17.1",
    "datatables.net-fixedcolumns": "3.2.2",
    "datatables.net-fixedcolumns-bs": "3.2.2",
    "datatables.net-fixedheader": "3.1.2",
    "datatables.net-fixedheader-bs": "3.1.2"
  }
}
  • 配置bower.json 
{
  "name": "demo-medium",
  "description": "FEZ进阶项目实战",
  "main": "",
  "authors": [
    "furic <[email protected]>"
  ],
  "license": "MIT",
  "homepage": "https://github.com/furic-zhao/fez",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "jquery": "1.12.4",
    "bootstrap": "3.3.7",
    "font-awesome": "4.7.0",
    "nprogress": "0.2.0",
    "pnotify": "3.0.0",
    "echarts": "3.3.2",
    "datatables.net": "1.10.13",
    "datatables.net-bs": "1.10.13",
    "datatables.net-responsive": "2.1.1",
    "datatables.net-responsive-bs": "2.1.1",
    "moment": "2.17.1",
    "datatables.net-fixedcolumns": "3.2.2",
    "datatables.net-fixedcolumns-bs": "3.2.2",
    "datatables.net-fixedheader": "3.1.2",
    "datatables.net-fixedheader-bs": "3.1.2"
  },
  "overrides": {
    "echarts": {
      "main": [
        "dist/echarts.js"
      ]
    },
    "bootstrap": {
      "main": [
        "dist/css/bootstrap.css",
        "dist/js/bootstrap.js",
        "./dist/fonts/**.*"
      ]
    },
    "font-awesome": {
      "main": [
        "css/font-awesome.css",
        "fonts/FontAwesome.otf",
        "fonts/fontawesome-webfont.eot",
        "fonts/fontawesome-webfont.svg",
        "fonts/fontawesome-webfont.ttf",
        "fonts/fontawesome-webfont.woff",
        "fonts/fontawesome-webfont.woff2"
      ]
    },
    "pnotify": {
      "main": [
        "dist/pnotify.js",
        "dist/pnotify.css"
      ]
    },
    "moment": {
      "main": [
        "moment.js",
        "locale/zh-cn.js"
      ]
    }
  }
}

执行gulp进入研发环境

dev目录结构为：

➜  dev git:(master) ✗ tree
.
├── bower_components
│   ├── bootstrap
│   │   └── dist
│   │       ├── css
│   │       │   └── bootstrap.css
│   │       ├── fonts
│   │       │   ├── glyphicons-halflings-regular.eot
│   │       │   ├── glyphicons-halflings-regular.svg
│   │       │   ├── glyphicons-halflings-regular.ttf
│   │       │   ├── glyphicons-halflings-regular.woff
│   │       │   └── glyphicons-halflings-regular.woff2
│   │       └── js
│   │           └── bootstrap.js
│   ├── datatables.net
│   │   └── js
│   │       └── jquery.dataTables.js
│   ├── datatables.net-bs
│   │   ├── css
│   │   │   └── dataTables.bootstrap.css
│   │   └── js
│   │       └── dataTables.bootstrap.js
│   ├── datatables.net-fixedcolumns
│   │   └── js
│   │       └── dataTables.fixedColumns.js
│   ├── datatables.net-fixedcolumns-bs
│   │   └── css
│   │       └── fixedColumns.bootstrap.css
│   ├── datatables.net-fixedheader
│   │   └── js
│   │       └── dataTables.fixedHeader.js
│   ├── datatables.net-fixedheader-bs
│   │   └── css
│   │       └── fixedHeader.bootstrap.css
│   ├── datatables.net-responsive
│   │   └── js
│   │       └── dataTables.responsive.js
│   ├── datatables.net-responsive-bs
│   │   ├── css
│   │   │   └── responsive.bootstrap.css
│   │   └── js
│   │       └── responsive.bootstrap.js
│   ├── echarts
│   │   └── dist
│   │       └── echarts.js
│   ├── font-awesome
│   │   ├── css
│   │   │   └── font-awesome.css
│   │   └── fonts
│   │       ├── FontAwesome.otf
│   │       ├── fontawesome-webfont.eot
│   │       ├── fontawesome-webfont.svg
│   │       ├── fontawesome-webfont.ttf
│   │       ├── fontawesome-webfont.woff
│   │       └── fontawesome-webfont.woff2
│   ├── jquery
│   │   └── dist
│   │       └── jquery.js
│   ├── moment
│   │   ├── locale
│   │   │   └── zh-cn.js
│   │   └── moment.js
│   ├── nprogress
│   │   ├── nprogress.css
│   │   └── nprogress.js
│   └── pnotify
│       └── dist
│           ├── pnotify.css
│           └── pnotify.js
├── index.html
├── static
│   ├── css
│   │   └── index.css
│   └── js
│       ├── index.js
│       └── index.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 dist'发布到上线目录

dist目录结构为：

➜  dist git:(master) ✗ tree
.
├── index.html
├── rev-manifest.json
└── static
    ├── css
    │   ├── index-593d9d76c4.css
    │   └── vendor-bd26ea1341.css
    ├── fonts
    │   ├── fontawesome-webfont-674f50d287.eot
    │   ├── fontawesome-webfont-912ec66d75.svg
    │   ├── fontawesome-webfont-af7ae505a9.woff2
    │   ├── fontawesome-webfont-b06871f281.ttf
    │   ├── fontawesome-webfont-fee66e712a.woff
    │   ├── glyphicons-halflings-regular-448c34a56d.woff2
    │   ├── glyphicons-halflings-regular-8988968814.svg
    │   ├── glyphicons-halflings-regular-e18bbf611f.ttf
    │   ├── glyphicons-halflings-regular-f4769f9bdb.eot
    │   ├── glyphicons-halflings-regular-fa2772327f.woff
    │   └── rev-manifest-bower.json
    └── js
        ├── index-f3d06ba2f6.js
        └── vendor-d6fe099cc2.js

发布上线所有使用bower安装的css和js都会被压缩、合并为vendor-*.css和vendor-*.js。

  • 上线自定义合并bower文件
//fez.config.js

export default {
  useInject: {
    bower: {
      js: [{
        target: "a-vendor-jquery-bootstrap.js",
        contain: ["**/jquery.js", "**/bootstrap.js"]
      }, {
        target: "vendor-dataTables.js",
        contain: ["**/jquery.dataTables.js", "**/dataTables.bootstrap.js", "**/dataTables.responsive.js", "**/responsive.bootstrap.js", "**/dataTables.fixedColumns.js", "**/dataTables.fixedHeader.js"]
      }, {
        target: "vendor-moment-echarts.js",
        contain: ["moment/**/moment.js", "moment/**/zh-cn.js", "**/echarts.js"]
      }],
      css: [{
        target: "vendor-bootstrap-font-dataTables-bt.css",
        contain: ["**/bootstrap.css", "**/font-awesome.css", "**/dataTables.bootstrap.css", "**/responsive.bootstrap.css", "**/fixedColumns.bootstrap.css", "**/fixedHeader.bootstrap.css"]
      }]
    }
  }
}

执行gulp dist上线：

dist目录结构：

➜  dist git:(master) ✗ tree
.
├── index.html
├── rev-manifest.json
└── static
    ├── css
    │   ├── index-593d9d76c4.css
    │   ├── vendor-5aa8e503f1.css
    │   └── vendor-bootstrap-font-dataTables-bt-6da6510273.css
    ├── fonts
    │   ├── fontawesome-webfont-674f50d287.eot
    │   ├── fontawesome-webfont-912ec66d75.svg
    │   ├── fontawesome-webfont-af7ae505a9.woff2
    │   ├── fontawesome-webfont-b06871f281.ttf
    │   ├── fontawesome-webfont-fee66e712a.woff
    │   ├── glyphicons-halflings-regular-448c34a56d.woff2
    │   ├── glyphicons-halflings-regular-8988968814.svg
    │   ├── glyphicons-halflings-regular-e18bbf611f.ttf
    │   ├── glyphicons-halflings-regular-f4769f9bdb.eot
    │   ├── glyphicons-halflings-regular-fa2772327f.woff
    │   └── rev-manifest-bower.json
    └── js
        ├── a-vendor-jquery-bootstrap-396f8ae872.js
        ├── index-f3d06ba2f6.js
        ├── vendor-08c87c2e1c.js
        ├── vendor-dataTables-9549597d6e.js
        └── vendor-moment-echarts-dd5a08b135.js

html页面内容：

<!DOCTYPE HTML>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <meta name="renderer" content="webkit">
  <meta name="apple-mobile-web-app-capable" content="no">
  <meta name="format-detection" content="telephone=no">
  <title>demo-medium</title>
  <meta name="keywords" content="">
  <meta name="description" content="">
  <link rel="stylesheet" href="static/css/vendor-bootstrap-font-dataTables-bt-6da6510273.css">
  <link rel="stylesheet" href="static/css/vendor-5aa8e503f1.css">
  <link rel="stylesheet" href="static/css/index-593d9d76c4.css">
</head>

<body>
  <h2>进阶项目Demo</h2>
  <script src="static/js/a-vendor-jquery-bootstrap-396f8ae872.js"></script>
  <script src="static/js/vendor-dataTables-9549597d6e.js"></script>
  <script src="static/js/vendor-moment-echarts-dd5a08b135.js"></script>
  <script src="static/js/vendor-08c87c2e1c.js"></script>
  <script src="static/js/index-f3d06ba2f6.js"></script>
</body>

</html>
Clone this wiki locally