Sử dụng các công cụ Yeoman/Brunch với ứng dụng Django/Backbone lai?

Question

Tôi đang xây dựng một ứng dụng web lai với Django ở mặt sau và Backbone ở mặt trước.

Cấu trúc như sau: Tôi tạo tất cả HTML trong các mẫu Django, sử dụng request.is_ajax để quyết định mẫu nào cần trả về và sử dụng Backbone để lấy HTML khi cần.).

Dù sao thì, câu hỏi của tôi là vậy. Như mã JavaScript của tôi trở nên phức tạp hơn, tôi muốn để có thể làm những điều sau đây sẽ tự động:

• Asynchronous JavaScript tải
• Kết nối và rút gọn các file CSS
• Kết nối và rút gọn các file Javascript
• JS -linting

Tôi không quá lo lắng về việc tối ưu hóa hình ảnh hoặc quản lý gói. Điều này có thể thực hiện được với thiết lập của tôi không? Hiện nay nó là một ứng dụng tiêu chuẩn 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 

Tôi không chắc chắn nếu tôi nên sử dụng Yeoman (hoặc chỉ cần grunt) hoặc Brunch, hoặc nếu có một cách đơn giản hơn. Bất cứ điều gì tôi sử dụng, tôi không chắc chắn nếu chỉ có thể thả nó vào thư mục js, hoặc nếu vị trí của các mẫu sẽ làm phức tạp mọi thứ.

Hiện tại tôi biết cách sử dụng require.js để tải JS một cách không đồng bộ, nhưng tôi không biết cách nối, lint vv - do đó tìm kiếm công cụ. Có lẽ tôi chỉ nên viết một kịch bản shell :)

Answer 1

Tôi có thể tư vấn để bắt đầu chỉ đơn giản là grunt. Có nhiệm vụ grunt cho tất cả các nhu cầu của bạn:

• grunt-contrib-usemin sẽ thay thế tham chiếu đến tập tin gốc của bạn với vers tối ưu hóa
• grunt-contrib-uglify sẽ rút gọn của bạn
• grunt-contrib-mincss JavaScript sẽ rút gọn CSS của bạn
• grunt-contrib-jshint chạy jshint trên của bạn Các tệp JavaScript
• sử dụng requireJ để tải tệp của bạn một cách không đồng bộ và grunt-contrib-requirejs để biên dịch các tệp thành một tệp nếu cần

Answer 2

Tôi có thể tư vấn để bắt đầu bằng bữa nửa buổi đơn giản. Bữa ăn nửa buổi đơn giản hơn so với grunt, bởi vì plugin của nó hoạt động hợp lý out-of-box, mà không cần phải viết 500-line-of-code-gruntfiles. Nó cũng nhanh hơn nhiều, việc biên dịch lại ứng dụng của bạn sẽ được thực hiện ngay lập tức.

thiết lập của bạn sẽ trông như thế này

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. 

Để tạo ứng dụng mới, hãy xem brunch skeletons mà cũng giống như boilerplates cơ bản. Chọn bất kỳ, sau đó sử dụng brunch new --skeleton <url>, khởi chạy trình xem bữa sáng muộn với brunch watch --server và bạn đã sẵn sàng. Khi bạn muốn triển khai ứng dụng của mình, chỉ cần tạo công cụ với brunch build --optimize sẽ tự động thu nhỏ tệp.