I have a set of css files which I use in almost all projects.
I would like to create a gem which has a generator inside it.
I managed to write some code using the tutorial given here http://guides.rubyonrails.org/generators.html
However i am not sure about how to move this to a gem and use a command like device install ....
There are actually two ways of doing this (and both involve a Rails Engine afaik).
You create a engine that contains a generator for your file
You create a engine that bundles the CSS file so you can require it without having it present in your code repository. (Similar to the jQuery gem).
To create an engine just follow this guide: http://edgeguides.rubyonrails.org/engines.html.
Just without the mountable option and anything you put inside your app/assets/stylesheet directory will be available through require inside your CSS manifest.
The relevant part in the guide is in 6.4 besides the general boilerplate setup you have to do.
For a generateor the same applies, you just have to put the generator in the generators directory as you would with the app and can then run it from there with the engine prefix.
Related
I'm a bit new to Symfony and I'm don't know what to use for my static file management. I have read about Assets component and the Assetics bundle.
I know that Assets just includes the files and Assetics is a bit smarter as it can combine files and compress images. But I already use compass to minify and combine the css files so therefore Assetics is not really required.
Version control so the url of the static files change to by pass browser cache, is done by both.
Assetics is removed from 2.8 or higher, does this mean it is not best practice anymore?
I need to generate urls on three places:
Twig -> Easy to do with both
Controller -> Found only a way to do this with Assets
In css files -> Believe it is with both not possible
Wat would be the best to use in my case, any advise?
Assetic can be seen as a way to easily apply filters and compile your assets. The asset component basically is used to manage URL generation. As you said, both nicely are integrated in Twig via extensions, and controllers via the services.
Our application uses compass too, but Assetic makes sure that the compiling happens at the right moment without the need of compass watch at the commandline.
Think most of your questions are answered on:
http://symfony.com/doc/current/cookbook/assetic/asset_management.html
and
http://symfony.com/doc/current/components/asset/introduction.html
I've been using the RjFrontendBundle to run the front-end CSS/JS build, and also copy other static content into place from Bower/NPM/local sources. It provides a VersionStrategyInterface for the Assets component that creates, and uses unique filenames in production (renaming the files with an embedded hash, via the GulpJS rev-all package). In dev, it uses the normal filename.
Within CSS files, you can still reference CSS/JS, via a url() function, and the pipeline will rename them appropriately in dev and live.
The GulpJS build tool is used to minify and otherwise prepare the plain files. It comes with a setup console command to build the initial gulpfile.js and can also watch and rebuild files, updating the browser as they are changed, which helps with front-end development workflow.
The trend is to use standalone front end tools such as gulp/grunt/sass instead of assetic. The reasons are (probably) as follows:
gulp / grunt are independent from the framework, providing the same workflow for the front end guy no matter what underlying framework is used for the backend.
assetic has a different workflow than most of the modern tools. It assumes that you will write your script/css includes in the templates. Migrating from assetic to gulp could be a pain for large project.
as your project grows, assetic can become kind of slowish... As that happens, you will stop pulling your assets from the controller and start generating them the way gulp or grunt does. In this scenario, gulp and grunt are just better tools.
assetic lacks some important features, such as including processed assets into HTML code (inline). Because of the way assetic works (twig tags), it might be difficult to overcome this.
As for generating the URLs: assets are just files in the filesystem. Write a function or twig extension to generate URLs to those files.
I would like to ask how to use .less files in a Rails application if they are placed under assets but in a separate folder (let's call the folder "myless") from stylesheets. Another way to term this is that the myless folder would be side by side the folders, "images", "javascript" and "stylesheets" which are under the assets folder.
How do I import them to application.css or to a .CSS file? What lines of code would I use?
Do I have to add a method in environment.rb?
What gems do I have to use?
Any insight would be superb. Note that I am fairly new to Rails and are studying different tutorials on it. The different implementations in different versions of Rails is confusing me and there's not really a clear tutorial I can find online. I am currently trying to implement a bootstrap template, this is why I ask this question. I got the JavaScript and the CSS down but realized that the template uses .less files. Help?
You can enable your app to support LESS by including the appropriate gem(s):
gem 'therubyracer'
gem 'less-rails'
Then run bundle install. Assuming you have the appropriate stylesheets included in your stylesheets manifest, you should be good to go!
There's also the rails-less-bootstrap gem if you want a simpler way of including Bootstrap in your project.
Note: it's a good idea to keep your stylesheets together. Instead of having the myless directory be on the same level as images, javascripts, and stylesheets, you should consider moving it inside of your stylesheets directory.
Hope it helps!
I'm using the accordion, tooltips and transition components of UI Bootstrap.
I can create a custom build with the online tool on the UI Bootstrap website, which will create a minified and non-minified JS file containing only the components I selected, without overhead.
However, I don't want to use the online tool to compile my custom version of UI Bootstrap, instead I want to compile my own version locally, preferably using the tools I already use; Bower, Grunt and NPM.
So my question: How can I create my own version of UI Bootstrap locally?
bower install angular-ui-bootstrap, and then calling Grunt build in bower_components/angular-ui-bootstrap creates a UI Bootstrap build that includes all modules, there's probably a way to do the same with only a subset of the modules, but I could not figure this out.
It can be done by using the following command
grunt build:moduleName1:moduleName2:moduleName3....:moduleNameN
For example if you require the build to contain only tabs and buttons module , then the grunt command will be like
grunt build:tabs:buttons
The generated files will be present in dist folder
For the list of module names , check all folder names in src folder
The documentation for this is sparse , but if you check the Gruntfile.js , where they register the build task , they mention about how to build modules selectively
It is not as easy as I expected (and as it should be).
Take a look at the Gruntfile.js of the project. You will see that they do quite a lot. Converting HTML and CSS to JS, concating all the scripts in such way they are loadable by others. Moreover the file is quite difficult for orientation; it even includes custom tasks.
To mimic its behaviour I suggest this: Download it via Bower as you normally do. Copy its node dependecies to your package.json dependencies. Then copy the Gruntfile.js, change he routes, and try deleting some parts of the code until you reach a point when you cannot remove more lines without breaking it. It is not a nice way, it should be however successful.
If one had a lot of time, the build script is a good candidate for a deep refactoring. Moving custom tasks to standalone files (or projects), documenting the flow, and maybe implementing standard tasks for some steps (e.g. CSS minification).
I am working on a rails app and I would like to include some custom css files inside my rails application. I would like to separate out the css from bootstrap and the css that I wrote. Could I just put the custom css files inside vendor/assets/bower_components folder in my own css folder?
Is there anything else that I need to do for my css files to be picked up?
There are several ways you can achieve bower functionality in a Rails application.
Although having said that, I'm not sure about your wanting to use it on your custom.css file. The file itself will work just as well if you keep it in your app/assets/stylesheets folder, which will concatenate it to the asset pipeline
Bower-Rails
You'll may wish to consider using bower-rails, which seems to just give you the ability to use bower within your Rails app. This seems to be specifically for helping you keep your dependencies up to date:
Dependency file is bower.json in Rails root dir or Bowerfile if you
use DSL. Check out changelog for the latest changes and releases.
RailsAssets
Another amazing piece of functionality we found recently is "RailsAssets"
This works really well (we use it in production), as it keeps your dependent assets completely up to date. You can use it very simply:
#Gemfile
source https://rails-assets.org
gem 'rails-assets-BOWER_PACKAGE_NAME'
#app/assets/javascripts/application.js
//= require BOWER_PACKAGE_NAME
When running bundle update, this will then give you the ability to update your assets in line with your app!
Can someone outline some step by step instructions on how to set KSS up on my local computer?
I've been reading a lot of articles and none of them show a working demo. And they also assume I'm a ruby expert.
I'm expecting to see an html page and some sort of auto-generated documentation page.
I've installed and used gems before but I am by no means an expert. So assume I'm a total noob.
Assume I have the following folder structure:
C:Projects/MySite
index.html
sass
css
js
I did this:
gem install kss
I get confused here though:
styleguide = Kss::Parser.new("#{RACK_ROOT}public/stylesheets")
KSS doesn't have a native outputer. The example that confused you should be run in an Ruby interpretive shell (irb for example, which is installed by default with ruby).
So, go to your command line, type irb, and then type that line into the resulting shell, replacing "#{RACK_ROOT}public/stylesheets" with "C:/Projects/MySite/css"
If you want a nice navigable web page, see the example Sinatra app.