phoenix中使用静态资源
来源:互联网 发布:淘宝代付不能用花呗吗 编辑:程序博客网 时间:2024/05/18 00:53
以前用过rails开发web应用,可以直接将静态资源复制到指定文件夹即可,最近学习phoenix,通过研究其目录结构,发现在其项目中包含 /web/static/assets文件夹,猜测可以将静态文件直接复制到此文件夹中便可访问,但经测试发现行不通,于是查阅其官方的文档,phoenix与rails不同,需要安装Brunch插件来实现对静态资源的管理与引入,对于第三方的js库可以放到/web/static/vender文件夹中,或是通过配置/package.json文件的devDependencies项进行引用:
对于node-module包含特殊字符时,可以将node-module名称包含在引号中,如:
{ "repository": {}, "license": "MIT", "scripts": { "deploy": "brunch build --production", "watch": "brunch watch --stdin" }, "dependencies": { "phoenix": "file:deps/phoenix", "phoenix_html": "file:deps/phoenix_html" }, "devDependencies": { "babel-brunch": "~6.0.0", "brunch": "2.7.4", "clean-css-brunch": "~2.0.0", "css-brunch": "~2.0.0", "bootstrap": "3.3.6", "admin-lte": "~2.3.8", "javascript-brunch": "~2.0.0", "uglify-js-brunch": "~2.0.1", "jquery": ">= 2.1" }}
配置完成后,执行npm install安装所添加的JS库,但对第三方库如何在页面中调用却一直看不太明白,官方文档说是需要修改Brunch的配置文件 brunch-config.js来实现,
npm: {globals: { $: 'jquery', jQuery: 'jquery' }},
以上是配置js以上是配置css样式npm: {styles: {
bootstrap: ['dist/css/bootstrap.min.css']
}},
配置css样式时,在styles节中,“:”前是指node-module的名称,后面为需要引入的文件列表,以bootstrap为例,如果需要引入单个文件时,按下面方法设置:
bootstrap: ['dist/css/bootstrap.min.css']当需要引入多个css文件时,按下面方法设置:
bootstrap: ['dist/css/bootstrap.css', 'dist/css/bootstrap.min.css']
对于node-module包含特殊字符时,可以将node-module名称包含在引号中,如:
"admin-lte": ['dist/css/AdminLTE.min.css','dist/css/skins/skin-blue-light.min.css']
以下是完整的brunch-config.js文件:
exports.config = { // See http://brunch.io/#documentation for docs. files: { javascripts: { joinTo: "js/app.js" // To use a separate vendor.js bundle, specify two files path // http://brunch.io/docs/config#-files- // joinTo: { // "js/app.js": /^(web\/static\/js)/, // "js/vendor.js": /^(web\/static\/vendor)|(deps)/, // "js/bootstrap.js": /^(web\/static\/static\/vendor\/js)/ // }, // // To change the order of concatenation of files, explicitly mention here // order: { // before: [ // // "web/static/vendor/js/jquery-2.1.1.js", // "web/static/vendor/js/bootstrap.min.js" // ] // } }, stylesheets: { joinTo: "css/app.css", order: { after: ["web/static/css/app.css"] // concat app.css last } }, templates: { joinTo: "js/app.js" } }, conventions: { // This option sets where we should place non-css and non-js assets in. // By default, we set this to "/web/static/assets". Files in this directory // will be copied to `paths.public`, which is "priv/static" by default. assets: /^(web\/static\/assets)/ }, // Phoenix paths configuration paths: { // Dependencies and current project directories to watch watched: [ "web/static", "test/static" ], // Where to compile files to public: "priv/static" }, // Configure your plugins plugins: { babel: { // Do not use ES6 compiler in vendor code ignore: [/web\/static\/vendor/] } }, modules: { autoRequire: { "js/app.js": ["web/static/js/app"] } }, npm: { enabled: true, globals: { $: 'jquery', jQuery: 'jquery', bootstrap: 'bootstrap', adminlte: 'admin-lte' }, styles: { bootstrap: ['dist/css/bootstrap.min.css'], "admin-lte": ['dist/css/AdminLTE.min.css','dist/css/skins/skin-blue-light.min.css'] } }};
0 0
- phoenix中使用静态资源
- phoenix使用
- Phoenix资源列表
- 使用wxWidgets从资源文件中静态装载图像
- 如何在静态库中使用XIB等资源
- vc中如何使用静态库的资源
- Spring MVC中使用resources标签映射静态资源
- 数据分析中使用的phoenix 版本建议
- SpringMVC中静态资源访问
- 使用cwRsync同步静态资源
- Spring MVC 使用 静态资源
- Spring Boot 使用静态资源
- Phoenix使用记录-1
- phoenix客户端API使用
- Phoenix使用总结
- Phoenix+HBase使用心得
- Phoenix+HBase使用心得
- Apache Phoenix使用
- 仿微信摇一摇实现摇动开始与结束监听
- Android自定义动画类——实现3D旋转动画
- Python中操作mongo数据库
- Android Service介绍(Service与线程关系)
- iOS多线程编程之Grand Central Dispatch(GCD)介绍和使用
- phoenix中使用静态资源
- 一进入页面,默认选中table的第一个tr
- 神经网络(三)
- core data的primitive属性和transient属性
- 利用gulp之gulp-rev-collector给资源文件加时间戳,解决缓存版本控制
- Mac Os, Android Studio 升级提示:Android Studio does not have write access to /Applications/Android Studi
- iOS布局
- android自定义广播_无序广播
- XMind 8优惠惊爆价,就在双十二!