Добавить хрюкать в существующее приложение, основанное на AngularJS

Question

У меня есть приложение AngularJS, которое было создано без yeo, grunt, bower и т. Д. В настоящее время это делается через Rails. Но из-за некоторых проблем мы находимся в процессе отделения приложения AngularJS от Rails и использования Rails исключительно как API.

• Как интегрировать grunt в существующее приложение? Возможно ли это.
• Pit-falls?

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

• Есть ли какая-либо конкретная структура папок, необходимая для реализации grunt?

Основные вещи, которые нужно сделать:

• источник Сжатие файлов в один (контроллеры в 1 контроллер и т.д.)
• Минимизировать

Текущий gruntFile

module.exports = function(grunt) { 
    require('load-grunt-tasks')(grunt); 

    grunt.initConfig({ 
     pkg: grunt.file.readJSON("package.json"), 


     clean: ['js/dist/**/*.js'], 
     concat: { 
      controllers: { 
       src: ['js/controllers/*.js'], 
       dest: 'js/dist/controller.js' 
      }, 
      models: { 
       src: ['js/services/*.js'], 
       dest: 'js/dist/service.js' 
      } 
     }, 
     uglify: { 
      options: { 
       mangle: false 
      }, 
      my_target: { 
       files: { 
        'js/dist/controller.min.js': ['js/dist/controller.js'], 
        'js/dist/service.min.js': ['js/dist/service.js'], 
        'js/dist/filters.min.js': ['js/filters/filters.js'], 
        'js/dist/directives.min.js': ['js/directives/custom.js'], 
        'js/dist/app.min.js': ['js/app.js'] 
       } 
      } 
     }, 
     imagemin: { 
      dynamic: { 
       files: [{ 
        expand: true, 
        cwd: 'assets/images/', 
        src: ['**/*.{png,jpg,gif}'], 
        dest: 'assets/images/' 
       }] 
      } 
     } 
    }); 

    grunt.registerTask('default', ['clean','concat','uglify']); 
}; 

Как начать? Извините, если это кажется очевидным, но это будет первый раз с хрюканьем и, следовательно, хотел бы получить правильный совет.

Answer 1

Неважно, насколько далеко вы находитесь в своем проекте. Вы можете использовать grunt для создания своего приложения.

То, что я обычно делаю чист и скопировать все первый в папку сборки/Dist примерно так:

clean: { 
    all: { 
     src: ['build'] 
    }, 
    old: { 
     src: ['build/public/app.js'] 
    } 
}, 

copy: { 
    client: { 
     files: [ 
      { 
       expand: true, 
       cwd: 'public/', 
       src: ['**', '!**javascripts/**', '!**stylesheets/**', '!**views/**'], 
       dest: 'build/public', 
       filter: 'isFile', 
       flatten: false 
      } 
     ] 
    }, 
    vendor: { 
     files: [ 
      { 
       expand: true, 
       src: ['public/javascripts/vendor/*'], 
       dest: 'build/public/javascripts/vendor/', 
       filter: 'isFile', 
       flatten: true 
      } 
     ] 
    }, 
    server: { 
     files: [ 
      { 
       expand: true, 
       src: ['**', '!public/**', '!Gruntfile.js', '!**nbproject/**', '!access.log', '!files/**/*'], 
       dest: 'build/', 
       filter: 'isFile' 
      } 
     ] 
    } 
}, 

Обратите внимание на !**nbproject/**, если вы используете Netbeans, как IDE, чтобы исключить эту папку. В этом конкретном проекте у меня много файлов (вложений), поэтому я также исключаю папку с файлами. Вы, вероятно, не хотите включать файлы журнала.

Затем я конкатенации нужных файлов и уродовать вывод:

concat: { 
    options: { 
     separator: ';' 
    }, 
    dist: { 
     src: ['public/javascripts/app.js', 'public/javascripts/controllers/*', 'public/javascripts/directives/*', 'public/javascripts/services/*'], 
     dest: 'build/public/app.js' 
    } 
}, 
uglify: { 
    options: { 
     banner: '/*! <%= pkg.name %> Version : <%= pkg.version %> \n * Build date: <%= grunt.template.today("dd-mm-yyyy") %>\n */\n', 
    }, 
    dist: { 
     files: [ 
      { 
       'build/public/app.min.js': ['build/public/app.js'] 
      } 
     ] 
    } 
}, 

Я хотел бы добавить баннер в файл, в том числе версии, дата и т.д. Конечно, если вы хотите, вы можете также Минимизировать вы HTML и CSS.

Не забывайте загружать свои задачи, например. grunt.loadNpmTasks('grunt-contrib-clean');.

Вы можете интегрировать это в любое приложение, новое или далеко в разработке.