Moritz Bruckner
Moritz Bruckner

Reputation: 37

Using Turbolinks without asset pipeline?

I am building a Rails 5 webapp around a premade HTML5 template. I would like to use Turbolinks as it would heavily complement the purposes of the application. However, I chose not to use the Rails asset pipeline because everything in the HTML/CSS files of the template is statically linked with absolute paths.

The turbolinks documentation specifies an entry to be made in the Javascript manifest. However, will it still work if nothing else is being processed by the asset pipeline?

Upvotes: 1

Views: 167

Answers (1)

Fatih
Fatih

Reputation: 308

You should strive to minify your assets. It's benefits easily surpass the hurdle it presents. I have been in similar situation 2 times (build rails 4 app with big template, namely metronic). In the first project I didn't bother, after 2 years I still pay for that wrong decision. In the second project I wrote a rake task that combs throught the css files and converts them to scss files and fixes image paths.

namespace :metronic do
  desc "Metronic template css yollarını rails asset pipeline'a uydur"
  task import: :environment do |t|
    assets_path= Pathname.new("#{Rails.root}/vendor/assets")
    puts "Pass 1: rename css files to scss"
    renamed_count = 0
    Dir["#{assets_path}/**/*.css"].each do |f|
      css_path= Pathname.new(f)
      scss_path= css_path.sub_ext(".scss")
      if scss_path.exist?
        puts "deleting #{scss_path.relative_path_from(assets_path)} to avoid conflict"
        scss_path.unlink
      end

      puts "#{css_path.relative_path_from(assets_path)} -> #{scss_path.relative_path_from(assets_path)}"
      css_path.rename(scss_path)
      renamed_count += 1
    end
    puts "Pass 1 complete: renamed #{renamed_count} files"

    processed_scss_count = 0
    total_fixed_lines_count=0
    puts "Pass 2: fix url() references"
    Dir["#{assets_path}/**/*.scss"].each do |path|
      puts path
      scss_path= Pathname.new(path)
      dir= scss_path.relative_path_from(assets_path).dirname
      dir_without_first_part= Pathname.new(dir.to_s[dir.to_s.index("/")+1..-1])

      lines=[]
      fixed_lines_count = 0
      scss_path.each_line do |line|
        if line.include?(" url(") or line.include?(":url(")
          # background-image: url(data:...)
          # background-image: url("data:...")
          # background-image: url("../img/a.png")
          # background-image: url(../img/a.png)

          puts line
          parts= line.split "url("
          new_parts= [parts.delete_at(0)]
          parts.each do |part|
            url_subpart, rest_subpart = part.split(")", 2)
            url_subpart.gsub! /["']/, ""

            if url_subpart.start_with? "data:"
              new_parts << "url(\"#{url_subpart}\")"
            else
              url_subpart= dir_without_first_part.join(url_subpart).to_s
              url_subpart_delimited = url_subpart.split("/")

              # "../../assets/admin/layout7/img/02.jpg" -> "layout7/img/02.jpg"
              iki_noktalar = url_subpart_delimited.count("..")
              iki_noktalar *= 2
              url_subpart_delimited = url_subpart_delimited[iki_noktalar..-1]
              url_subpart = url_subpart_delimited.join("/")
              new_parts << "asset-url(\"#{url_subpart}\")"
            end
            new_parts << rest_subpart
          end

          new_line = new_parts.join
          puts new_line
          fixed_lines_count += 1
        else
          new_line= line
        end
        lines << new_line
      end
      scss_path.open(File::CREAT|File::TRUNC|File::RDWR) do |file|
        file.puts lines
        processed_scss_count += 1
      end if fixed_lines_count>0
      total_fixed_lines_count += fixed_lines_count
    end

    puts "Pass 2 complete."
    puts "renamed #{renamed_count} files. Fixed #{total_fixed_lines_count} lines in #{processed_scss_count} scss files"
  end
end

You should also modify precompile options in config/initializers/assets.rb to look something like this:

Rails.application.config.assets.precompile += ["signup.js", "signup.css", "login.js", "login.css", "modal.js", "modal.css", "home.js", "*.png", "*.gif", "*.jpg", "*.eot", "*.woff", "*.woff2", "*.ttf", "*.svg",]

Good luck.

Upvotes: 1

Related Questions