Slide 1

Slide 1 text

Asset Pipeline for dummies

Slide 2

Slide 2 text

Why?

Slide 3

Slide 3 text

Precompile

Slide 4

Slide 4 text

Concatenate

Slide 5

Slide 5 text

Minify

Slide 6

Slide 6 text

Sprockets performs the asset packaging which takes the assets from all the specified paths, compiles them together and places them in the target path (public/assets).

Slide 7

Slide 7 text

Tilt is the template engine that Sprockets uses. This allows file types like scss and erb to be used in the asset pipeline.

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

Asset Pipeline Files in Asset Paths

Slide 10

Slide 10 text

Asset Paths

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

app/assets is for assets that are owned by the application, such as custom images, JavaScript files or stylesheets.

Slide 14

Slide 14 text

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.

Slide 15

Slide 15 text

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.

Slide 16

Slide 16 text

the manifest

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

• 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.

Slide 19

Slide 19 text

• 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.

Slide 20

Slide 20 text

• 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.

Slide 21

Slide 21 text

• 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.

Slide 22

Slide 22 text

• 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.

Slide 23

Slide 23 text

• 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.

Slide 24

Slide 24 text

• 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.

Slide 25

Slide 25 text

usage

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

Misconceptions

Slide 28

Slide 28 text

Files must belong in their respective paths. For example, all JavaScript files must be in a javascripts folder within an asset path.

Slide 29

Slide 29 text

Files must belong in their respective paths. For example, all JavaScript files must be in a javascripts folder within an asset path. The truth is that the paths (stylesheets, javascripts, images) are only there for organization. You can have all the assets in a single folder or in a hundred.

Slide 30

Slide 30 text

Sass files need to use *erb* extension to allow for asset path inclusions within the files.

Slide 31

Slide 31 text

Sass files need to use *erb* extension to allow for asset path inclusions within 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.

Slide 32

Slide 32 text

gems

Slide 33

Slide 33 text

faq

Slide 34

Slide 34 text

Why doesn't the auto-generated scss and coffeescript only get included in their respective controller views?

Slide 35

Slide 35 text

Why doesn't the auto-generated scss and coffeescript only get included in their respective controller views?

Slide 36

Slide 36 text

Do I have to use the asset pipeline?

Slide 37

Slide 37 text

Do I have to use the asset pipeline?

Slide 38

Slide 38 text

What happens if there are duplicate file names in different asset folders?

Slide 39

Slide 39 text

What happens if there are duplicate file names in different asset folders?

Slide 40

Slide 40 text

How can I precompile assets that aren't to be used in the pipeline?

Slide 41

Slide 41 text

How can I precompile assets that aren't to be used in the pipeline?

Slide 42

Slide 42 text

How can I precompile additional assets without having to include them in the manifest?

Slide 43

Slide 43 text

How can I precompile additional assets without having to include them in the manifest?

Slide 44

Slide 44 text

Precompile Concatenate Minify

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

http://coderberry.me