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

Using Yeoman/Brunch tools with a hybrid Django/Backbone app?

本文关键字：应用程序 混合 结合 Backbone Django Yeoman Brunch 工具      更新时间：2023-09-26

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

我可以建议从简单的早午餐开始。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构建一些东西，它会自动缩小文件。

我可以建议从咕哝开始。有满足您所有需求的艰巨任务：

  • grunt contrib usemin将用优化的vers替换对原始文件的引用
  • grunt contrib uglify将缩小您的JavaScript
  • 咕哝的contrib肉糜会缩小你的CSS
  • grunt contrib jshint在您的JavaScript文件上运行jshint
  • 如果需要，使用requireJs以异步方式加载文件，并使用grunt contrib requireJs将文件编译为一个文件
相关文章：