How to organize css and js?

Asked

Viewed 1,396 times

3

I bought a free template and am applying on my main blog page. I created an admin for this blog and I’m wondering if my Assets organization is correct. Follow the structure:

app/Assets/Avascripts:
admin
template
admin.js //calls dir admin, works normally
application js

And the call inside the application.js is so:

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require template/js/jquery.poptrox.min.js
//= require template/js/skel.min.js
//= require template/js/init.js

app/Assets/stylesheets:
admin
template
admin.css //calls dir admin, works normally
application css.

And the call inside the application.css is like this:

*= require template/css/skel.css
*= require template/css/style.css
*= require template/css/style-xlarge.css
*= require_self

and in the layout application.html.haml I reference application.css and application.js. My question is if this organization is the correct pq was reading in the guide and I see that you have the public folder and vendor for css and js but I don’t know when to use.

ruby-on-rails

2 answers

1


Rails used to put images, css and javascript in public really, but it is currently advised to use the Assets folder for these files:

In Previous versions of Rails, all Assets Were Located in subdirectories of public such as images, Javascripts and stylesheets.

Documentation

The organization inside the Assets folder can be as follows (as described in the documentation sent in 2.2 Asset Organization)

app/Assets for the application’s own Assets.

lib/Assets to their own libraries, and that do not fit the scope of the application or libraries shared with another application

vendor/Assets is for Assets belonging to external entities such as javascript plugins and css frameworks. codes that make references to other files here need to be adapted to use helpers as asset_path.

It is worth saying the Osets placed in public still work and are served as static files depending on your settings. The Assets files are automatically served, after pre-compiled, in public/Assets when in production.

In Production, Rails precompiles These files to public/Assets by default. The Precompiled copies are then served as Static Assets by the web server. The files in app/Assets are Never served directly in Production.

  • Thanks for the feedback gave to understand how it works. But the call in the application files are the right way?

  • I see no reason to be wrong, normally I would use the css/scss and js/coffee generated by Rails for the same controllers, you call each file directly in html?

  • In HTML I only call the application.JS and the application.CSS or I have not changed anything, I left in the same way that Rails created.

  • The ideal is not to call any file directly, just use the javascript_include_tag :application and stylesheet_link_tag :application and let Rails control which files to add to which pages

0

I don’t know if this will answer your question, but it will serve as a suggestion.

Currently I use Grunt Js (http://gruntjs.com/) to: Minificar (css, javascript); concatenate several files into only one; "compile jquery code".

It has several plugins (http://gruntjs.com/plugins), that give you the possibility to create various forms of automation.

It works based on the Nodejs (http://nodejs.org/).

One step at a time in English, http://www.voltsdigital.com.br/labs/gruntjs-por-onde-comecar/ , that teaches where to start and gives some tips plugins and configuration.

  • I know Grunt. But my doubt is about the organization within Rails. But thanks for the feedback.

Browser other questions tagged ruby-on-rails

You are not signed in. Login or sign up in order to post.