将 Yeoman/Brunch 工具与混合 Django/Backbone 应用程序一起使用？

Question

我正在构建一个混合 Web 应用程序，其中 Django 在后端，Backbone 在前端。

结构如下：我在Django模板中生成所有HTML，使用request.is_ajax决定返回哪些模板，根据需要使用Backbone拉入HTML（我这样做是因为我想支持非JavaScript用户）。

无论如何，我的问题是这个。随着我的 JavaScript 代码变得越来越复杂，我希望能够自动执行以下操作：

• 异步 JavaScript 加载
• 连接和缩小 CSS 文件
• 连接和缩小 JavaScript 文件
• JS-linting

我不太担心图像优化或包管理。这可能与我的设置有关吗？目前它是一个标准的 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 等 - 因此寻找一个工具。也许我应该只写一个shell脚本:)

Answer 1

我可以建议从简单的早午餐开始。 Brunch 比 grunt 更简单，因为它的插件开箱即用，无需编写 500 行代码 grunt 文件。它也更快，您的应用程序的重新编译将立即完成。

你的设置应该是这样的

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 skeletons，它们类似于基本样板。选择任何一个，然后使用brunch new --skeleton <url>，使用brunch watch --server 启动brunch watcher，你就准备好了。当您想要部署您的应用程序时，只需使用 brunch build --optimize 构建内容即可自动缩小文件。

Answer 2

我可以建议从简单的咕噜声开始。有满足您所有需求的繁重任务：

• grunt-contrib-usemin 将用优化的版本替换对原始文件的引用
• grunt-contrib-uglify 会缩小你的 JavaScript
• grunt-contrib-mincss 会缩小你的 CSS
• grunt-contrib-jshint 在你的 JavaScript 文件上运行 jshint
• 使用 requireJs 异步加载您的文件，并在需要时使用 grunt-contrib-requirejs 将文件编译成一个文件