如何使用縮小的javascript？

Question

我有一個咕嚕任務來連接和縮小所有我的JavaScript文件到一個單一的文件和JavaScript文件是dist文件夾。 「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"]); 
}; 

現在，我該如何使用javscript的這種縮小的版本？而且，我的代碼的index.html入口點指向非縮小版本。

「的index.html」

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

Answer 1

你可以只包含JS文件的正常方式。

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

在您的index.html中。 縮小文件就像一個普通的JS文件。它所做的是：

1. 它會將所有提到的JS文件合併到一個文件中。
2. 它會縮小它，即它將刪除空格並自動更改變量名稱。
3. 這樣做的好處是你將有一個較小的文件和一個來自你的瀏覽器的http請求，這將有助於你以更快的速度加載頁面。

Answer 2

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

• CONCAT
• 醜化
• cssmin
• filerev

能夠來縮小所有的JS和CSS在一個單一的文件。你只需要添加一個編譯：JS你可以在下面的摘要中看到：

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