我怎么丑化我AngularJS 2打字稿的应用程序文件和线材为使用咕嘟咕嘟一个产能释放 [英] How do I uglify my AngularJS 2 Typescript app files and wire up for a production release using Gulp

查看：114
本文介绍了我怎么丑化我AngularJS 2打字稿的应用程序文件和线材为使用咕嘟咕嘟一个产能释放的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如何丑化我AngularJS使用咕嘟咕嘟2打字稿的应用程序文件和线材为正式版？

我可以丑化js文件，但当时我不知道如何使用它们/丝起来。
目前只是缓存低于我的code萧条的CSS并将其注入到索引文件头。

我用打字稿我的角2应用程序，我注意到，当我在浏览器中查看我的网站，我可以看到所有的源文件所有的.TS和.js code，我已经做了。

我期待丑化了，使之更安全。

我能做到这一点的角度1，但在2角我不知道如何做到这一点。

感谢您提前。

这是我目前的索引文件： 

 ＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML LANG =ENGT＆;
  ＆LT; HEAD＆GT;
    ＆LT;标题＆GT;池盖开发和LT; /标题＆GT;
    ＆LT;基本href =/＆GT;＆LT; /基＆GT;    ＆LT;  - 注射：CSS  - ＆GT;
       ＆LT;链接rel =stylesheet属性HREF =/ CSS / styles.4e04da1a.css＆GT;
    ＆所述;！ -  endinject  - ＆GT;    ＆LT;脚本类型=文/ JavaScript的SRC =// ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js\"></script>
    ＆LT;脚本类型=文/ JavaScript的SRC =// ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js\"></script>
    ＆LT;脚本类型=文/ JavaScript的SRC =htt​​ps://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.34.2/es6-shim.min.js＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;脚本类型=文/ JavaScript的SRC =/ safariPolyFix.js＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;脚本类型=文/ JavaScript的SRC =htt​​ps://cdnjs.cloudflare.com/ajax/libs/systemjs/0.18.4/system.src.js＆GT;＆LT; / SCRIPT＆GT;    ＆LT;脚本＆GT;
        System.config（{
            transpiler：打字稿，
            defaultJSExtensions：真实，
            typescriptOptions：{
                emitDecoratorMetadata：真实，
            }，
            包：{
                angular2  - 谷歌 - 地图：{
                  defaultExtension：'JS'
                }
            }
        }）;
    ＆LT; / SCRIPT＆GT;    ＆LT;脚本type=\"text/javascript\"src=\"https://$c$c.angularjs.org/2.0.0-beta.0/angular2-polyfills.js\"></script>
    ＆LT;脚本类型=文/ JavaScript的SRC =HTTPS：//$c$c.angularjs.org/tool​​s/typescript.js＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;脚本类型=文/ JavaScript的SRC =HTTPS：//$c$c.angularjs.org/2.0.0-beta.0/Rx.js＆GT;＆LT; / SCRIPT＆GT;    ＆LT;脚本类型=文/ JavaScript的SRC =HTTPS：//$c$c.angularjs.org/2.0.0-beta.0/angular2.js＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;脚本类型=文/ JavaScript的SRC =HTTPS：//$c$c.angularjs.org/2.0.0-beta.0/router.js＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;脚本类型=文/ JavaScript的SRC =HTTPS：//$c$c.angularjs.org/2.0.0-beta.0/http.js＆GT;＆LT; / SCRIPT＆GT;    ＆LT;脚本类型=文/ JavaScript的SRC =/火力/ firebaseNew.js＆GT;＆LT; / SCRIPT＆GT;  ＆LT; /头＆GT;  ＆LT;身体ID =容器＆GT;    ＆LT;应用＆GT;＆LT; /应用＆GT;    ＆LT;脚本类型=文/ JavaScript的＆GT;
      System.import（'/应用/ app.component.js'）;
    ＆LT; / SCRIPT＆GT;  ＆LT; /身体GT;
＆LT; / HTML＆GT;

这是我目前一饮而尽文件： 

  VAR一饮而尽=要求（'吞掉'）;
VAR SASS =要求（'一饮而尽-SASS'）;
VAR注入=要求（'一饮而尽-注射'）;
VAR德尔=要求（删​​除）;
VAR minifyCss =要求（'一饮而尽，缩小CSS的'）;
VAR丑化=要求（'一饮而尽-丑化'）;VAR缓存无效化=要求（'一饮而尽-cachebust'）;
VAR cachebust =新的缓存无效化（）;// 1。删除styles.css的
gulp.task（'deleteStyle'，函数（）{    的setTimeout（函数（）{
        del.promise（['SRC / CSS /样式。*。CSS']）
          。然后（函数（）{
                的console.log（已删除原styles.css的）;
                返回true;
          }）;
    }，1000）;}）;// 2。结交新styles.css的
gulp.task（'addStyles'，函数（）{    的setTimeout（函数（）{        gulp.src（'SRC /上海社会科学院/ styles.scss'）
            .pipe（SASS（）。在（'错误'，sass.logError））
            .pipe（minifyCss（{兼容性：IE8}））
            .pipe（cachebust.resources（））
            .pipe（gulp.dest（'SRC / CSS /'））    }，3000）;}）;// 3。注入新的style.css到index.html文件
gulp.task（'injectStyle'，函数（）{    的setTimeout（函数（）{
          VAR的目标= gulp.src（'SRC / index.html的'）;
          无功源= gulp.src（['。SRC / CSS /样式* CSS']，{阅读：假}）;          返回target.pipe（注（源））
            .pipe（gulp.dest（'./ SRC'））;    }，5000）;}）;// 4。获取所有的JS文件夹到JS
gulp.task（'getAllJsFiles'，函数（）{    的setTimeout（函数（）{        gulp.src（'SRC /应用/ ** / ** / *。JS'）
            .pipe（cachebust.resources（））
            .pipe（gulp.dest（'SRC /应用/ JS /'））    }，8000）;}）;gulp.task（默认，['deleteStyle'，'addStyles'，'injectStyle'，'getAllJsFiles']）;


解决方案

有是，正是你正在寻找没有一个很好的示例应用程序angular2：的角2号种子。
开始看的时候运行以下命令做了什么：

  NPM运行build.prod

，并按照相应的任务，一饮而尽逻辑，看看它是如何完成的。

希望这有助于。

How do I uglify my AngularJS 2 Typescript app files and wire up for a production release using Gulp?

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.

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.

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

Thank you in advance.

This is my current index file:

<!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>

This is my current gulp file:

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']);

解决方案

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

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

Hope this helps.

这篇关于我怎么丑化我AngularJS 2打字稿的应用程序文件和线材为使用咕嘟咕嘟一个产能释放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
JavaScript最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆