如何使用JavaScript的minified的？ [英] How to use minified javascript?

问题描述

我有一个咕噜任务Concat的和我所有的javascript文件再压缩成一个单一的文件以及JavaScript文件是DIST文件夹中。 DIST /＆LT;％= pkg.name％> min.js'

Gruntfile.js

  module.exports =功能（呼噜声）{
    grunt.initConfig（{
        PKG：grunt.file.readJSON（的package.json），
        CONCAT：{
            选项​​：{
                分隔器： ';'
            }，
            距：{
                SRC：['。钢骨混凝土/主/资源/应用/ JS / ** / * JS'，
                    的src / main /资源/应用/配置/ *。JS'，
                    的src / main /资源/应用程序/应用程序/ JS']，
                DEST：DIST /＆LT;％= pkg.name％GT;的.js
            }
        }，
        丑化：{
            选项​​：{
                横幅：/ *！ ＆所述;％= pkg.name％GT; ＆LT;％= grunt.template.today（DD-MM-YYYY）％GT; * / \\ n'
            }，
            距：{
                文件：{
                    的src / main /资源/应用/距离/＆LT;％= pkg.name％GT; .min.js'：'＆LT;％= concat.dist.dest％GT;']
                }
            }
        }
    }）;
    grunt.loadNpmTasks（'咕噜-的contrib-CONCAT'）;
    grunt.loadNpmTasks（'咕噜-的contrib-丑化'）;
    grunt.registerTask（默认，[CONCAT，丑化]）;
};
 

现在，我该如何使用javscript这个minified的版本？此外，我的code点我的index.html切入点，以非缩小的版本。

的index.html

 ＆LT;格UI画面/＆GT;
＆LT;脚本数据主要=配置/要求-conf的SRC =供应商/ requirejs / require.js＆GT;＆LT; / SCRIPT＆GT;
 

解决方案

您可以从 HTTPS使用usemin ：//www.npmjs.com/package/grunt-usemin 。 Usemin，与其他任务

• CONCAT


• 丑化


• cssmin


• filerev

能来缩小所有的JS和CSS在一个单一的文件。你只需要添加一个版本：JS，你可以在下面看到片段：

\r

\r

＆LT; - 编译：JS SCLogic.min.js - ＆GT;\r
        ＆LT;！ - 加载应用程序的主脚本 - ＆GT;\r
        ＆LT;脚本SRC =应用程序/ app.js＆GT;＆LT; / SCRIPT＆GT;\r
        ＆LT;！ - 加载的服务 - ＆GT;\r
        ＆LT;脚本SRC =应用程序/服务/ authInterceptorService.js＆GT;＆LT; / SCRIPT＆GT;\r
        ＆LT;脚本SRC =应用程序/服务/ authService.js＆GT;＆LT; / SCRIPT＆GT;\r
        ＆LT;脚本SRC =应用程序/服务/ blablaService.js＆GT;＆LT; / SCRIPT＆GT;\r
       \r
\r
        ＆LT;！ - 负载控制器 - ＆GT;\r
        ＆LT;脚本SRC =应用程序/控制器/ indexController.js＆GT;＆LT; / SCRIPT＆GT;\r
        ＆LT;脚本SRC =应用程序/控制器/ homeController.js＆GT;＆LT; / SCRIPT＆GT;\r
        ＆LT;脚本SRC =应用程序/控制器/ loginController.js＆GT;＆LT; / SCRIPT＆GT;\r
        ＆LT;脚本SRC =应用程序/控制器/ blablaController.js＆GT;＆LT; / SCRIPT＆GT;\r
        \r
        ＆LT;脚本SRC =应用程序/指令/ validNumber.js＆GT;＆LT; / SCRIPT＆GT;\r
       \r
        ＆LT;脚本SRC =应用程序/控制器/角locale_es-es.js＆GT;＆LT; / SCRIPT＆GT;\r
       \r
        ＆LT;！ - endbuild - ＆GT;

\r

\r

\r

I have a grunt tasks to concat and minify all my javascript files into one single file and the javascript file is in dist folder. "dist/<%= pkg.name %>.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"]);
};

Now, how can I use this minified version of javscript? Moreover, my index.html entry point of my code points to the non-minified version.

"index.html"

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

解决方案

You could use usemin from https://www.npmjs.com/package/grunt-usemin. Usemin, with other tasks as

• concat
• uglify
• cssmin
• filerev

is able to minify all js and css in one single file. You only need to add a build:js as you can see in snippet below:

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

这篇关于如何使用JavaScript的minified的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！