AngularJS 结束，构建（缩小、连接、...）答案

【问题标题】：End of AngularJS, Build (Minify, concat,...)AngularJS 结束，构建（缩小、连接、...）
【发布时间】：2015-01-27 12:33:13
【问题描述】：

我结束了我的 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>

【问题讨论】：

当你说“结束”时，你的意思是你完成了你的项目吗？
您必须按照您的建议使用 grunt/gulp。 Here is a neat Gruntfile.js that shows how to build your app
技术上你没有有使用 gulp/grunt，但它是迄今为止最简单的解决方案。您可以包含库并编写自己的构建脚本，这是我们以前（在古代）必须做的事情
谢谢，我很伤心，因为我需要的一切都明确地在索引文件中。 Will 必须成为我们在项目结束或想要部署版本时需要做的所有工具。例如读取索引文件或诸如 RequireJS 之类的标准。

标签： angularjs gruntjs gulp

【解决方案1】：

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

【讨论】：