问题标签 [web-frontend]

我正在为一个网站编写一个makefile。

我有一个名为src/andbuild/

基本上，我想获取这样的文件：

并将它们复制到这样的build/目录中：

我尝试编写规则，但我不确定如何调试：

我有一个 Web 应用程序，我正在使用 Grunt 开发和管理其前端资产。这是其组织的粗略概念：

所以我运行 grunt watch 来跟踪我的文件，然后使用 grunt-copy 将生成的文件复制到服务器提供的 dist/DATE 文件夹中。喜欢：

FrontendApplication/FrontendApplication/Assets/2014-06

在这个文件夹里面是最终的静态文件，像这样：

现在，我们有不同的客户使用相同的代码库，但前端资产略有不同，例如徽标图像和一些新的 css 来覆盖默认的 css，例如 companysname.css。因此，我们正在考虑将应用程序的定制版本发布到客户的不同文件夹中，例如：

FrontendApplication/FrontendApplication/Assets/CLIENTNAME

我的上级提供了一个 app.conf，内容如下：

他说我们应该让 Grunt 读取这个文件，然后确定要发布到哪个文件夹。即如果定义了client1，我们将自定义资产发布到client1/ 文件夹。否则，我们将采用默认值 2014-06/。服务器将在适用的情况下查找 client1/ 文件夹，如果找不到，它将指向默认的 2014-06/ 文件夹以显示静态资产。

所以这是我的问题：

1. Grunt 是否可以从位于目录中的文件中读取和提取信息，然后将它们作为参数传递给配置文件以供其他任务使用？你打算怎么做？
2. 如果可能的话，我如何根据客户端维护不同版本的前端资产？

在我看来，这是可以做的：

首先，在 Git branch master下，在 gruntfile 中设置一个指向目标文件夹的变量，例如：

并且，在客户端分支下，比如client1，让变量指向一个单独的目标文件夹。当然，在这个分支下，scss 文件和图像以及脚本可能会有所不同：

这样，Git 将处理目的地。如果在 master 分支下，我们将发布到 2014-06/，而当我们在 client 分支上时，我们将切换到 client1/。等等。所以 Grunt 会以某种方式读取上面提到的 app.conf，检索目标文件夹的值，然后在那里发布。

当然，我看到的一个问题是我需要切换分支才能访问文件，而且我可能需要切换分支才能将 2014-06/ 和 client1/ 都推送到服务器。当我们有一个新的主要版本时，我们将更改 app.conf，Grunt 将推送到 2015-01/，而不是在一个新的分支/标签下。

以上是我根据上级的要求提出的一个非常粗略和模糊的解决方案。但坦率地说，他和我都对 Grunt 不够熟悉，不知道如何完成上述工作，而且我个人以前从未使用过版本控制前端资产（更不用说自动化流程了），这就是我发布这篇文章的原因。

任何建议将不胜感激，在此先感谢。

我正在尝试减少我正在处理的项目的页面加载时间。起初，我正在与之合作的团队尝试优化 Apache/Symfony2/Postge，但最后在 Chrome 的开发工具的网络面板中，我在加载所有 css 和 js 文件后发现了一个很大的“差距”。删除脚本文件后，“间隙”消失了。如果我只留下 jquery.min.js（没有加载其他库或脚本）页面仍然加载 aprox。1.5 秒。

开发人员工具没有说明在此期间会发生什么。我认为这可能是浏览器解析和解释 CSS 和 JS 但我需要减少 DOMContentLoaded 时间。有什么建议么？

这是我的第一篇文章，我需要 10 个声望来发布图片，所以我上传了我在这里谈论的截图：

http://tinypic.com/m/imqw0n/1

PS：屏幕截图是在“普通”PC上拍摄的。在我的个人笔记本电脑（AsusG750JZ，8 核 CPU，16Gb RAM，nVIDA 880m）上进行的相同测试显示了截然不同的结果——加载时间约为 1.5 秒而不是 5.2 秒。不幸的是，我不能让每个人都在高端使用网络应用程序；）

PS2： JS 的异步加载不是一个选项。我试过 RequireJS 但我不喜欢结果。由于所有脚本依赖性，它很笨拙。

我的任务是实现 URL 的预览，这意味着它将像 facebook 一样显示徽标和标语。

我知道我们在 jQuery 中有 urLive 库，但我必须在 angularjs 中实现。我尝试过以下代码，但它不起作用。

我们在 angularjs 中有这样的东西吗？

有没有办法使用过滤器或SVG中的任何方法将图案和渐变一起应用于元素？

我不想创建一个重复的元素（任何形状）来实现这一点。它的维护开销。

下图是我预期输出的示例。

我不想复制填充渐变和图案的元素。上面的代码有重复的元素。

我试图让这些云在网页上移动并移出它，但云不断移动到新的行。这是网站：http ://therealrohanm.me/Falcon-Hacks-Website/ （云需要几秒钟才能显示）

这是代码：https ://github.com/Meeshbhoombah/Falcon-Hacks-Website

我怎样才能让他们不移动到新行？还有，我怎样才能把云降下来？

我正在尝试在此网页上创建视差效果：http: //therealrohanm.me/Falcon-Hacks-Website/

在此处查看代码：https ://github.com/Meeshbhoombah/Falcon-Hacks-Website/tree/gh-pages

我遇到了一些问题，第一个是橙色山脉（如图所示：https ://github.com/Meeshbhoombah/Falcon-Hacks-Website/blob/gh-pages/images/parallax-1.png ）是不显示。他们应该直接在粉红色的树后面。

我的第二个问题是树木太“放大”了。我希望他们能够看到整条树木/山脉。

我将这些问题合二为一的原因是我觉得它们都是相关的，但我不确定如何完成它们。我尝试了很多不同的方法。我该怎么做这些事情？

在根目录中查看我所有的配置文件是我的一个巨大的烦恼，因为它们通常是在项目开始时设置的，只是不时调整。我知道我可以将这些隐藏在 WebStorm 中，但随后取消隐藏它们变得很麻烦。

理想情况下，我会创建一个类似“虚拟”文件夹的东西，它不会更改任何物理目录，我可以简单地展开以查看我的所有配置文件。Visual Studio 有类似的东西，称为“解决方案”文件夹。

例如，我希望能够创建一个名为 .config 的“虚拟”文件夹，然后拖动我所有的配置文件。然后我可以很容易地崩溃这个。

• .config
  • .bowerrc
  • .editorconfig
  • .jscsrc
  • .jshintrc
  • .bower.json
  • .gulp.config.js
  • .favicon.ico
  • .karma.conf.js
  • 鲍尔.json
  • 包.json
  • 自述文件.md

或者，能够轻松切换特定文件或文件夹的可见性将是一个很棒的功能。

这有点 hack，但是对于 Sublime Text，我有一个简单的脚本来切换 file_exclude_patterns 和 folder_exclude_patterns。我目前正在为一些未来的项目玩弄 WebStorm。

我正在寻找最好的应用程序、在线工具或任何现有的工具来全面测试我正在开发的响应式网站的兼容性。我需要检查屏幕尺寸、浏览器、设备。

有没有一种工具可以在一个平台上统一所有测试？

我们的团队中有软件开发人员（PHP、SQL）和网页设计师（HTML、CSS、JS、Foundation、Bootstrap）。

典型场景：软件开发人员实现业务逻辑，而设计由另一个人完成。

问题：每当前端设计发生变化时，设计人员必须将新设计发送给开发人员，他们必须跟踪变化并修改源代码。

问题：有哪些工具/方法可以让设计人员直接使用 Twig 模板，并在没有后端开发人员帮助的情况下应用对 HTML/CSS/JS 的更改（如果可能，无需安装 Symfony 和 LAMP）？

或者在更高的层次上——在 Symfony 2 中分离后端和前端开发的最佳实践是什么？