如何使用缩小的javascript？答案

【问题标题】：How to use minified javascript?如何使用缩小的javascript？
【发布时间】：2016-02-01 22:15:47
【问题描述】：

我有一个繁重的任务将我所有的 javascript 文件合并并缩小到一个文件中，并且 javascript 文件位于 dist 文件夹中。 "dist/.min.js'"

“Gruntfile.js”

module.exports = function (grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON("package.json"),
        concat: {
            options: {
                separator: ';'
            },
            dist: {
                src: ['src/main/resources/app/js/**/*.js',
                    'src/main/resources/app/config/*.js',
                    'src/main/resources/app/app/js'],
                dest: 'dist/<%= pkg.name %>.js'
            }
        },
        uglify: {
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
            },
            dist: {
                files: {
                    'src/main/resources/app/dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
                }
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.registerTask("default", ["concat", "uglify"]);
};

现在，我该如何使用这个精简版的 javscript？此外，我的代码的 index.html 入口点指向非缩小版本。

“index.html”

<div ui-view/>
<script data-main="config/require-conf" src="vendor/requirejs/require.js"></script>

【问题讨论】：

您可以像使用任何其他 JavaScript 文件一样使用它。 “此外，我的代码的 index.html 入口点指向非缩小版本。” 它应该指向缩小版本。
@FelixKling 所以，如果我的所有 javascript 文件都有一个目录结构，我必须保留目录结构并将缩小的 javascript 文件放在相应的目录位置，以便我可以指向那些缩小的版本。我说的对吗？
只要将文件加载到 HTML 文件中，放在哪里都没有关系。包含缩小的 JS 代码的文件确实没有什么特别之处。
@FelixKling 我正在寻找类似stackoverflow.com/questions/22045950/… 的东西。我想我的问题并不清楚。但是，谢谢你的回答。我应用了它，我的问题得到了解决。

标签： javascript angularjs gruntjs minify grunt-contrib-uglify

【解决方案1】：

您可以使用 https://www.npmjs.com/package/grunt-usemin 中的 usemin。 Usemin，其他任务为

连续
丑化
cssmin
文件更新

能够将所有 js 和 css 压缩到一个文件中。您只需要添加一个 build:js 即可，如下面的 sn-p 所示：

<!-- build:js SCLogic.min.js -->
        <!-- Load app main script -->
        <script src="app/app.js"></script>
        <!-- Load services -->
        <script src="app/services/authInterceptorService.js"></script>
        <script src="app/services/authService.js"></script>
        <script src="app/services/blablaService.js"></script>
       

        <!-- Load controllers -->
        <script src="app/controllers/indexController.js"></script>
        <script src="app/controllers/homeController.js"></script>
        <script src="app/controllers/loginController.js"></script>
        <script src="app/controllers/blablaController.js"></script>
        
        <script src="app/directives/validNumber.js"></script>
       
        <script src="app/controllers/angular-locale_es-es.js"></script>
       
        <!-- endbuild -->

【讨论】：

"grunt-usemin 正在进行一些重大开发以解决一长串问题。由于它们可能与 master 中断，因此它们被合并到 dev 分支中。"
@would_like_to_be_anon 你是对的，但它在大多数情况下都有效。我用过，效果很好。

【解决方案2】：

你可以按正常方式包含 js 文件。

<script src="path to the minified file"></script>

在您的 index.html 中。缩小文件就像一个普通的 JS 文件。它的作用是：

它将所有提到的JS文件合并到一个文件中。
然后它会缩小它，即它会删除空格并自动更改变量名称。
这样做的好处是您将拥有一个较小的文件和一个从浏览器发出的 http 请求，这将帮助您以更快的速度加载页面。

【讨论】：