本文介绍了如何使用 Gulp 丑化我的 AngularJS 2 Typescript 应用程序文件并连接到生产版本的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

如何使用 Gulp 丑化我的 AngularJS 2 Typescript 应用程序文件并连接到生产版本?

我可以对 js 文件进行 uglify,但我不知道如何使用它们/连接它.目前我下面的代码只是缓存了css并将其注入到索引文件头中.

I can uglify the js files but then I have no idea how to use them / wire it up.Currently my code below just cache busts the css and injects it to the index file head.

我在我的 angular 2 应用程序中使用了 typescript,我注意到当我在 chrome 中查看我的网站时,我可以看到我所做的所有 .ts 和 .js 代码的所有源文件.

I used typescript for my angular 2 app and I noticed that when I viewed my website in chrome I could see all the source files for all the .ts and .js code that I have done.

我希望将其丑化并使其更安全.

I'm looking to uglify that and make it more secure.

我可以在角度 1 中做到这一点,但在角度 2 中我不知道如何做到这一点.

I could do this in angular 1 but in angular 2 I have no idea how to do this.

提前谢谢你.

这是我当前的索引文件:

<!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 应用程序,它完全符合您的要求:角 2 种子.开始查看运行以下命令时所做的事情:

There is a very nice sample angular2 application that does exactly what you are looking for: angular 2 seed.Start looking of what is done when the following command is run:

npm run build.prod

并遵循相应 gulp 任务的逻辑,看看它是如何完成的.

and follow logic of the corresponding gulp task to see how its done.

希望这会有所帮助.

这篇关于如何使用 Gulp 丑化我的 AngularJS 2 Typescript 应用程序文件并连接到生产版本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-06 14:29