I've been following this tutorial Angular2, Bootstrap, Yeoman, Gulp, tutorial and I get up to the frontend task section, but then something happens when I try to test the code locally.
Whenever I use npm start I run the following code, but end up getting the blank webpage with Cannot GET/
Folder Structure:
> 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))
});