Sprockets asset pipeline in Ruby on Rails - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to include a JavaScript file in the asset pipeline manifest.

Ruby on Rails

//= require [1]

Drag options to blanks, or click blank then click option'

Ajquery

Bapplication

Cstylesheets

Dimages

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'stylesheets' or 'images' in a JavaScript require directive.

Forgetting to use the correct syntax for Sprockets directives.

The //= require jquery directive includes the jQuery JavaScript file in the asset pipeline manifest.

2fill in blank

medium

Complete the code to precompile additional assets in Rails configuration.

Ruby on Rails

Rails.application.config.assets.precompile += %w( [1] )

Drag options to blanks, or click blank then click option'

Areset.css

Bapplication.css

Cjquery.js

Dadmin.js

Attempts:

3 left

💡 Hint

Common Mistakes

Adding default files like application.css which are already precompiled.

Using incorrect file extensions or names.

Adding admin.js to the precompile array tells Rails to compile this additional JavaScript asset.

3fill in blank

hard

Fix the error in the manifest file to correctly include all JavaScript files in the directory.

Ruby on Rails

//= require_tree [1]

Drag options to blanks, or click blank then click option'

A.

Bapp/assets/javascripts

C..

Dvendor/assets/javascripts

Attempts:

3 left

💡 Hint

Common Mistakes

Using absolute or incorrect paths instead of '.'

Confusing directory paths with file names.

The //= require_tree . directive includes all JavaScript files in the current directory.

4fill in blank

hard

Fill both blanks to correctly reference a CSS file and its path in the asset pipeline manifest.

Ruby on Rails

 *= require [1]
 *= require [2]

Drag options to blanks, or click blank then click option'

Areset

Bmain

Cstylesheets/reset

Dstylesheets/main

Attempts:

3 left

💡 Hint

Common Mistakes

Including folder paths which cause Sprockets to fail to find files.

Using incorrect file extensions or names.

The directives require reset and require main include the CSS files named reset.css and main.css respectively.

5fill in blank

hard

Fill all three blanks to create a hash mapping asset names to their logical paths with a condition.

Ruby on Rails

assets = { [1]: [2] for [3] in %w[admin user guest] if [3] != 'guest' }

Drag options to blanks, or click blank then click option'

Aname

Bname + '.js'

Duser

Attempts:

3 left

💡 Hint

Common Mistakes

Using inconsistent variable names in the comprehension.

Forgetting to append '.js' to the asset names.

This dictionary comprehension creates a hash where keys are names and values are the corresponding JavaScript filenames, excluding 'guest'.