如何从 Webstorm 发布 angularjs 项目答案

【问题标题】：How to publish the angularjs project from Webstorm如何从 Webstorm 发布 angularjs 项目
【发布时间】：2015-07-17 22:42:57
【问题描述】：

WebStorm 非常适合编辑 Angular 有很多，而且它们的内置模板非常好；但是，当我对应用程序感到满意时，我找不到任何关于我该做什么的信息。

假设我创建了默认模板，我怎样才能为这个应用程序获得一个好的文件夹结构，以便我可以将它 ftp 到远程服务器？

更好的是，是否可以将我的整个角度依赖项和模块“编译”（打包）到一个 .js 文件中，然后例如让 index.html 以某种方式引用它？

【问题讨论】：

使用 gulp 或 grunt 编译构建。 IDE 本身不是构建工具，但支持它们。如果您还没有发现，也有内置的部署 ftp 有很多选项
Yeoman 有一个很棒的Angular 生成器。更多详情请见this video
@charlietfl 您可以提供任何链接吗？我一直在阅读这两个，但是当您访问他们的页面时，他们会说“这是运行任务的工具”。并不是说它是构建项目的工具。
@Freezystem 阅读了 github 上的自述文件 - 就像 webstorm 一样，详细说明“我如何开始”，而“我完成了我的应用程序，如何发布它？”没有任何内容。
很多关于使用这两种方法的教程。这些任务是自动化任务，用于做很多不同的事情，包括编译你的package

标签： angularjs webstorm

【解决方案1】：

您可以从excellent Yeoman generator 中激发自己的灵感。

我目前正在使用它，当我使用 gulp serve 完成编码和测试后，我只需通过使用 gulp build 命令编译所有源代码来发布我的应用程序。

架构如下，我个人认为这是一个非常好的架构：

├──  src/
│   ├──  app/
│   │   ├──  components/
│   │   │   └──  navbar/
│   │   │   │   ├──  navbar.controller.js
│   │   │   │   └──  navbar.html
│   │   ├──  main/
│   │   │   ├──  main.controller.js
│   │   │   ├──  main.controller.spec.js
│   │   │   └──  main.html
│   │   └──  index.js
│   │   └──  index.(css|less|scss)
│   │   └──  vendor.(css|less|scss)
│   ├──  assets/
│   │   └──  images/
│   ├──  404.html
│   ├──  favico.ico
│   └──  index.html
├──  gulp/
├──  e2e/
├──  bower_components/
├──  nodes_modules/
├──  .bowerrc
├──  .editorconfig
├──  .gitignore
├──  .jshintrc
├──  bower.json
├──  gulpfile.js
├──  karma.conf.js
├──  package.json
├──  protractor.conf.js

一旦你运行了gulp build，你所有的JS文件都会被编译成一个唯一的index.js文件，你的样式文件也是如此。 bower 包含的所有供应商脚本也被编译为一个并存储在您的 dist 目录中的vendor.js 文件中。

【讨论】：

我有一个已经准备好的项目，我想打包。我完成了所有步骤（使项目一饮而尽），然后按照您提供的链接中的指示完成所有步骤，我运行，gulp serve，gulp build。我在任何地方都看不到 index.js 文件。我应该去哪里看？