对于 Angular2 项目，在 gulp 中，我如何连接从 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 seed 应用程序，因为它会花费我很长时间来移动我的应用程序。
提前谢谢你。
最佳答案
事实上，你不能像这样连接它们，因为默认情况下它们对应于匿名模块。您需要利用 outFile 来利用它。这样，所有模块将被编译成一个单独的 JS 文件，它们将不是匿名模块，而是按名称注册。
这是一个例子。查看 System.register 函数的第一个参数。
匿名模块
System.register([ 'dep1', 'dep2', function(exports_1, context_1) { (...) }按名称注册的模块
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'));
});
最后，您可以使用 htmlreplace 用创建的 JS 文件更新 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'));
});
这个问题可以帮助你:
关于javascript - 对于 Angular2 项目，在 gulp 中，我如何连接从 typescript 生成的所有 JavaScript 文件并将它们添加到我的 index.html 文件中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36821953/