我如何丑化我的 AngularJS 2 Typescript 应用程序文件并使用 Gulp 连接生产版本？
我可以丑化 js 文件，但我不知道如何使用它们/将其连接起来。 目前我下面的代码只是缓存破坏 css 并将其注入(inject)索引文件头。
我在我的 Angular 2 应用程序中使用了 typescript，我注意到当我在 chrome 中查看我的网站时，我可以看到我完成的所有 .ts 和 .js 代码的所有源文件。
我希望对其进行丑化并使其更安全。
我可以在 Angular 1 中执行此操作，但在 Angular 2 中我不知道如何执行此操作。
提前谢谢你。
这是我当前的索引文件:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pool Cover Dev</title>
<base href="/"></base>
<!-- inject:css -->
<link rel="stylesheet" href="/css/styles.4e04da1a.css">
<!-- endinject -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<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/'))
}, 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});
return target.pipe(inject(sources))
.pipe(gulp.dest('./src'));
}, 5000);
});
//4. Get all js files into folder js
gulp.task('getAllJsFiles', function() {
setTimeout(function () {
gulp.src('src/app/**/**/*.js')
.pipe(cachebust.resources())
.pipe(gulp.dest('src/app/js/'))
}, 8000);
});
gulp.task('default', ['deleteStyle', 'addStyles', 'injectStyle', 'getAllJsFiles']);
最佳答案
有一个非常好的示例 angular2 应用程序可以完全满足您的需求:angular 2 seed . 开始查看运行以下命令时执行的操作:
npm run build.prod
然后按照相应的gulp任务的逻辑，看看它是如何完成的。
希望这对您有所帮助。
关于typescript - 我如何丑化我的 AngularJS 2 Typescript 应用程序文件并使用 Gulp 连接到生产版本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35361394/