使用Yeoman/Brunch工具和混合Django/Backbone应用程序？

Question

我正在构建一个混合Web应用程序,后端是Django,前端是Backbone.

结构如下:我在Django模板中生成所有HTML,用于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(或只是咕噜声)或早午餐,或者是否有更简单的方法.无论我使用什么,我不确定是否可以将其放入js目录,或者模板的位置是否会使事情变得复杂.

目前我知道如何使用require.js异步加载JS,但我不知道如何连接,lint等 - 因此寻找一个工具.也许我应该写一个shell脚本:)

Answer 1

我可以建议从简单的早午餐开始.早午餐比咕噜声更简单,因为它的插件开箱即用,而不需要编写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可自动缩小文件的内容.

Answer 2

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

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