更改我的文件夹结构以保持开发和生产分离后，我得到一个未捕获的SyntaxError：意外的令牌＆lt;错误。
当我通过FTP上传我的生产文件夹内容时，该网站工作正常。只有在本地我才能得到上述错误。在更改文件夹结构之前，我的本地服务器（gulp-connect）工作正常。
我遇到以下错误：
我的应用程序运行良好并准备启动。我一直在本地使用gulp-connect服务器。我想创建一个gulp任务，可以缩小代码，复制/粘贴依赖项，压缩图像。我的最终目标是拥有一个仅包含生产就绪文件的文件夹。
为此，我创建了以下文件夹结构：
第一个也是最大的变化是将节点模块依赖项复制/粘贴（使用gulp）到适当的文件夹中。随着这些改变，我更新了我的index.html，以反映从node_modules文件夹到/ js的脚本的新位置。
<!doctype html>
<html lang="en">
<head>
<link rel="icon"
type="image/png"
href="images/HWA_Emblem.png">
<base href="/">
<meta charset="UTF-8">
<title>Halifax Wildlife Association</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/lib/shim.min.js"></script>
<script src="js/lib/Reflect.js"></script>
<script src="js/lib/system.src.js"></script>
<script src="js/lib/zone.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<my-app></my-app>
<script src="js/lib/jquery-3.1.1.min.js"></script>
<script src="js/scripts.js"></script>
<script src="js/lib/format-google-calendar.js"></script>
</body>
</html>
/**
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
*/
(function (global) {
// map tells the System loader where to look for things
var map = {
'app': 'app', // 'dist',
'@angular': '/js/lib/@angular',
'ng2-page-scroll': '/js/lib/ng2-page-scroll.umd.js',
'rxjs': '/js/lib/rxjs'
};
// 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 ngPackageNames = [
'common',
'compiler',
'core',
'forms',
'http',
'platform-browser',
'platform-browser-dynamic',
'router'
];
// Individual files (~300 requests):
function packIndex(pkgName) {
packages['@angular/' + pkgName] = { main: 'index.js', defaultExtension: 'js' };
}
// Bundled (~40 requests):
function packUmd(pkgName) {
packages['@angular/' + pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
}
// Most environments should use UMD; some (Karma) need the individual index files
var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
// Add package entries for angular packages
ngPackageNames.forEach(setPackageConfig);
var config = {
map: map,
packages: packages
};
System.config(config);
})(this);
我使用指南针编译我的SASS，然后我相应地更新了它：
require 'compass/import-once/activate'
require 'breakpoint'
# Require any additional compass plugins here.
# Set this to the root of your project when deployed:
http_path = "/builds/development"
css_dir = 'stylesheets'
sass_dir = 'sass'
images_dir = 'images'
javascripts_dir = 'javascripts'
sass_options = false
#tsconfig.json#
My TSConfig file had no changes
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
}
}
我还没有完成这个文件，但是它确实正确地创建了一个生产文件夹。
// Add requiements
var gulp = require ('gulp'),
gutil = require ('gulp-util'),
concat = require ('gulp-concat'),
browserify = require ('gulp-browserify'),
compass = require ('gulp-compass'),
connect = require ('gulp-connect');
sourcemaps = require ('gulp-sourcemaps');
typescript = require ('gulp-typescript');
tsConfig = require ('./tsconfig.json');
gulpif = require ('gulp-if');
uglify = require ('gulp-uglify');
var env,
htmlSources,
sassSource,
jsSources,
appSources,
imageSources,
tsSources,
depSources,
outputDir
env = process.env.NODE_ENV || 'development';
if (env==='development') {
outputDir = 'builds/development/';
} else{
outputDir = 'builds/production/';
}
//Setup path variables
htmlSources = [
'builds/development/partials/*.html',
'builds/development/index.html'
];
sassSources = [
'builds/development/components/sass/style.scss'
];
jsSources = [
'builds/development/components/scripts/*.js'
];
depSources = [
'js/lib'
];
tsSrc = [
'builds/development/components/typescript/*.ts'
];
imageSources= [
'builds/development/images/**/*.*'
];
gulp.task('CopyDep', function(){
gulp.src('node_modules/core-js/client/shim.min.js').pipe(gulp.dest(outputDir + depSources));
gulp.src('node_modules/zone.js/dist/zone.js').pipe(gulp.dest(outputDir + depSources));
gulp.src('node_modules/reflect-metadata/Reflect.js').pipe(gulp.dest(outputDir + depSources));
gulp.src('node_modules/systemjs/dist/system.src.js').pipe(gulp.dest(outputDir + depSources));
gulp.src('builds/development/components/scripts/format-google-calendar.js').pipe(gulp.dest(outputDir + depSources));
gulp.src('builds/development/components/scripts/jquery-3.1.1.min.js').pipe(gulp.dest(outputDir + depSources));
gulp.src('builds/development/components/scripts/jquery-3.1.1.min.js').pipe(gulp.dest(outputDir + depSources));
gulp.src('builds/development/systemjs.config.js').pipe(gulpif(env === 'production', gulp.dest(outputDir)))
gulp.src('node_modules/@angular/**/*').pipe(gulp.dest(outputDir + 'js/lib/@angular'));
gulp.src('node_modules/ng2-page-scroll/bundles/ng2-page-scroll.umd.js').pipe(gulp.dest(outputDir + 'js/lib'));
gulp.src('node_modules/rxjs/**/*.*').pipe(gulp.dest(outputDir + 'js/lib/rxjs'));
});
//Combine Javascript Files
gulp.task('js', function(){
gulp.src(jsSources)
.pipe(concat('scripts.js'))
.pipe(browserify())
.pipe(gulp.dest(outputDir + 'js'))
.pipe(connect.reload())
});
//Process Typescript
gulp.task('typescript', function () {
return gulp
.src(tsSrc)
.pipe(sourcemaps.init())
.pipe(typescript(tsConfig.compilerOptions))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(outputDir + 'app'))
.pipe(connect.reload());
});
//Process SASS files
gulp.task('compass', function(){
gulp.src(sassSources)
.pipe(compass({
config_file: 'config.rb',
css: 'temp',
sass: 'builds/development/components/sass'
}))
.on('error', gutil.log)
.pipe(gulp.dest(outputDir + 'css'))
.pipe(connect.reload())
});
//Reload HTML files if change is recorded.
gulp.task('html', function(){
gulp.src(htmlSources[1])
.pipe(gulpif(env === 'production', gulp.dest(outputDir)))
gulp.src(htmlSources[0])
.pipe(gulpif(env === 'production', gulp.dest(outputDir + 'partials')))
.pipe(connect.reload());
});
// Watch all sources file directorys and run tasks if changes happen.
gulp.task('watch', function(){
gulp.watch(jsSources, ['js']);
gulp.watch(sassSources, ['compass']);
gulp.watch(htmlSources, ['html']);
gulp.watch(tsSrc, ['typescript']);
});
// copy images in production
gulp.task('images', function(){
gulp.src(imageSources)
.pipe(gulpif(env === 'production', gulp.dest(outputDir + 'images')))
});
// Start a server for project.
gulp.task('connect', function(){
connect.server({
root : '',
livereload : true,
fallback: 'builds/development/index.html'
});
});
// Run all tasks above by using default command "Gulp".
gulp.task('default', ['CopyDep', 'images', 'js', 'images', 'typescript', 'compass', 'html', 'watch', 'connect']);