我正在尝试使用Gulp在Visual Studio 2015及其Asp.net 4.5.2空项目中构建我的第一个角度2应用程序。项目布局 - ＆gt; src，它有app文件夹，这是我的文件：
app.component.ts文件：
import {Component, OnInit} from "@angular/core";
@Component({
selector: "app",
templateUrl: "./app/app.html"
})
export class AppComponent implements OnInit {
ngOnInit() {
console.log("Application component initialized ...");
}
}
app.html文件：
<p>Angular 2 is running ... </p>
main.ts文件：
/* Avoid: 'error TS2304: Cannot find name <type>' during compilation */
///<reference path="../../typings/index.d.ts"/>
import {bootstrap} from "@angular/platform-browser-dynamic";
import {AppComponent} from "./app.component";
bootstrap(AppComponent);
app.html，app.component.ts和main.ts位于src / app文件夹中。
这是项目根目录下的gulp.js文件，它编译typscript文件并将nodemodule推送到lib文件夹中：
const gulp = require("gulp");
const del = require("del");
const tsc = require("gulp-typescript");
const sourcemaps = require('gulp-sourcemaps');
const tsProject = tsc.createProject("tsconfig.json");
/**
* Remove build directory.
*/
gulp.task('clean', (cb) => {
return del(["build"], cb);
});
/**
* Compile TypeScript sources and create sourcemaps in build directory.
*/
gulp.task("compile", () => {
var tsResult = gulp.src("src/**/*.ts")
.pipe(sourcemaps.init())
.pipe(tsc(tsProject));
return tsResult.js
.pipe(sourcemaps.write("."))
.pipe(gulp.dest("build"));
});
/**
* Copy all resources that are not TypeScript files into build directory.
*/
gulp.task("resources", () => {
return gulp.src(["src/**/*", "!**/*.ts"])
.pipe(gulp.dest("build"))
});
/**
* Copy all required libraries into build directory.
*/
gulp.task("libs", () => {
return gulp.src([
'core-js/client/shim.min.js',
'systemjs/dist/system-polyfills.js',
'systemjs/dist/system.src.js',
'reflect-metadata/Reflect.js',
'rxjs/**',
'zone.js/dist/**',
'@angular/**'
], { cwd: "node_modules/**" }) /* Glob required here. */
.pipe(gulp.dest("build/lib"));
});
/**
* Build the project.
*/
gulp.task("build", ['compile', 'resources', 'libs'], () => {
console.log("Build finished ...")
});
在src文件夹中，我有systemjs.config.js和index.html文件
systemjs.config.js文件，我有地图到点构建应用程序，因为我不想将它映射到src / app中的文件。在gulp build任务之后移动的文件夹build / app中，或者通过构建应用程序，它从tsconfig.js中获取并移动到outDir来构建文件夹：
(function (global) {
// map tells the System loader where to look for things
var map = {
'app': '../build/app',
'rxjs': '../build/lib/rxjs',
'@angular': '../build/lib/@angular'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' }
};
var packageNames = [
'@angular/common',
'@angular/compiler',
'@angular/core',
'@angular/http',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
'@angular/router',
'@angular/router-deprecated',
'@angular/testing',
'@angular/upgrade'
];
// add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
packageNames.forEach(function (pkgName) {
packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});
var config = {
map: map,
packages: packages
};
// filterSystemConfig - index.html's chance to modify config before we register it.
if (global.filterSystemConfig) {
global.filterSystemConfig(config);
}
System.config(config);
})(this);
项目根目录中的tsconfig.json文件：
{
"compilerOptions": {
"outDir" : "build/app",
"target": "es5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules",
"build"
]
}
上面我要删除node_modules并构建编译ts文件并将它们放在build / app文件夹中的目录。
我在项目根文件夹中的typings.json文件：
{
"globalDependencies": {
"core-js": "registry:dt/core-js#0.0.0+20160602141332"
}
}
我的package.json文件位于根文件夹中：
{
"name": "angular2framework",
"author": "Vijender Reddy",
"version": "0.1.0",
"scripts": {
"postinstall": "typings install",
"typings": "typings"
},
"license": "ISC",
"dependencies": {
"@angular/common": "2.0.0-rc.3",
"@angular/compiler": "2.0.0-rc.3",
"@angular/core": "2.0.0-rc.3",
"@angular/forms": "0.1.1",
"@angular/http": "2.0.0-rc.3",
"@angular/platform-browser": "2.0.0-rc.3",
"@angular/platform-browser-dynamic": "2.0.0-rc.3",
"@angular/router": "3.0.0-alpha.7",
"@angular/router-deprecated": "2.0.0-rc.2",
"@angular/upgrade": "2.0.0-rc.3",
"systemjs": "0.19.27",
"core-js": "^2.4.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "^0.6.12",
"angular2-in-memory-web-api": "0.0.12",
"bootstrap": "^3.3.6"
},
"devDependencies": {
"del": "^2.2.0",
"gulp": "^3.9.1",
"gulp-clean": "^0.3.2",
"gulp-concat": "^2.6.0",
"gulp-sourcemaps": "^1.6.0",
"gulp-tsc": "^1.1.5",
"gulp-typescript": "^2.13.6",
"path": "^0.12.7",
"typescript": "^1.8.10",
"typings": "^1.3.0"
}
}
我的index.html页面在src文件夹中：
<html>
<head>
<title>Angular 2 TypeScript Gulp QuickStart</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="../build/lib/core-js/client/shim.min.js"></script>
<script src="../build/lib/zone.js/dist/zone.js"></script>
<script src="../build/lib/reflect-metadata/Reflect.js"></script>
<script src="../build/lib/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<app>Loading...</app>
</body>
</html>
我指的是构建目录中的rsjx和zone.js，它是从gulp构建任务而不是从node_modules创建的。
当我运行我的应用程序时，它应该默认选择index.html文件，但它没有提取它并且我收到错误：
（禁止）http://localhost:34756/无法加载资源：服务器响应状态为403（禁止）
但是当我在index.html页面中运行应用程序时，我可以运行应用程序，但网址路径为：http://localhost:57722/src/index.html
它是src / index.html :(我不想要。我想将index.html作为默认值，并且url http://localhost:57722应该可以工作，即使我在项目中的任何文件而不仅仅是索引上。它应该从构建目录中自动选择，该目录由gulp构建任务创建。
任何帮助表示感谢。
答案 0 :(得分：1)
很老的问题，但想到在这里发布我的解决方案 你的gulpfile.js有一个启动webserver的任务吗？ 类似于下面的东西
gulp.task('webserver', function() {
gulp.src('app')
.pipe(webserver({
livereload: true,
open: true
}));
}）;
在上面的代码中检查 gulp.src（＆＃39; app＆＃39;），并确保您的index.html文件位于给定的路径中。