ton*_*ash 2 npm angularjs gruntjs
我主要来自CMS(Wordpress,PHP)背景.我正在建立一个新的网站,这将是一个单页的AngularJS应用程序.我下载并安装了Google Web入门套件.我安装了AngularJS作为nmp安装.但是如何让gulp服务在我的构建中包含AngularJS文件？我不熟悉使用包管理器和构建流程构建站点.谢谢.
将Google Web Starter Kit视为您的编译器以及/app项目文件夹中的任何内容,作为Web应用程序的源代码.运行gulp在命令行是等同于运行编译器来构建你的Web应用程序.(我说gulp,因为这就是GWSK现在正在使用的.)
通过NPM添加包允许您扩展编译器,而不是Web应用程序.要将包添加到您的Web应用程序,您可以使用像Bower这样的工具,或者"手动"将它们添加到您的基本模板.请记住,您正在创建一个将在云中运行的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作为您应用资产的一部分,即您控制的资产.
首先,您需要扩展"编译器"(见上文)以添加Bower包管理器:
npm install -g bower
配置Bower将包放入my-project/app/scripts/vendor文件夹,参见.bowerrc,然后使用初始化项目bower init.要将包添加到您的Web应用程序,例如添加AngularJS运行:
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以测试完全本地的Web应用程序,您甚至可以在脱机时使用它.
还有其他方法可以实现上述目标.入门套件就是这样; 一个开始.例如,一些开发人员喜欢使用NPM和Browserify的组合,但如果您不了解/喜欢Node.js,我不推荐它.如果您对包管理器感到不舒服,可以完全手动操作,并将需要的东西复制到scripts/vendor文件夹中.
尝试以上两种方法,看看它们是否有意义.如果没有,请迭代.
| 归档时间： |
|
| 查看次数： |
1226 次 |
| 最近记录： |