Рабочий процесс разработки на фронте с угловыми и грунт

Я хотел знать, как организовывается рабочий процесс разработки, когда мы используем HTML 5 и angularjs.

Мы используем задний конец java Jetty (не может быть изменен), и мы хотим разоблачить остающиеся сервисы, которые могут потреблять угловые js.

С angularjs случается так, что на главной странице должно быть много js файлов, большинство из которых являются специфичными для приложения, мы планируем разделить приложение логически в js файлах.

Итак, как бы вы порекомендовали иметь рабочий процесс разработки переднего плана?, чтобы избежать обработки большого количества разных js файлов, коллега предложил использовать мини-js файлы с помощью grunt.js, однако после его минимизации становится трудно отлаживать то же самое из моей IDE...

Также мы должны использовать minification во время разработки, может ли это быть перенесено на сцену непосредственно перед развертыванием или тому подобное, поэтому во время разработки мы используем unminified js файлы, но уменьшаем их для выпуска?

Если это возможно, просьба также предложить, как обрабатывать импорт script в index.html

В основном мы новичок в этом подходе к разработке, до недавнего времени мы использовали JSF для наших представлений, однако теперь мы хотим проверить библиотеки на основе JS и посмотреть, могут ли они повысить производительность.

Ответы

Ответ 1

Отличные вопросы. Моя команда столкнулась с этими проблемами. То, что вы хотите познакомиться, - это нотация объектов Grunt.js. Вы можете делать такие вещи, как:

thetask: {
  dev: {
    src: [
      ['build/_compile','build/development/**']
    ]
  },
  prod: {
    src: [
      ['build/_compile','build/production/**']
    ]
  },
},

grunt.registerTask('package:dev',['thetask:dev']);
grunt.registerTask('package:prod',['thetast:prod']); 

~# grunt package:dev

"С помощью angularjs так бывает, что на главной странице должно быть много js файлов, большинство из которых являются специфичными для приложения, мы планируем разделить приложение логически в js файлах".

Взгляните на grunt-html-build. Вы можете динамически включать файлы на основе правил в вашем файле grunt, например:

htmlbuild: {
    dev: {
        src: 'app/index.html',
        dest: 'build/development',
        options: {
            styles: {
                bundle: [ 
                    'build/development/css/app.css',
                ]
            },
            scripts: {
                bundle: [
                    // Bundle order can be acheived with globbing patterns.
                    // See: https://github.com/gruntjs/grunt/wiki/Configuring-tasks#globbing-patterns
                    'build/development/js/angular.js',
                    'build/development/js/angular-resource.js',
                    'build/development/js/nginfinitescroll.js',
                    'build/development/js/*.js',            
                ]
            },
        }
    },
    prod: {
        src: 'app/index.html',
        dest: 'build/production',
        options: {
            styles: {
                bundle: [ 
                    'build/production/css/app.css',
                ]
            },
            scripts: {
                bundle: [
                    'build/production/js/app.js',            
                ]
            },
        }
    },
},

И затем в вашем индексе:

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Playground 3</title>
<!-- build:style bundle -->
<!-- /build -->
</head>
<body>
<div ng-include src="'/views/global.navbar.html'"></div>
<div ng-view class="container"></div>
<div ng-include src="'/views/global.footer.html'"></div>
<!-- build:script bundle -->
<!-- /build -->
</body>
</html>

"Также мы должны использовать minification во время разработки, может ли это быть перенесено на сцену непосредственно перед развертыванием или тому подобное, поэтому во время разработки мы используем unminified js файлы, но уменьшаем их для выпуска?"

Будет ли еще одна задача выбрать для включения в вашу сборку:

grunt.registerTask('package:dev',['thetask:dev']);
grunt.registerTask('package:prod',['thetast:prod','concat:prod','minify:prod']);