Verwenden Yeoman/Brunch-Tools mit einer hybriden Django/Backbone-App?

Question

Ich baue eine hybride Webanwendung mit Django am Backend und Backbone am Frontend.

Die Struktur ist wie folgt: Ich generiere den gesamten HTML-Code in Django-Vorlagen, benutze request.is_ajax, um zu entscheiden, welche Templates zurückgegeben werden sollen, und benutze Backbone, um HTML nach Bedarf zu ziehen (ich tue dies, weil ich Nicht-JavaScript-Benutzer unterstützen möchte)).

Wie auch immer, meine Frage ist das. Da mein JavaScript-Code komplexer wird, würde Ich mag die folgenden Dinge zu tun, automatisch in der Lage sein:

Laden
• Asynchronous JavaScript
• Verketten und minifying JavaScript-Dateien
• JS
• Verketten und minifying CSS-Dateien -linting

Ich bin nicht zu besorgt über Bildoptimierung oder Paket-Management. Ist das mit dem Setup möglich, das ich habe? Derzeit ist es ein Standard Django App:

/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 

Ich bin nicht sicher, ob ich Yeoman (oder nur grunt) oder Brunch verwendet werden soll, oder wenn es ein einfacherer Weg. Was auch immer ich verwende, ich bin mir nicht sicher, ob es einfach in das Verzeichnis js fallen kann, oder ob der Speicherort der Vorlagen die Dinge komplizieren wird.

Zur Zeit kann ich require.js verwenden, um den JS asynchron zu laden, aber ich weiß nicht, wie man verkettet, fusselt usw. - also nach einem Werkzeug suchend. Vielleicht sollte ich nur ein Shell-Skript schreiben :)

Answer 1

Ich kann beraten, mit einfach Grunzen zu beginnen. Es gibt Grunzen Aufgabe für alle Bedürfnisse:

• grunt-contrib-usemin Willen ersetzt Verweise auf die Originaldateien mit optimierten vers
• grunt-contrib-uglify Ihre JavaScript
• grunt-contrib-mincss wird minify CSS
• grunt-contrib-jshint läuft jshint minify auf JavaScript-Dateien
• Verwenden Sie requireJs, um Ihre Dateien ansynchron und grunt-contrib-requirejs zu laden, um die Dateien bei Bedarf in eine Datei zu kompilieren

Answer 2

Ich kann empfehlen, mit einfach Brunch zu beginnen. Brunch ist einfacher als Grunzen, da seine Plug-Ins ohne Probleme funktionieren, ohne dass 500-Zeilen-Code-Gruntfiles geschrieben werden müssen. Es ist auch viel schneller, die Neukompilierung Ihrer App wird sofort durchgeführt.

Ihre Einrichtung wird wie folgt aussehen

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. 

neuen App zu erstellen, einen Blick auf brunch skeletons nehmen, die wie grundlegenden Textbausteine ​​sind. Wähle irgendeinen aus, dann benutze brunch new --skeleton <url>, starte den Brunch-Watcher mit brunch watch --server und schon bist du bereit. Wenn Sie Ihre App bereitstellen möchten, erstellen Sie einfach Dateien mit brunch build --optimize, wodurch Dateien automatisch verkleinert werden.