holyzfy / febu Goto Github PK
View Code? Open in Web Editor NEW前端构建工具
前端构建工具
gulp test
叫test
不太合适,有点运行测试的意思,看看还有其他合适的名字没
gulp release
sequenceDiagram
participant 远程仓库
participant src
participant build
participant development
opt 未初始化
远程仓库->>src: git clone
end
远程仓库->>src: git pull
src->>src: git.checkout
src->>development: 复制静态资源
opt is AMD
src->>build: js: optimize
build->>development: 复制js
end
src->>development: VM: 替换静态资源链接
development->>development: 后处理
sequenceDiagram
participant 远程仓库
participant src
participant build
participant production
opt 未初始化
远程仓库->>src: git clone
end
远程仓库->>src: git pull
src->>src: git.checkout
src->>production: 除js、css的静态资源:打版本
src->>build: css: 替换静态资源内链
build->>production: 压缩,打版本
alt AMD
src->>build: js: optimize
build->>production: 打版本
src->>build: config.js: 替换paths值
build->>production: 压缩,打版本
else 非AMD
src->production: js: 压缩,打版本
end
src->>production: VM: 收集静态资源链接信息
Note right of production: [{src, dest, rel}, ...]
src->>production: VM: 替换静态资源内链
production->>production: 后处理
参数 --dist
:构建结果生成到指定的路径下
约定/
表示项目根目录
期望/
开头的静态资源路径也能正常被处理,例如:
<img src="/images/logo.png">
.logo {
background-image: url(/images/logo.png);
}
``
用babel编译jsnext
目录的代码到js
目录
{
"jsnext": {
"src": "jsnext",
"output": "js",
"ignore": ["js/lib", "js/config.js"]
}
}
构建后,static/js
文件夹中只有一个 config.js
,其他的 js
文件都没有。检查 config.js
发现,所有的 js
模块都没有被注入。如下:
var require = {
"waitSeconds": 0,
"paths": {
"jquery": "lib/jquery",
"jquery.validate": "lib/jquery.validate",
"jquery.pagination": "lib/jquery.pagination",
"jquery.dirtyforms": "lib/jquery.dirtyforms",
"moment": "lib/moment",
"webuploader": "lib/webuploader",
"_pikaday": "lib/pikaday",
"_pikaday_datetime": "lib/pikaday_datetime",
"text": "lib/text",
"url": "lib/url",
"templates": "../templates",
"echarts": "lib/echarts.min",
"macarons": "lib/macarons"
},
"shim": {
"url": {
"exports": "url"
},
"_pikaday": [
"moment"
],
"_pikaday_datetime": [
"moment"
],
"jquery.validate": [
"jquery"
],
"jquery.pagination": [
"jquery"
],
"jquery.dirtyforms": [
"jquery"
],
"lib/select2": [
"jquery"
]
}
};
正常的构建之后的 config.js
里面是下面这样的:
var require = {
"waitSeconds": 0,
"paths": {
"jquery": "/odin/static/js/lib/jquery",
"jquery.validate": "/odin/static/js/lib/jquery.validate",
"jquery.pagination": "/odin/static/js/lib/jquery.pagination",
"jquery.dirtyforms": "/odin/static/js/lib/jquery.dirtyforms",
"moment": "/odin/static/js/lib/moment",
"webuploader": "/odin/static/js/lib/webuploader",
"_pikaday": "/odin/static/js/lib/pikaday",
"_pikaday_datetime": "/odin/static/js/lib/pikaday_datetime",
"text": "/odin/static/js/lib/text",
"url": "/odin/static/js/lib/url",
"templates": "../templates",
"echarts": "/odin/static/js/lib/echarts.min",
"macarons": "/odin/static/js/lib/macarons",
"api_common_basic": "/odin/static/js/api_common_basic",
"api_common_interface": "/odin/static/js/api_common_interface",
"api_common_manage": "/odin/static/js/api_common_manage",
"api_common_map": "/odin/static/js/api_common_map",
"api_common_params": "/odin/static/js/api_common_params",
"api_common_result": "/odin/static/js/api_common_result",
"api_complex_basic": "/odin/static/js/api_complex_basic",
"api_complex_manage": "/odin/static/js/api_complex_manage",
"api_complex_params": "/odin/static/js/api_complex_params",
"api_complex_poll": "/odin/static/js/api_complex_poll",
"api_document": "/odin/static/js/api_document",
"api_group_manage": "/odin/static/js/api_group_manage",
"api_params_manage": "/odin/static/js/api_params_manage",
"aside": "/odin/static/js/aside",
"basic_variable_config": "/odin/static/js/basic_variable_config",
"basic_variable_group": "/odin/static/js/basic_variable_group",
"basic_variable_manage": "/odin/static/js/basic_variable_manage",
"call_log": "/odin/static/js/call_log",
"call_params_config": "/odin/static/js/call_params_config",
"client_opened_products": "/odin/static/js/client_opened_products",
"client_statistics": "/odin/static/js/client_statistics",
"common": "/odin/static/js/common",
"common_interface_choose": "/odin/static/js/common_interface_choose",
"complex_release_manage": "/odin/static/js/complex_release_manage",
"config": "/odin/static/js/config",
"cost_detail": "/odin/static/js/cost_detail",
"cost_statistics": "/odin/static/js/cost_statistics",
"data_call_statistics": "/odin/static/js/data_call_statistics",
"datasource_alarm": "/odin/static/js/datasource_alarm",
"datasource_basic": "/odin/static/js/datasource_basic",
"datasource_code": "/odin/static/js/datasource_code",
"datasource_interface_manage": "/odin/static/js/datasource_interface_manage",
"datasource_params": "/odin/static/js/datasource_params",
"datasource_price_manage": "/odin/static/js/datasource_price_manage",
"datasource_warn": "/odin/static/js/datasource_warn",
"dialog": "/odin/static/js/dialog",
"entry_manage": "/odin/static/js/entry_manage",
"interface_choose": "/odin/static/js/interface_choose",
"interface_monitor": "/odin/static/js/interface_monitor",
"interface_price": "/odin/static/js/interface_price",
"interface_router": "/odin/static/js/interface_router",
"invoke_batch": "/odin/static/js/invoke_batch",
"invoke_batch_done": "/odin/static/js/invoke_batch_done",
"invoke_batch_ing": "/odin/static/js/invoke_batch_ing",
"invoke_once": "/odin/static/js/invoke_once",
"invoke_result": "/odin/static/js/invoke_result",
"login": "/odin/static/js/login",
"module_add": "/odin/static/js/module_add",
"module_manage": "/odin/static/js/module_manage",
"notice_record": "/odin/static/js/notice_record",
"opened_details": "/odin/static/js/opened_details",
"operate_log": "/odin/static/js/operate_log",
"params_apply_detail": "/odin/static/js/params_apply_detail",
"pay_record": "/odin/static/js/pay_record",
"pay_record_all": "/odin/static/js/pay_record_all",
"pikaday": "/odin/static/js/pikaday",
"pikaday_datetime": "/odin/static/js/pikaday_datetime",
"price_abnormal_notice": "/odin/static/js/price_abnormal_notice",
"product_price_manage": "/odin/static/js/product_price_manage",
"profit_statistics": "/odin/static/js/profit_statistics",
"report_add": "/odin/static/js/report_add",
"report_choose": "/odin/static/js/report_choose",
"report_detail": "/odin/static/js/report_detail",
"report_manage": "/odin/static/js/report_manage",
"report_price": "/odin/static/js/report_price",
"report_router": "/odin/static/js/report_router",
"router_strategy": "/odin/static/js/router_strategy",
"router_strategy_add": "/odin/static/js/router_strategy_add",
"router_strategy_update": "/odin/static/js/router_strategy_update",
"save_table_manage": "/odin/static/js/save_table_manage",
"template": "/odin/static/js/template",
"test_cost_statistics": "/odin/static/js/test_cost_statistics",
"timeout": "/odin/static/js/timeout",
"urlmap": "/odin/static/js/urlmap",
"validate": "/odin/static/js/validate",
"validate_idcard": "/odin/static/js/validate_idcard",
"vendor_info": "/odin/static/js/vendor_info",
"vendor_info_add": "/odin/static/js/vendor_info_add",
"vendor_info_modify": "/odin/static/js/vendor_info_modify",
"vendor_log": "/odin/static/js/vendor_log",
"vendor_manage": "/odin/static/js/vendor_manage",
"vendor_monitor": "/odin/static/js/vendor_monitor",
"vendor_param_manager": "/odin/static/js/vendor_param_manager",
"vendorface_index": "/odin/static/js/vendorface_index",
"vendorface_index_compare": "/odin/static/js/vendorface_index_compare",
"vendorface_info": "/odin/static/js/vendorface_info",
"verd_document_manage": "/odin/static/js/verd_document_manage",
"warn_api": "/odin/static/js/warn_api",
"warn_notice": "/odin/static/js/warn_notice",
"warn_source": "/odin/static/js/warn_source",
"api_common/manage": "/odin/static/js/api_common/manage",
"api_common/params": "/odin/static/js/api_common/params",
"lib/accounting": "/odin/static/js/lib/accounting",
"lib/arttemplate": "/odin/static/js/lib/arttemplate",
"lib/echarts.min": "/odin/static/js/lib/echarts.min",
"lib/jquery.dirtyforms": "/odin/static/js/lib/jquery.dirtyforms",
"lib/jquery": "/odin/static/js/lib/jquery",
"lib/jquery.pagination": "/odin/static/js/lib/jquery.pagination",
"lib/jquery.validate": "/odin/static/js/lib/jquery.validate",
"lib/macarons": "/odin/static/js/lib/macarons",
"lib/moment": "/odin/static/js/lib/moment",
"lib/pikaday": "/odin/static/js/lib/pikaday",
"lib/pikaday_datetime": "/odin/static/js/lib/pikaday_datetime",
"lib/require": "/odin/static/js/lib/require",
"lib/select2": "/odin/static/js/lib/select2",
"lib/text": "/odin/static/js/lib/text",
"lib/url": "/odin/static/js/lib/url",
"lib/webuploader": "/odin/static/js/lib/webuploader"
},
"shim": {
"url": {
"exports": "url"
},
"_pikaday": [
"moment"
],
"_pikaday_datetime": [
"moment"
],
"jquery.validate": [
"jquery"
],
"jquery.pagination": [
"jquery"
],
"jquery.dirtyforms": [
"jquery"
],
"lib/select2": [
"jquery"
]
}
};
构建时每次都需要请求git获取最新代码,在网速较慢的情况下,每次构建获取前获取git代码都要花费比较多的时间,可否增加直接指定本地文件夹进行构建的特性?
modules值里的name字段
requirejs或者requre调用的第一个参数
<script>
requirejs(['path/to/module1', 'module2']);
</script>
data-main
<script data-main="scripts/main" src="scripts/require.js"></script>
网站 title 上面的 favicon 图标,文件后缀为 .ico
,下面这种方式加入的:
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
构建后,发现 href
后面的链接没有添加静态资源前缀,导致引入失败,图标显示不了。
在获取静态资源类型的函数 util.getStaticFileType
中加入 ico
的类型。
util.js
util.getStaticFileType = () => {
var list = [
'css',
'js',
'jpg', 'jpeg', 'png', 'gif', 'webp', 'ico',
'mp3', 'aac', 'mpeg', 'flv', 'f4v', 'swf', 'ogg', 'mp4', 'm4v', 'webm', 'wav', 'ogv', 'mov', 'm3u8',
'ttf', 'otf', 'eot', 'woff', 'woff2', 'svg',
'vml', 'htc'
];
return list.map(item => '**/*.' + item);
};
构建后,静态资源前缀添加上了,图标能够正常显示。
不知道这样解决这个问题是否合理???
projects
项目配置document字段:
repo
仓库地址test
测试环境
async
同步到约定的目录web
静态资源url根路径product
正式环境
async
web
静态资源url根路径resources
静态资源文件document字段:
repo
仓库地址src
原始路径(相对于仓库根目录),格式[path1, path2]
dest
线上路径rel
被哪个文件引用了npm uninstall -g gulp
git pull && npm install
如果提示类似这样的错误,请按说明删掉相应的文件后重试
/usr/local/bin/gulp -> /usr/local/lib/node_modules/gulp-cli/bin/gulp.js
npm ERR! Darwin 14.5.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "-g" "gulp-cli"
npm ERR! node v6.2.2
npm ERR! npm v3.9.5
npm ERR! path /usr/local/share/man/man1/gulp.1
npm ERR! code EEXIST
npm ERR! Refusing to delete /usr/local/share/man/man1/gulp.1: ../../../lib/node_modules/gulp/gulp.1 symlink target is not controlled by npm /usr/local
npm ERR! File exists: /usr/local/share/man/man1/gulp.1
npm ERR! Move it away, and try again.
安装完依赖之后,在 febu 目录下 运行 gulp 构建命令,如:
gulp development --repo http://gitlab.tcredit.com/f2e/api.git --publicPath /static/
会报出以下的错误:
can't read property 'apply' of undefined
解决办法是在全局安装了 gulp 之后,再运行以下命令:
sudo npm i gulp-cli -g
这样问题就解决了。
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.