问题 使用Yeoman / Brunch工具和混合Django / Backbone应用程序?


我正在构建一个混合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

我不确定我是否应该使用 约曼 (要不就 咕噜) 要么 早午餐,或者如果有更简单的方法。无论我使用什么,我都不确定是否可以将其放入 js 目录,或者如果模板的位置会使事情复杂化。

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


10183
2018-02-20 16:55


起源



答案:


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


8
2018-02-21 04:37





我可以建议从简单的咕噜声开始。满足您的所有需求是一项艰巨的任务:


3
2018-02-20 20:04