Question

好的，我对所有这些前端编程都很新，我希望我的问题不是愚蠢的。我有一个现有的应用程序使用express.js框架与自定义gulp配置和ejs。现在，我希望将全新闪亮的应用程序基础集成到其中。在Zurb网站上，手动安装只是一个班轮通过凉亭或npm（http://foundation.zurb.com/apps/docs/index.html#!/installation）

bower install foundation-apps --save
npm install foundation-apps --save

这就是我的所作所为，但基金会的格式根本没有发生。我也尝试包括CDN参考线（css和js），但同样的情况也在发生。

当我继续使用“正常”安装创建应用程序时，一切都运行良好。但是我想使用Express框架，这不是这里的情况！

我遗失了一些东西，但我看不到。

package.json
      {
      "name": "2004app",
      "version": "0.0.0",
      "private": true,
      "scripts": {
        "start": "node ./bin/www"
      },
      "dependencies": {
        "apache-server-configs": "^2.7.1",
        "body-parser": "~1.12.0",
        "browser-sync": "^1.3.0",
        "cookie-parser": "~1.3.4",
        "debug": "~2.1.1",
        "del": "^1.1.0",
        "ejs": "~2.3.1",
        "express": "~4.12.2",
        "foundation-apps": "^1.1.0",
        "gulp": "^3.8.11",
        "gulp-autoprefixer": "^2.0.0",
        "gulp-cache": "0.2.2",
        "gulp-changed": "^1.0.0",
        "gulp-concat": "2.5.2",
        "gulp-csso": "^1.0.0",
        "gulp-flatten": "0.0.4",
        "gulp-if": "^1.2.1",
        "gulp-imagemin": "^2.0.0",
        "gulp-jshint": "^1.6.3",
        "gulp-load-plugins": "^0.8.0",
        "gulp-minify-html": "0.1.5",
        "gulp-nodemon": "^2.0.2",
        "gulp-rename": "1.2.2",
        "gulp-replace": "^0.5.0",
        "gulp-sass": "^1.2.0",
        "gulp-size": "^1.0.0",
        "gulp-sourcemaps": "^1.3.0",
        "gulp-uglify": "^1.0.1",
        "gulp-uncss": "^1.0.0",
        "gulp-useref": "^1.0.1",
        "jshint-stylish": "^1.0.0",
        "morgan": "~1.5.1",
        "opn": "^1.0.0",
        "psi": "^1.0.4",
        "require-dir": "^0.1.0",
        "run-sequence": "^1.0.1",
        "serve-favicon": "~2.2.0"
      }
    }

例如，以下代码不会像它应该那样呈现。它只显示3次“Content goes here”的行，而不是：http://foundation.zurb.com/apps/docs/#!/accordion

<zf-accordion>
<zf-accordion-item title="Input your title here">
Content goes here
</zf-accordion-item>
<zf-accordion-item title="Input your title here">
Content goes here
</zf-accordion-item>
<zf-accordion-item title="Input your title here">
Content goes here
</zf-accordion-item>
</zf-accordion>

我想做的是什么？我如何使用CDN参考？（我成功地将CDN引用用于另一个应用程序中的bootstrap）

谢谢！

Answer 1

有可能！

虽然它有很多移动的部分你应该理解。

我最近做了同样的事情，但根据应用程序前端的大小，可能需要一些时间才能理解正在发生的一切。它不像只包括一个图书馆那么简单。

你提到快递应用，它是一款Angular应用吗？首先，如果你不熟悉Angular我会读到它，特别是＆＃39; Modules＆＃39;因为最终所有的基金会应用程序都是。

https://docs.angularjs.org/guide/module

您需要创建角度模块并将Foundation作为依赖项。

同样很高兴认识到应用程序的基础打包方式意味着以自己奇怪的方式编译。因此，基本上每当您进行更改时，您都需要重新编译前端html / logic / css。

确保您的快递应用程序正在提供单一页面应用程序，即基础应用程序。请务必观看您的Web开发控制台，看看您是否收到任何奇怪的Angular错误。如果你是，你通常可以点击它们并从角度站点获得帮助。

此外，Foundation Apps gulp任务是独一无二的，它有自己的小插件来创建基于模板的路由。请参阅以下链接：

http://foundation.zurb.com/apps/docs/#!/angular

如果您刚刚进入前端框架，我建议您在处理角色应用程序（如Foundation Apps）之前先阅读一些基本的Angular教程。

熟悉Angular后，看看Gulp构建正在做什么（gulpfile.js）。它负责以下事项：

复制静态资源
正在运行SASS并编译样式
复制应用Javascript基础
复制模板并构建路径（路径构建有点隐藏

一旦你理解了Gulpfile.js正在做什么，你应该开始拼凑前端的构建方式。

我使用Grunt重新设计了它，但由于他们的模板工作（ngHtml2js）而最终切换回gulp

不要放弃，坚持不懈，这将慢慢有意义！

Answer 2

我正在处理您在那里提到的相同任务，一个现有的MEAN应用程序，我使用ejs前端模板开发，以及我使用基础应用程序工具开发的前端，前端有我需要的所有MEAN后端，现在用于将所有这些合并到一个节点应用程序中。

UI是使用应用程序构建工具（如gulp）的基础独立开发的，考虑到我的UI是使用所有zurb基础开发的html部件，包括代表我的MEAN应用程序提供的所有必需功能。因此，在使用foundation-apps构建之后，生成的构建文件夹包含没有任何SASS的基本资产，或者需要基础应用程序位于package.json依赖项中，因为foundation.js文件位于前端的assets文件夹中和sass已经内置到app.css

中

我不知道如何在同一节点服务器上运行两个单页Web应用程序，以防我尝试分离两个不同的应用程序配置，角度依赖注入，路由，索引文件分离等。

挑战在于整合具有所有依赖关系的单页Web应用程序，同时保持基础UI管理其路由的方式，因为它与express管理路由的方式完全不同，它使用不同的库。

如何将应用程序的基础集成到现有的Express框架中

2 个答案: