• Like
Asset Pipeline
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Asset Pipeline

  • 1,335 views
Published

Accompanying slides for presentation done at Utah Ruby User Group.

Accompanying slides for presentation done at Utah Ruby User Group.

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,335
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
8
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Transcript

  • 1. Asset Pipeline for dummies
  • 2. Why?
  • 3. Precompile
  • 4. Concatenate
  • 5. Minify
  • 6. Sprockets performs the asset packaging which takes the assets from all thespecified paths, compiles them together and places them in the target path(public/assets).
  • 7. Tilt is the template engine that Sprockets uses. This allows file types like scssand erb to be used in the asset pipeline.
  • 8. Files in Asset PathsAssetPipeline
  • 9. Asset Paths
  • 10. app/assets is for assets that are owned by the application, such as custom images, JavaScript files or stylesheets.
  • 11. app/assets is for assets that are owned by the application, such as custom images, JavaScript files or stylesheets.lib/assets is for your own libraries’ code that doesn’t really fit into the scope of the application or those libraries which are shared across applications.
  • 12. app/assets is for assets that are owned by the application, such as custom images, JavaScript files or stylesheets.lib/assets is for your own libraries’ code that doesn’t really fit into the scope of the application or those libraries which are shared across applications.vendor/assets is for assets that are owned by outside entities, such as code for JavaScript plugins and CSS frameworks.
  • 13. the manifest
  • 14. • require [path] inserts the contents of the asset source file specified by path. If the file is required multiple times, it will appear in the bundle only once.
  • 15. • require [path] inserts the contents of the asset source file specified by path. If the file is required multiple times, it will appear in the bundle only once.• include [path] works like require, but inserts the contents of the specified source file even if it has already been included or required.
  • 16. • require [path] inserts the contents of the asset source file specified by path. If the file is required multiple times, it will appear in the bundle only once.• include [path] works like require, but inserts the contents of the specified source file even if it has already been included or required.• require_directory [path] requires all source files of the same format in the directory specified by path. Files are required in alphabetical order.
  • 17. • require [path] inserts the contents of the asset source file specified by path. If the file is required multiple times, it will appear in the bundle only once.• include [path] works like require, but inserts the contents of the specified source file even if it has already been included or required.• require_directory [path] requires all source files of the same format in the directory specified by path. Files are required in alphabetical order.• require_tree [path] works like require_directory, but operates recursively to require all files in all subdirectories of the directory specified by path.
  • 18. • require [path] inserts the contents of the asset source file specified by path. If the file is required multiple times, it will appear in the bundle only once.• include [path] works like require, but inserts the contents of the specified source file even if it has already been included or required.• require_directory [path] requires all source files of the same format in the directory specified by path. Files are required in alphabetical order.• require_tree [path] works like require_directory, but operates recursively to require all files in all subdirectories of the directory specified by path.• require_self tells Sprockets to insert the body of the current source file before any subsequent require or include directives.
  • 19. • require [path] inserts the contents of the asset source file specified by path. If the file is required multiple times, it will appear in the bundle only once.• include [path] works like require, but inserts the contents of the specified source file even if it has already been included or required.• require_directory [path] requires all source files of the same format in the directory specified by path. Files are required in alphabetical order.• require_tree [path] works like require_directory, but operates recursively to require all files in all subdirectories of the directory specified by path.• require_self tells Sprockets to insert the body of the current source file before any subsequent require or include directives.• depend_on [path] declares a dependency on the given path without including it in the bundle. This is useful when you need to expire an asset’s cache in response to a change in another file.
  • 20. • require [path] inserts the contents of the asset source file specified by path. If the file is required multiple times, it will appear in the bundle only once.• include [path] works like require, but inserts the contents of the specified source file even if it has already been included or required.• require_directory [path] requires all source files of the same format in the directory specified by path. Files are required in alphabetical order.• require_tree [path] works like require_directory, but operates recursively to require all files in all subdirectories of the directory specified by path.• require_self tells Sprockets to insert the body of the current source file before any subsequent require or include directives.• depend_on [path] declares a dependency on the given path without including it in the bundle. This is useful when you need to expire an asset’s cache in response to a change in another file.• stub [path] allows dependency to be excluded from the asset bundle. The path must be a valid asset and may or may not already be part of the bundle. Once stubbed, it is blacklisted and can’t be brought back by any other require.
  • 21. usage
  • 22. Misconceptions
  • 23. Files must belong in their respective paths.For example, all JavaScript files must be in a javascripts folder within anasset path.
  • 24. Files must belong in their respective paths.For example, all JavaScript files must be in a javascripts folder within anasset path.The truth is that the paths (stylesheets, javascripts,images) are only there for organization.You can haveall the assets in a single folder or in a hundred.
  • 25. Sass files need to use *erb* extension to allow for asset path inclusionswithin the files.
  • 26. Sass files need to use *erb* extension to allow for asset path inclusionswithin the files.The truth is that sass-rails provides -url and-path helpers for the following asset types: image,font, video, audio, JavaScript and stylesheet.
  • 27. gems
  • 28. faq
  • 29. Why doesnt the auto-generated scss and coffeescriptonly get included in their respective controller views?
  • 30. Why doesnt the auto-generated scss and coffeescriptonly get included in their respective controller views?
  • 31. Do I have to use the asset pipeline?
  • 32. Do I have to use the asset pipeline?
  • 33. What happens if there are duplicate file names in different asset folders?
  • 34. What happens if there are duplicate file names in different asset folders?
  • 35. How can I precompile assets that arent to be used in the pipeline?
  • 36. How can I precompile assets that arent to be used in the pipeline?
  • 37. How can I precompile additional assets without having to include them in the manifest?
  • 38. How can I precompile additional assets without having to include them in the manifest?
  • 39. PrecompileConcatenate Minify
  • 40. http://coderberry.me