Grunt and Rails - ruby-on-rails

I'm working on using a Grunt workflow to manage my assets in my Rails app rather than Sprockets.
So far, I have my apps JS and CSS both being concatenated and minified into public/assets/javascripts/application.js and public/assets/stylesheets/application.css respectively.
And also have my Bower components JS and CSS being concatenated and minified into public/assets/javascripts/vendor.js and public/assets/stylesheets/vendor.css respectively.
Fonts and Images from Bower components are then copied into public/assets/(images|fonts).
This is all well and good but now I need the references to fonts/images within those files to be updated to reflect their new location.
I have looked at cssmin and yes it rewrites file references but I cannot get the file path to change depending upon the type of file being referenced.
Any ideas on how I can do this?
Also, I ahve been reading about Grunt plugins which can read your view files and use those to minify and concatenate files and update the and tags in the views for you.
Surely I can't do that in a Rails app? Is there a way I can deal with this in Rails?

This other StackOverflow post may be of help:
Integrate Grunt into Rails asset pipeline
The accepted answer recommends using the Half Pipe gem.
The second answer linked to a blog post about a Do-It Yourself solution: Goodbye, Sprockets! A Grunt-based Rails Asset Pipeline.
I haven't used either solution, but they are worth a try.

Related

How to deploy angulardart 5.2 properly for production?

on the angulardart official website, I can not find any docs related to production deployment. I prefer command line way, so far I find out I can do webdev build to generate a build/ directory. But there are still some more questions:
I want to clarify what files I should deploy to the production server. I think they should be favicon.ico, index.html, main.dart.js, styles.css 4 files, right?
Why does it generate .build.manifest, .packages, packages/? two files and one directory which contains many directories and files. They are just confusing me. This is for production. Why do I ever want to have those files? Should I write a deploy script to simply auto-remove them?
It seems the generated main.dart.js is a minimized js file. But why are there many useless newlines in it? How to get rid of those useless newlines properly by using angulardart way? I can do that with gulp, but I don't want to use gulp if dart can handle this.
How to minimize html and css files properly by using angulardart way? for example, index.html and styles.css. Again, I can do that with gulp, but I don't want to use gulp if dart can handle this.
Thank you very much for your help.
Here you can find some of official doc :
https://webdev.dartlang.org/angular/guide/deployment

Ruby on rails resource issue

I have a project that includes lots of js, css and png. I couldn't divide them into javascripts and stylesheets folders. For example I have plugin1 folder it includes js and css files and I want to keep them together in same folder. Could you help me?
If you want to use the rails assets pipeline Im nearly certain that you'll have to put the files into the correct location as described in the ruby guides. Rails will then pull all this together to create, for example, the js file. It would be, I imagine, a big job to change this set up.
I guess if your set on keeping the folders the same you'll just have to point to the JavaScript/CSS files the traditional way through the header/footer with links to the file locations.
The rails guides explain the asset pipeline pretty well, and are a good place to start digging around further.
Good luck!

Importing Node Modules in to Rails

I'm working with Jasmine. I spotted this handy looking library: https://github.com/JamieMason/Jasmine-Matchers and I thought its collection of customer matchers would help me a lot.
Problem is, it's loaded with files common to Node applications, such as JSHint, Grunt, travis.yml etc
The project I'm working on, that would love these matchers, is a Rails application. I've tried dropping them into my assets/javascripts and requiring in application.js, but obviously, life isn't that simple.
What is the correct way to install these files, and integrate them with Jasmine in a Rails context? Is Bower the tool for the job? If so, what's the right procedure to adding JS dependencies/integrating them off the bat?
Author of Jasmine-Matchers here, the only file you need to load into your test environment is this one https://github.com/JamieMason/Jasmine-Matchers/blob/master/dist/jasmine-matchers.js.
The other files are part of the development repo, I'll open an issue to have those excluded from npm/bower packages to save confusion.
You should be able to copy that file to your assets/javascripts directory, then embed it after Jasmine but before your tests.
Please comment if I've missed anything out here.
I was also trying to use Node modules inside my Rails application and the easiest way I found to achieve it was through browserify-rails gem.
The installation is pretty straightforward, just follow the getting started section and everything should be working. :-)

How does Rails and Ember integration work, do all the ember files get combined?

I'v seen some larger emberjs implementations like discourse: https://github.com/discourse/discourse/tree/master/app/assets/javascripts/discourse
Can someone explain to me how this gets integration into rails?
What happens behind the scenes when the asset gets compiled? To the files just get minified and merged or there is more to it?
You need to read about Asset Pipeline.
The directory you linked to above is included by the various require lines in app/assets/javascripts/main_include.js, which is itself included by app/assets/javascripts/application.js.erb.
The gem doing the heavy lifting (the one responsible for interpreting the require lines) is Sprockets.
What happens behind the scenes when the asset gets compiled? To the files just get minified and merged or there is more to it?
Between the asset pipeline docs and sprockets' docs, your very general question should be more than answered. In a nutshell, yes, the files are minified and merged, and yes there is a whole lot more to it.
In addition to reading about the Asset Pipeline and Sprockets (which handle JS minification, etc), also take a look at the ember-rails gem: https://github.com/emberjs/ember-rails
ember-rails allows you to include Ember.JS into your Rails 3.1+ application. The gem will also pre-compile your handlebars templates when building your asset pipeline. It includes development and production copies of Ember.

What's the difference between Rail's AssetTagHelper and Scott Becker's AssetPackager?

I want to compress all my js and css files for a project and bundle into one file (one js and one css file). Which one do you recommend for a Rails 3.0 out of http://api.rubyonrails.org/classes/ActionView/Helpers/AssetTagHelper.html and http://synthesis.sbecker.net/pages/asset_packager and why?
I recommend using Jammit from DocumentCloud (if you don't know DocumentCloud, they are behind some very good open source projects like Underscore.js, Backbone.js...) :
http://documentcloud.github.com/jammit/
See the docs for the features, it's very powerful...

Resources