Использование инструментов Yeoman/Brunch с гибридным приложением Django/Backbone?

Я создаю гибридное веб-приложение с Django на задней панели и Backbone на передней панели.

Структура выглядит следующим образом: я генерирую все HTML файлы в шаблонах Django, использую request.is_ajax, чтобы решить, какие шаблоны возвращать, и использовать Backbone, чтобы потянуть в HTML по мере необходимости (я делаю это, потому что я хочу поддерживать не-JavaScript пользователей).

Во всяком случае, мой вопрос таков. Поскольку мой код JavaScript становится более сложным, я хотел бы иметь возможность делать следующие вещи автоматически:

  • Загрузка асинхронного JavaScript
  • Конкатенация и удаление файлов CSS
  • Конкатенация и минирование файлов JavaScript
  • JS-пыление

Я не слишком беспокоюсь об оптимизации изображений или управлении пакетами. Возможно ли это с настройкой, которую у меня есть? В настоящее время это стандартное приложение Django:

/media
  /js
    main.js <-- Backbone code is in here
    /plugins
      backbone.js
      underscore.js
  /css
    main.css 
    results.css
  /img
/myapp
  admin.py
  models.py
  views.py
/templates
  /myapp
    index.html <-- references to all JS and CSS files here

Я не уверен, что я должен использовать Yeoman (или просто grunt) или Brunch, или если есть более простой способ. Независимо от того, что я использую, я не уверен, могу ли просто поместить его в каталог js, или если расположение шаблонов усложнит ситуацию.

В настоящее время я знаю, как использовать require.js для загрузки JS асинхронно, но я не знаю, как конкатенировать, lint и т.д. - следовательно, ищет инструмент. Может быть, я должен просто написать оболочку script:)

Ответы

Ответ 1

Я могу посоветовать начать с просто бранч. Бранч проще, чем хрюкать, потому что его плагины работают разумно из коробки, без необходимости писать 500 строк кода-gruntfiles. Это также намного быстрее, перекомпиляция вашего приложения будет выполнена мгновенно.

Ваша установка будет выглядеть следующим образом

public/         # The directory with static files which is generated by brunch.
  app.js        # Ready to be served via webserver.
  app.css       # Don’t change it directly, just run `brunch watch --server`.
  assets/       # And then all changed files in your app dir will be compiled.
    images/

frontend/       # Main brunch application directory. Configurable, of course.
  app/          # Your code will reside here.
    assets/     # Static files that shall not be compiled
      images/   # will be just copied to `public` dir.
    views/      # Create any subdirectories inside `app` dir.
      file-1.js # JS files will be automatically concatenated to one file.
    file-2.js   # They will be also usable as modules, like require('file-2').
    file-1.css  # CSS files will be automatically concatenated to one file.
    stuff.css   # JS and CSS files may be linted before concatenation.
    tpl.jade    # You may have pre-compiled to JS templates. Also with `require`.
  vendor/       # All third-party libraries should be put here. JS, CSS, anything.
    scripts/    # They will be included BEFORE your scripts automatically.
      backbone.js
      underscore.js
  package.json  # Contains all brunch plugins, like jshint-brunch, css-brunch.
  config.coffee # All params (you can concat to 2, 5, 10 files etc.)
                # are set via this config. Just simple, 15 lines-of-code config.

Чтобы создать новое приложение, взгляните на скелеты бранча, которые похожи на базовые шаблоны. Выберите любой, затем используйте brunch new --skeleton <url>, запускайте бранд-наблюдателя с brunch watch --server и вы готовы. Когда вы захотите развернуть свое приложение, просто создайте материал с помощью brunch build --optimize, который автоматически уменьшит файлы.

Ответ 2

Я могу посоветовать начать с просто хрюкать. Есть задача ворчать для всех ваших потребностей:

  • grunt-contrib-usemin заменит ссылки на ваши исходные файлы с оптимизированными версиями
  • grunt-contrib-uglify минимизирует ваш JavaScript
  • grunt-contrib-mincss будет минимизировать ваш CSS
  • grunt-contrib-jshint запускает jshint в ваших файлах JavaScript
  • используйте requireJs для загрузки ваших файлов ansynchronous и grunt-contrib-requirejs для компиляции файлов в один файл при необходимости