From 149a281f0772b0bf4588168c33029177280c71da Mon Sep 17 00:00:00 2001 From: zhaohuijian Date: Thu, 16 Mar 2017 11:30:28 +0800 Subject: [PATCH] =?UTF-8?q?dist=E6=89=93=E5=8C=85=E9=97=AE=E9=A2=98?= =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=8F=8A=E8=AF=B4=E6=98=8E=E6=96=87=E4=BB=B6?= =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .fez/dist.js | 14 ++++++-------- .fezrc | 38 ++++++++++++++++++++++++++++++++++++-- README.md | 16 ++++++++++++++-- demo/.fezrc | 7 ++++--- package.json | 12 +++++++----- 5 files changed, 67 insertions(+), 20 deletions(-) diff --git a/.fez/dist.js b/.fez/dist.js index 68402d9..2dff393 100755 --- a/.fez/dist.js +++ b/.fez/dist.js @@ -587,9 +587,9 @@ export default (gulp, config) => { )) .pipe(flatten()) .pipe(gulp.dest(config.paths.tmp.css)) - // .on("end", () => { - // del.sync(['./tmp/bower']); - // }); + .on("end", () => { + del.sync(['./tmp/bower']); + }); } /** @@ -900,11 +900,9 @@ export default (gulp, config) => { bowerCustomJs, //合并自定义bower脚本文件 bowerVendorJs, //合并除却自定义以外的bower脚本文件 ), - gulp.series( - bowerCustomCss, //合并自定义bower样式文件 - bowerVendorCss //合并除却自定义以外的bower样式文件 - ) - ) + bowerCustomCss, //合并自定义bower样式文件 + ), + bowerVendorCss //合并除却自定义以外的bower样式文件 ), gulp.series( copyLibFiles, //复制lib公共脚本文件到缓存目录 diff --git a/.fezrc b/.fezrc index 5d2802a..ab7e13c 100755 --- a/.fezrc +++ b/.fezrc @@ -1,9 +1,15 @@ { /* ================================== - * @ 2017 FEZ 前端模块工程自动化构建工具 + * @ 2017 FEZ 前端模块化工程开发框架 * https://github.com/furic-zhao/fez * ================================== */ + /************************************************* + * 本文件是FEZ工程目录中的默认配置文件 + * 项目目录中的.fezrc文件中的配置会优先覆盖此文件中的配置 + * 项目目录中没有配置的项会使用此文件中的默认配置 + ************************************************/ + /** * 研发环境 browsersync配置信息 */ @@ -206,7 +212,35 @@ "options": { "extensions": [], // import require 引入文件时可以省略的扩展名 "paths": ["./src/views"] // import require 引入文件的根路径 - } + }, + /** + * 抽取来通过 import $ from 'jquery';或let $ = require('jquery'); + * 引入的公共文件不和业务逻辑文件打包到一起 + * 此处配置后需要通过script标签形式在页面引入 + * 具体信息请参考：https://github.com/thlorenz/browserify-shim + */ + "shim": [{ + "import": "$", + "from": "jquery" + }, { + "import": "Q", + "from": "q" + }, { + "import": "Vue", + "from": "vue" + }, { + "import": "PNotify", + "from": "pnotify" + }, { + "import": "echarts", + "from": "echarts" + }, { + "import": "Vuex", + "from": "vuex" + }, { + "import": "store", + "from": "store" + }] }, /** diff --git a/README.md b/README.md index caf7b2f..caa90a2 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,19 @@ ### 功能模块化 -[FEZ](http://fez.hestudy.com) 支持使用最新的[ES6 Module](http://es6.ruanyifeng.com/#docs/module)来组织前端代码，并支持使用ES6标准特性开发项目，通过编译完美运行在各种浏览器中。可以整合如[Vue](https://cn.vuejs.org/)等MVVM框架实现[单文件组件](https://cn.vuejs.org/v2/guide/single-file-components.html)形式的高效开发体验。 +[FEZ](http://fez.hestudy.com) 支持使用[ES6 Module](http://es6.ruanyifeng.com/#docs/module)来组织前端代码，并支持使用ES6标准特性开发项目，通过编译完美运行在各种浏览器中。可以整合如[Vue](https://cn.vuejs.org/)等MVVM框架实现[单文件组件](https://cn.vuejs.org/v2/guide/single-file-components.html)形式的高效开发体验。 + +#### Javascript 模块化历史 +- 上古时期 Module 设计模式 +- 石器时代 Script Loader 不仅需要封装，还需要加在 +- 蒸汽朋克 Module Loader 模块化架构的工业革命 +- 号角吹响 CommonJS 征服世界的第一步要跳出浏览器 +- 双塔奇兵 AMD/CMD 浏览器环境模块化方案 +- 精灵宝钻 Browserify/Webpack 大势所趋，去掉这层包裹！ +- 王者归来 ES6 Module 最后的战役 + +> 有关模块化的更多知识请参考：[https://www.zhihu.com/question/37011441](https://www.zhihu.com/question/37011441)[https://github.com/fouber/blog](https://github.com/fouber/blog) + ### 结构规范化 @@ -85,7 +97,7 @@ static - 自动化处理第三方库脚本、项目公共脚本、页面逻辑脚本并自动化注入到页面。 - 自动化搜索、下载、更新、管理开源库资源，根据配置并做自动化的资源合并。 - 自动化压缩JS、CSS、HTML、图片、字体等静态资源。 -- 自动化SVG转ICON图片、雪碧图合成、移动端@2x/@3X图片适配，并自动化生成对应样式。 +- 自动化SVG转ICON图标、雪碧图合成、移动端@2x/@3X图片适配，并自动化生成对应样式。 - 自动化转换所有CSS样式中的PX单位为REM单位。 - 自动化转换所有图片为WebP格式并生成对应样式文件。 - 自动化注入WebP浏览器支持检测脚本并替换所有的WebP文件。 diff --git a/demo/.fezrc b/demo/.fezrc index 80d9fff..6c29731 100755 --- a/demo/.fezrc +++ b/demo/.fezrc @@ -22,9 +22,10 @@ "paths": ["./src/views"] // import require 引入文件的根路径 }, /** - * 抽取来自NPM中的公共文件不做打包 - * import $ from 'jquery'; - * let $ = require('jquery'); + * 抽取来通过 import $ from 'jquery';或let $ = require('jquery'); + * 引入的公共文件不和业务逻辑文件打包到一起 + * 此处配置后需要通过script标签形式在页面引入 + * 具体信息请参考：https://github.com/thlorenz/browserify-shim */ "shim": [{ "import": "$", diff --git a/package.json b/package.json index 944013e..048f8b2 100644 --- a/package.json +++ b/package.json @@ -1,16 +1,18 @@ { "name": "FEZ", "version": "3.1.0", - "description": "基于gulp的前端工作流", + "description": "FEZ是面向前端模块化工程的开发框架。主要为解决前端开发多人高效协作、提高开发质量、及项目功能扩展的快速迭代和可维护性等问题。核心包括功能模块化、结构规范化、及开发自动化。", "repository": { "type": "git", "url": "https://github.com/furic-zhao/fez" }, "keywords": [ - "前端工程", - "模块化", - "异步编程", - "ES6语法" + "FEZ", + "前端模块化", + "前端工程自动化", + "前端异步编程", + "前端自动化测试", + "前端自动化部署" ], "license": "MIT", "readmeFilename": "README.md",