对于Angular2项目,我如何连接从typescript生成的所有JavaScript文件并将它们添加到我的index.html文件中
Ang*_*arM 5 javascript typescript gulp angular
对于Angular2项目,我如何连接从typescript生成的所有JavaScript文件并将它们添加到我的index.html文件中.
我正在使用Angular2,typescript和gulp.
目前我没有连接它从typescript文件生成的javascript文件.
我无法尝试这样做并将它们添加到我的index.html文件中.
另外,一旦我完成了这个,我需要缓存清理,以便让浏览器保持请求javascript文件.
这是我的index.html文件:
<!DOCTYPE html>
<html lang="en" prefix="og: http://ogp.me/ns#" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My App</title>
<base href="/"></base>
<meta content="IE=edge, chrome=1" http-equiv="X-UA-Compatible"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=0.5, user-scalable=yes"/>
<!-- Css libs -->
<link rel="stylesheet" type="text/css" href="/css/styles.css" />
<!-- inject:css -->
<!-- <link rel="stylesheet" href="/css/styles.81dd14d5.css"> -->
<!-- endinject -->
<!-- Js libs -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.34.2/es6-shim.min.js"></script>
<script type="text/javascript" src="/safariPolyFix.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.18.4/system.src.js"></script>
<script>
System.config({
transpiler: 'typescript',
defaultJSExtensions: true,
typescriptOptions: {
emitDecoratorMetadata: true,
},
packages: {
'angular2-google-maps': {
defaultExtension: 'js'
}
}
});
</script>
<script type="text/javascript" src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/tools/typescript.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/2.0.0-beta.0/angular2.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/2.0.0-beta.0/router.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/2.0.0-beta.0/http.js"></script>
<script type="text/javascript" src="/firebase/firebaseNew.js"></script>
</head>
<body id="container">
<app></app>
<script type="text/javascript">
System.import('/app/app.component.js');
</script>
</body>
</html>
这是我的gulp文件:
var gulp = require('gulp');
var sass = require('gulp-sass');
var inject = require('gulp-inject');
var del = require('delete');
var minifyCss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var CacheBuster = require('gulp-cachebust');
var cachebust = new CacheBuster();
//1. Delete styles.css
gulp.task('deleteStyle', function() {
setTimeout(function () {
del.promise(['src/css/styles.*.css'])
.then(function() {
console.log("Deleted original styles.css");
return true;
});
}, 1000);
});
//2. Make new styles.css
gulp.task('addStyles', function() {
setTimeout(function () {
gulp.src('src/sass/styles.scss')
.pipe(sass().on('error', sass.logError))
.pipe(minifyCss({compatibility: 'ie8'}))
.pipe(cachebust.resources())
.pipe(gulp.dest('src/css/'))
console.log("Added and minifyCss style.css");
}, 3000);
});
//3. Inject new style.css to index.html file
gulp.task('injectStyle', function() {
setTimeout(function () {
var target = gulp.src('src/index.html');
var sources = gulp.src(['src/css/styles.*.css'], {read: false});
console.log("Injected stylesheet to index.html file");
return target.pipe(inject(sources))
.pipe(gulp.dest('./src'));
}, 5000);
});
//Use for product release.
gulp.task('default', ['deleteStyle', 'addStyles', 'injectStyle']);
这是我目前尝试使用缓存清除来连接js,现在工作正常.我只是不知道如何将这个all.46f5af42.js文件连接到index.html？
这是以下的gulp代码:
gulp.task('getAllJsFiles', function() {
setTimeout(function () {
gulp.src('src/app/**/**/*.js')
.pipe(concat('all.js'))
.pipe(cachebust.resources())
.pipe(gulp.dest('src/js'));
}, 8000);
});
我还设法将concat js和缓存的js文件缓存到index.html中:
<!-- inject:js -->
<script src="/src/js/all.46f5af42.js"></script>
<!-- endinject -->
我不知道如何将其连接起来以使其正常工作？
这是我目前的控制台:
如果有人可以帮助我将更改添加到我现有的代码中,那将是非常好的,因为我不想下载新的angular2种子应用程序,因为它会花费我很长时间来移动我的应用程序.
先感谢您.
事实上，你不能像这样连接它们，因为默认情况下它们对应于匿名模块。您需要利用outFile来利用这一点。这样，所有模块都会被编译成一个 JS 文件，并且它们不会是匿名模块，而是通过名称注册。
这是一个示例。看一下函数的第一个参数System.register。
匿名模块
Run Code Online (Sandbox Code Playgroud)System.register([ 'dep1', 'dep2', function(exports_1, context_1) { (...) }按名称注册的模块
Run Code Online (Sandbox Code Playgroud)System.register('module1', [ 'dep1', 'dep2', function(exports_1, context_1) { (...) } System.register('module2', [ 'dep1', 'dep2', function(exports_1, context_1) { (...) }
以下是 gulp 文件中的使用示例：
gulp.task('app-bundle', function () {
var tsProject = ts.createProject('tsconfig.json', {
typescript: require('typescript'),
outFile: 'app.js'
});
var tsResult = gulp.src('app/**/*.ts')
.pipe(ts(tsProject));
return tsResult.js
.pipe(uglify())
.pipe(gulp.dest('./dist'));
});
最后，您可以使用创建的 JS 文件来htmlreplace更新script元素。这是示例：
gulp.task('html', function() {
gulp.src('index.html')
.pipe(htmlreplace({
'vendor': 'vendors.min.js',
'app': 'app.min.js',
'boot': 'boot.min.js'
}))
.pipe(gulp.dest('dist'));
});
这个问题可以帮助你：
| 归档时间： |
|
| 查看次数： |
3012 次 |
| 最近记录： |