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

Question

我正在構建一個混合Web應用程序，在後端使用Django，在前端使用Backbone。

結構如下：我在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，但我不知道如何連接，皮棉等 - 因此尋找一個工具。也許我應該只寫一個shell腳本:)

Answer 1

我可以建議從簡單的咕嚕開始。有咕嚕任務您的所有需求：

• grunt-contrib-usemin意志代替你原來的文件的引用與優化VERS
• grunt-contrib-uglify將壓縮JavaScript
• grunt-contrib-mincss會再壓縮你的CSS
• grunt-contrib-jshint運行在jshint您JavaScript文件
• 使用requireJs加載您的文件ansynchronous和grunt-contrib-requirejs將文件編譯成一個文件，如果需要

Answer 2

我可以建議從簡單的早午餐開始。 Brunch比咕嚕聲簡單得多，因爲它的插件工作合理，不需要寫500行代碼的gruntfiles。它也快得多，重新編譯你的應用程序將立即完成。

你的設置應是這樣的

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 skeletons這就像基本boilerplates。選擇任何，然後使用brunch new --skeleton <url>，與brunch watch --server啓動早午餐觀察，你準備好了。當你想部署你的應用程序時，只需使用brunch build --optimize即可自動縮小文件。