Angular и Grunt
Я новичок в Grunt, и я пытаюсь преобразовать приложение Angular (на основе angular-seed), чтобы использовать его для CSS/JS concat/минификация. У меня есть файл index.html, который определяет файлы CSS и JS:
<!-- build:css css/myjmh.css -->
<link rel="stylesheet" href="lib/bootstrap/bootstrap.min.css"/>
<link rel="stylesheet" href="lib/font-awesome/font-awesome.min.css"/>
<link rel="stylesheet" href="lib/toaster/toaster.css"/>
<link rel="stylesheet" href="css/app.css"/>
<link rel="stylesheet" href="css/custom.css"/>
<link rel="stylesheet" href="css/responsive.css"/>
<!-- endbuild -->
...
<!-- build:js js/myjmh.min.js -->
<script src="lib/jquery/jquery-1.10.2.min.js"></script>
<script src="lib/bootstrap/bootstrap.min.js"></script>
<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular/angular-animate.min.js"></script>
<script src="lib/angular/angular-cookies.min.js"></script>
<script src="lib/angular/angular-resource.min.js"></script>
<script src="lib/angular/angular-route.min.js"></script>
<script src="lib/fastclick.min.js"></script>
<script src="lib/toaster/toaster.js"></script>
<script src="lib/webshim/modernizr.min.js"></script>
<script src="lib/webshim/polyfiller.min.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
<!-- endbuild -->
Я пытаюсь использовать grunt-usemin и его задачу useminPrepare, чтобы захватить эти значения из моего HTML.
Здесь мой Gruntfile.js:
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
clean: ["dist"],
copy: {
main: {
src: 'app/index.html',
dest: 'dist/index.html'
}
},
useminPrepare: {
html: 'app/index.html'
},
usemin: {
html: ['dist/index.html']
},
ngmin: {
dist: {
files: [
{
expand: true,
cwd: '.tmp/concat/js',
src: '*.js',
dest: '.tmp/concat/js'
}
]
}
}
});
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-ngmin');
grunt.loadNpmTasks('grunt-usemin');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', [
'copy', 'useminPrepare', 'concat', 'ngmin', 'uglify', 'cssmin', 'usemin'
]);
};
При всех этих настройках создается каталог "dist" со всеми артефактами, и все, кажется, генерируется/конкатенируется и правильно оценивается. Однако, когда я загружаю новую страницу в свой браузер, я получаю следующую ошибку:
Uncaught Error: [$injector:unpr] http://errors.angularjs.org/1.2.3/$injector/unpr?p0=aProvider%20%3C-%20a
Кажется, что Grunt делает что-то, что плохо работает с Angular. Любые идеи о том, что это может быть?
Ответы
Ответ 1
Я смог решить это, отключив mangling в uglify:
uglify: {
options: {
report: 'min',
mangle: false
}
}
Как вы могли заметить из моего Gruntfile.js, ngmin уже используется, и это, похоже, не помогает.
Найден ответ здесь: fooobar.com/questions/71706/...
Ответ 2
Вам нужно сделать одну из двух вещей:
Ответ 3
Если у вас есть те же проблемы с объявлениями, что и у меня, вы можете также использовать ng-annotate для достижения этого. Вот ссылка на github: https://github.com/mzgol/grunt-ng-annotate
Моя рабочая конфигурация:
ngAnnotate: {
options: {
singleQuotes: true,
regexp: '^(ng\n?[\\ ]+(.*)|(module.*))$'
},
prod: {
files: [{
expand: true,
src: 'dist/**/*.js'
}]
}
}
Используйте его внимательно, так как он будет изменять существующие файлы. Мое предположение заключается в том, что файлы в папке "dist" должны генерироваться Grunt и могут быть удалены в любое время.
Ответ 4
Как утверждали другие, кажется, что у вас есть проблема с минимизацией. Я вижу, что вы используете ngmin
. Но ngmin
может не работать, когда на него бросается файл со смешанными шаблонами. Я имею в виду, убедитесь, что все файлы, которые вы передаете в ngmin
, уже не имеют шаблона, защищенного от миниатюр.
Ответ 5
Mangle false не должно быть решением, на самом деле код не является дружественным к минимуму, но проблемы, которые у меня были, явно не описаны здесь, так они были:
1) "Убедитесь, что вы только определяете каждый модуль с синтаксисом angular.module(name, [требуется]) один раз по всему вашему проекту. Извлеките его для последующего использования с помощью angular.module(name)" - Я использовал это неправильно во многих местах, и он работал с mangle: false, break при установке mangle: true
2) Я использовал загрузочные модальные окна, указав контроллер экземпляра не как строку, я нашел решение здесь