我主要来自CMS（Wordpress，PHP）背景。我正在建立一个新的网站，这将是一个单页的AngularJS应用程序。我下载并安装了Google Web入门套件。我安装了AngularJS作为nmp安装。但是如何让gulp服务在我的构建中包含AngularJS文件？我很擅长使用包管理器和构建流程构建站点。感谢。
答案 0 :(得分：5)
将Google Web Starter Kit视为您的编译器以及项目中/app文件夹中的任何内容，作为Web应用程序的源代码。在命令行运行gulp相当于运行编译器来构建您的Web应用程序。 （我说gulp，因为that is what GWSK is using now。）
通过NPM添加软件包可以扩展编译器，而不是扩展您的Web应用程序。要将软件包添加到您的网络应用程序，您可以使用Bower之类的工具或将其添加到他们手中＆＃34;手动＆＃34;到您的基本模板。请记住，您正在创建一个将在云中运行的Web应用程序，并且添加包就像向HTML文件添加脚本引用一样简单。
打开your-project/app/index.html并在构建块之前添加对AngularJS 的脚本引用。例如，在您的文档的HEAD中。
<head>
<!-- ... existing head items... -->
<link rel="stylesheet" href="styles/main.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
</head>
将您的应用实施添加到your-project/app/scripts文件夹。我建议使用子文件夹作为控制器，指令等。
在现有main.js脚本文件中实例化您的应用，例如
(function () {
'use strict';
var querySelector = document.querySelector.bind(document);
... existing Starter Kit boilerplate...
// Instantiate my Angular app
angular.module('MyWebApp', [
'myDirective',
'pageController'
]).config(function($locationProvider) {
$locationProvider.html5Mode({
enabled: true
});
});
})();
将角度模块添加到构建块
<!-- build:js scripts/main.min.js -->
<script src="scripts/directives/my-gallery.js"></script>
<script src="scripts/directives/img-uploader.js"></script>
<script src="scripts/controllers/pageController.js"></script>
<script src="scripts/main.js"></script>
<!-- endbuild -->
运行gulp serve在本地测试您的应用，调试并重复，直到满意为止。
如果您不想依赖第三方CDN来投放您网站的重要资产，您也可以将AngularJS作为您应用资产的一部分，即您控制的资产。
首先你需要扩展你的＃34;编译器＆＃34; （见上文）添加Bower包管理器：
npm install -g bower
配置Bower将包放入my-project/app/scripts/vendor文件夹，请参阅.bowerrc，然后使用bower init初始化您的项目。要将包添加到您的网络应用，例如添加AngularJS run：
bower install angular --save
将所需的供应商软件包添加到基本模板中的构建块，以使它们成为您的软件包的一部分：
<!-- build:js scripts/main.min.js -->
<script src="scripts/vendor/angular/angular.js"></script>
<script src="scripts/vendor/angular-resource/angular-resource.js"></script>
... other angular modules you need in your app...
<script src="scripts/directives/my-gallery.js"></script>
<script src="scripts/directives/img-uploader.js"></script>
<script src="scripts/controllers/pageController.js"></script>
<script src="scripts/main.js"></script>
<!-- endbuild -->
运行gulp serve以测试您甚至可以在离线时使用的完全本地网络应用。
还有其他方法可以实现上述目标。入门套件就是这样;一个开始。例如，有些开发人员喜欢使用NPM和Browserify的组合，但如果您不了解/喜欢Node.js，我就不推荐它。如果您对包管理器感到不舒服，可以完全手动操作，并根据需要将其复制到scripts/vendor文件夹中。
尝试以上两种方法，看看它们是否有意义。如果没有，请迭代。