Gulp 和 "NPM start" 会导致空白页面显示以下文本：在本地测试时无法获取/

Question

我一直在学习本教程 Angular2, Bootstrap, Yeoman, Gulp, tutorial 并且我开始了前端任务部分，但是当我尝试在本地测试代码时发生了一些事情。

每当我使用 npm start 我运行以下代码，但最终得到空白网页 Cannot GET/

文件夹结构：

> my-vzlr
> -build
> -node_modules
> -src
> --app
> ---app.js
> ---index.html
> ---main.js
> --electron
> --fonts
> --images
> --styles  
> -gulpfile.js
> -package.json

Package.json:

> {   "name": "my-vzlr",   "version": "0.0.0",   "private": true,  
> "scripts": {
>     "start": "gulp clean && gulp frontend && gulp dev",
>     "build": "gulp clean && gulp frontend"   },   "dependencies": {
>     "angular2": "2.0.0-beta.2",
>     "traceur": "0.0.102",
>     "es6-promise": "^3.0.2",
>     "es6-shim": "^0.33.3",
>     "rxjs": "5.0.0-beta.0",
>     "zone.js": "0.5.10",
>     "reflect-metadata": "0.1.2",
>     "systemjs": "0.19.6"   },   "devDependencies": {
>     "del": "^2.2.2",
>     "gulp": "3.9.0",
>     "gulp-rename": "1.2.2",
>     "gulp-symdest": "^1.0.0",
>     "gulp-traceur": "0.17.2",
>     "gulp-webserver": "0.9.1"   } }

Gulpfile.JS

var gulp = require('gulp'),
    del = require('del'),
    rename = require('gulp-rename'),
    traceur = require('gulp-traceur'),
    webserver = require('gulp-webserver'),
    symdest = require('gulp-symdest');

    var config = {
  sourceDir: 'src',
  buildDir: 'build',
  packagesDir: 'packages',
  npmDir: 'node_modules'
};

gulp.task('clean', function() {
  return del(config.buildDir + '/**/*', { force: true });
});


// run init tasks
//gulp.task('default', ['dependencies', 'js', 'html', 'css']);

// run development task
gulp.task('dev', ['dev:watch', 'dev:serve']);

// serve the build dir
gulp.task('dev:serve', function () {
  gulp.src(config.buildDir)
    .pipe(webserver({
      open: true
    }));
});

// watch for changes and run the relevant task
gulp.task('dev:watch', function() {
  gulp.watch(config.sourceDir + '/**/*.js', ['frontend:js']);
  gulp.watch(config.sourceDir + '/**/*.html', ['frontend:html']);
  gulp.watch(config.sourceDir + '/**/*.css', ['frontend:css']);
});

gulp.task('frontend', [
  'frontend:dependencies',
  'frontend:js',
  'frontend:html',
  'frontend:css'
]);

// move dependencies into build dir
gulp.task('frontend:dependencies', function() {
  return gulp.src([
     config.npmDir + '/traceur/bin/traceur-runtime.js',
     config.npmDir + '/systemjs/dist/system-csp-production.src.js',
     config.npmDir + '/systemjs/dist/system.js',
     config.npmDir + '/reflect-metadata/Reflect.js',
     config.npmDir + '/angular2/bundles/angular2.js',
     config.npmDir + '/angular2/bundles/angular2-polyfills.js',
     config.npmDir + '/rxjs/bundles/Rx.js',
     config.npmDir + '/angular2/bundles/router.js',
     config.npmDir + '/es6-shim/es6-shim.min.js',
     config.npmDir + '/es6-shim/es6-shim.map'
  ])
    .pipe(gulp.dest(config.buildDir + '/lib'));
});

// transpile & move js
gulp.task('frontend:js', function() {
  return gulp.src( config.sourceDir + '/**/*.js')
    .pipe(rename({
      extname: ''
    }))
    .pipe(traceur({
      modules: 'instantiate',
      moduleName: true,
      annotations: true,
      types: true,
      memberVariables: true
    }))
    .pipe(rename({
      extname: '.js'
    }))
    .pipe(gulp.dest(config.buildDir));
});

// move html
gulp.task('frontend:html', function() {
  return gulp.src(config.sourceDir + '/**/*.html')
    .pipe(gulp.dest(config.buildDir))
});

// move css
gulp.task('frontend:css', function() {
  return gulp.src(config.sourceDir + '/**/*.css')
    .pipe(gulp.dest(config.buildDir))
});

Answer 1

所以简而言之就是要确保应用程序的结构Gulp可以将它需要的所有文件移动到

Gulp 和 "NPM start" 会导致空白页面显示以下文本：在本地测试时无法获取/

Gulp with "NPM start" causes a blank page with the text: Cannot GET / when testing Locally

json

node.js

npm

gulp

gulp-watch