Как использовать миниатюрный javascript?

У меня есть grunt задачи для concat и минимизации всех моих файлов 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>

Ответы

Ответ 1

Вы можете использовать usemin из https://www.npmjs.com/package/grunt-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 -->

Ответ 2

Вы можете просто включить js файл обычным способом.

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

в вашем index.html. Мини файл похож на обычный JS файл. Что он делает:

  • Он объединит все упомянутые JS файлы в один файл.
  • Затем он будет минимизировать его, то есть он удалит пробелы и автоматически изменит имена переменных.
  • Преимущество этого заключается в том, что у вас будет файл меньшего размера и один HTTP-запрос, сделанный из вашего браузера, который поможет вам загрузить страницу с более высокой скоростью.