11

我正在使用后端的 Django 和前端的 Backbone 构建一个混合 Web 应用程序。

结构如下：我在 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脚本:)

4

2 回答 2

8

我可以建议从简单的早午餐开始。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 new --skeleton <url>，启动早午餐观察者，brunch watch --server你就准备好了。当您想要部署您的应用程序时，只需构建brunch build --optimize将自动缩小文件的东西。

于 2013-02-21T04:37:16.800 回答
3

I can advice to start with simply grunt. There are grunt task for all your needs:

于 2013-02-20T20:04:26.747 回答