AngularJS结束,构建(缩小,连续,...)

时间:2014-11-28 20:39:25

标签: angularjs gruntjs gulp

我结束了我的Angular JS应用...... 现在怎么样?

我在index.html中有一个包含10个脚本src的应用程序,6 ng包含,... 所有这些都是http请求,并且具有相对大小......

有一些特殊的方式或命令用于"编译/构建/生成/部署"结束应用代码?所有包含,缩小,...

或者我必须用grunt / gulp做这个:(?

<!DOCTYPE html>
<!--[if lt IE 7]>      <html lang="en" ng-app="Bit2Card" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html lang="en" ng-app="Bit2Card" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html lang="en" ng-app="Bit2Card" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="Bit2Card" class="no-js"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>App</title>
    <meta name="description" content="Generate a credit card on fly with Bitcoins">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
    <link href="reset.css" rel="stylesheet">
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="app.css">
    <script src="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>

    <!--[if lt IE 7]>
    <p class="browsehappy">
        You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.
    </p>
    <![endif]-->

    <div id="app" ng-controller="appController" class="{{viewBack ? 'viewBack' : ''}}">

        <ng-include src="'partials/overlays/load.html'"></ng-include>
        <ng-include src="'partials/overlays/error.html'"></ng-include>
        <ng-include src="'partials/overlays/terms.html'"></ng-include>
        <ng-include src="'partials/overlays/qr.html'"></ng-include>
        <ng-include src="'partials/overlays/payout.html'"></ng-include>
        <ng-include src="'partials/overlays/restart.html'"></ng-include>

        <div id="flip">
            <div id="frontCard">
                <ng-include src="'partials/header.html'"></ng-include>
                <div id="panels">
                    <div id="select" class="panel{{panel === 1 ? ' visible' : ''}}" ng-include="'partials/panels/select.html'"></div>
                    <div id="pay" class="panel{{panel === 2 ? ' visible' : ''}}" ng-include="'partials/panels/pay.html'"></div>
                    <div id="get" class="panel{{panel === 3 ? ' visible' : ''}}" ng-include="'partials/panels/get.html'"></div>
                </div>
                <ng-include src="'partials/footer.html'"></ng-include>
            </div>
            <div id="backCard" ng-include="'partials/backside.html'"></div>
        </div>

    </div>

    <!--
    In production use:
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
    -->
    <script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
    <script type="text/javascript" src="bower_components/zeroclipboard/dist/ZeroClipboard.min.js"></script>
    <script type="text/javascript" src="bower_components/ng-clip/dest/ng-clip.min.js"></script>
    <script type="text/javascript" src="bower_components/qrcode/lib/qrcode.min.js"></script>
    <script type="text/javascript" src="bower_components/angular-qr/angular-qr.min.js"></script>
    <script type="text/javascript" src="bower_components/angular-translate/angular-translate.min.js"></script>
    <script type="text/javascript" src="bower_components/angular-translate-loader-static-files/angular-translate-loader-static-files.min.js"></script>
    <script type="text/javascript" src="scripts/lin2a.min.js"></script>
    <script type="text/javascript" src="scripts/app.js"></script>

</body>
</html>

1 个答案:

答案 0 :(得分:0)

我认为你应该看看:https://www.npmjs.org/package/gulp-html-replace。它将为您读取该html并在其中插入一个新的脚本标记,指向所有这些deps的捆绑版本。