我刚刚将我的MBP更新到OSX 10.8并尝试使用brunch.io开始一个新项目,默认情况下使用coffeescript,我更喜欢使用javascript,所以我需要克隆简单的js骨架.所以像这样:
brunch new <someprojectname> --skeleton https://github.com/brunch/simple-js-skeleton.git
这是我之前使用过的,它运行良好.但今天我收到以下错误:
error: Git clone error: /bin/sh: git: command not found
我真的不知道如何解决这个问题......
我正在尝试将jquery添加到Phoenix项目中.
当我在头标记的app.html.eex中链接到jquery,如下所示:
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
...有用.
但是,我不想要Web依赖.我想在应用程序中使用jquery.
我已将jquery.min.js复制到web/static/js目录.并在app.html.eex中引用它,如下所示:
<script src="<%= static_path(@conn, "/js/jquery.min.js") %>"></script>
它不起作用.
将jquery.min.js复制到app.js也不起作用.
有趣的是,当我直接在app.html.eex中将脚本标记放在JS之间时,它可以工作.
只有来自云的直接链接和/或将JS放在app.html.eex中的脚本标记之间才能正常工作？
更新:
早午餐正在将JS复制到priv目录中的app.js. 但是应用程序似乎无法访问它.
我究竟做错了什么.
更新: 对于任何有兴趣使用早午餐与AngularJS的人,我已经组建了一个种子项目角 - 早午餐种子
我正在使用Brunch和AngularJS.AngularJS提供了一个模块系统,因此使用commonJS/AMD导入文件的需求是多余的.是否可以为目录中的文件禁用此功能/app？从本质上讲,我希望它能像/vendor目录一样不加改变地编译文件.
所以首选的是:
joinTo:
'js/app.js': /^app/
'js/vendor.js': /^vendor/
使用js/app.js和js/vender.js包含每个相应文件夹的编译文件,但都不包装.
有没有人有任何想法？
更新 语法已从@jcruz回答时更改.现在就是这样做的方法.
最后,我使用了@jcruz答案的修改版本.
exports.config =
modules:
definition: false
wrapper: (path, data) ->
"""
(function() {
'use strict';
#{data}
}).call(this);\n\n
"""
files:
javascripts:
defaultExtension: 'coffee'
joinTo:
'js/app.js': /^app/
'js/vendor.js': /^vendor/
默认情况下,"原始"包装器不包含coffeescript的标准包装器.通过将jsWrapper设置为:
wrapper: (path, data) ->
"""
(function() {
'use strict';
#{data}
}).call(this);
"""
文件将按预期包装.
我正在构建一个混合Web应用程序,后端是Django,前端是Backbone.
结构如下:我在Django模板中生成所有HTML,用于request.is_ajax决定返回哪些模板,并根据需要使用Backbone拉入HTML(我这样做是因为我想支持非JavaScript用户).
无论如何,我的问题是这个.随着我的JavaScript代码变得越来越复杂,我希望能够自动执行以下操作:
我不太担心图像优化或包管理.这有可能与我有的设置？目前它是标准的Django应用程序:
/media
/js
main.js <-- Backbone code is in here
/plugins
backbone.js
underscore.js
/css
main.css
results.css
/img
/myapp
admin.py
models.py
views.py
/templates
/myapp
index.html <-- references to all JS and CSS files here
我不确定我是否应该使用Yeoman(或只是咕噜声)或早午餐,或者是否有更简单的方法.无论我使用什么,我不确定是否可以将其放入js目录,或者模板的位置是否会使事情变得复杂.
目前我知道如何使用require.js异步加载JS,但我不知道如何连接,lint等 - 因此寻找一个工具.也许我应该写一个shell脚本:)
我想包含Bootstrap 3.0的字形文件(aka,glyphicons-halflings-regular.woff,.ttf,.svg).Bower成功地将它们拉下来,我已将它们添加到我的应用程序中bower.json文件的"覆盖"部分:
"bootstrap": {
"main": [
"dist/js/bootstrap.js",
"dist/css/bootstrap.css",
"dist/fonts/glyphicons-halflings-regular.woff",
"dist/fonts/glyphicons-halflings-regular.ttf",
"dist/fonts/glyphicons-halflings-regular.svg"
],
但据我所知,这没有任何效果.我可能需要强制更新bower,因为我没有对Bootstrap进行版本更新,因为我添加了对字体文件的引用.除此之外,我对如何让Brunch将这些文件放入./public/fonts目录感到茫然.
我们希望在多个项目中使用相同的构建系统.我有一个工作早午餐配置文件,我想放在一个git子模块中,以便可以在多个项目中引用该子模块,并且更改很容易传播(比复制和粘贴更不易碎,并设置brunch-config.js的权威来源) .
将brunch-config.js放在git子模块中会导致我的文件夹结构如下所示:
WebApp // git root
|---Brunch-Build-System // git submodule
| |---brunch-config.js
|---node_modules
|---source // all the source code I want compiled
早午餐运行假设brunch-config.js将与正在编译的源相同或更高.在此设置中,情况并非如此.我已经尝试修改我的brunch-config.js使用相对路径无济于事.这是我files目前的Brunch配置块,没有任何相对路径尝试:
files: {
javascripts: {
joinTo: {
'js/lib.js': /^(?!source\/)/
},
entryPoints: {
'source/scripts/app.jsx': {
'js/app.js': /^source\//
},
}
},
stylesheets: {joinTo: 'css/core.css'}
}
如果上面给出了所需的文件夹结构,我如何修改它以使用相对路径？这甚至可能吗？
我们的HTML中包含Google Analytics和Azure Application Insights分析脚本,包括Google Analytics.他们在<script>标签中<head>.当我们使用Browsersync观看时,它们会导致错误,特别是浏览器同步早午餐,因为我们使用早午餐作为我们的构建系统.但是,在观看时,此错误会两次打印到控制台(有趣的是,我们有两个分析标记):
XMLHttpRequest无法加载http:// localhost:3000/browser-sync/socket.io /？EIO = 3&transport = polling&t = 1494358571902-4&sid = rhGMlOFa_MbRrYbLAAAD.预检响应中的Access-Control-Allow-Headers不允许请求标头字段x-ms-request-id.
并且每隔几秒重复设置此错误:
选项http:// localhost:3000/browser-sync/socket.io /？EIO = 3&transport = polling&t = 1494358572782-5 400(错误请求)
选项http:// localhost:3000/browser-sync/socket.io /？EIO = 3&transport = polling&t = 1494358572782-5 400(错误请求)
XMLHttpRequest无法加载http:// localhost:3000/browser-sync/socket.io /？EIO = 3&transport = polling&t = 1494358572782-5.预检的响应具有无效的HTTP状态代码400
我相当肯定这些分析脚本会导致问题,因为使用uBlock Origin阻止它们会使它工作得很好.
我想知道在注入Browsersync标签之前是否与这些脚本标签有关(紧接在<body>标签内部,请参阅文档).但将它们移动到<body>标记的末尾并没有解决问题.
造成这种情况的原因是什么？如何减轻这种影响？
在Brunch.io生成的应用程序中,我们如何运行测试？我想通过命令行运行它们.
例如,todos应用程序具有非常详尽的测试覆盖率.但它的Cakefile是空的.当我进行'蛋糕测试'时,它什么也没做.有人可以指出我在正确的方向上运行测试所需的设置工作(在命令行或浏览器上)？
在使用Brunch时控制脚本/样式表连接顺序的最佳实践是什么？
我的问题的一个简单版本涉及使用Twitter Bootstrap的应用程序,它需要jQuery.Bootstrap要求首先加载jQuery.
最初我在我的供应商/目录中有以下内容:
jquery-1.9.1.min.js和bootstrap.min.js
这是按字母顺序将Brunch连接到我的vendor.js文件中,即首先是bootstrap.
为了解决这个问题,我在每个脚本的开头添加了一个数字,以指定我希望它们连接的顺序 - 1-jquery-1.9.1.min.js和2-bootstrap.min.js
我无法找到有关如何更优雅地做到这一点的信息,但我无法想象这是实现这一目标的最佳方式.谢谢你的帮助!
My Brunch模板将我的所有代码编译成app.js所有第三方依赖项vendor.js(一种非常标准的方法).我想用CSS做同样的事情它曾经工作,但当我转向使用Bower时,一些东西停止工作,我现在得到以下错误:
错误:无法加载config /path-to-root/config.coffee.SyntaxError:unexpected {at Object.exports.loadConfig(/usr/local/share/npm/lib/node_modules/brunch/lib/helpers.js:448:15)
从配置文件(config.cofee)看起来像这样:
files:
javascripts:
joinTo:
'javascripts/app.js': /^app/
'javascripts/vendor.js': /^(bower_components|vendor)/
'test/javascripts/test-vendor.js': /^test(\/|\\)(?=vendor)/
stylesheets:
joinTo:
'stylesheets/app.css': /^app/
'stylesheets/vendor.css': /^(bower_components|vendor)/
如果我只是去掉样式表的两行并将这一行放在它的位置它可以正常工作:
'stylesheets/vendor.css':/ ^(app | bower_components | vendor)/
我一直与此生活在一起,但这导致了越来越多的问题,我想让它排序.任何帮助将不胜感激.
如果问题出现......我正在使用的早午餐版本是1.7.6.
brunch ×10
javascript ×5
coffeescript ×2
analytics ×1
angularjs ×1
browser-sync ×1
django ×1
elixir ×1
git ×1
github ×1
gruntjs ×1
jquery ×1
unit-testing ×1
yeoman ×1