1
- ## Sinatra-Assetpack
1
+ # Sinatra-Assetpack
2
2
3
3
Install the gem using:
4
4
@@ -22,18 +22,17 @@ class App < Sinatra::Base
22
22
end
23
23
```
24
24
25
-
26
- ### Generic Structure
25
+ ## Generic Structure
27
26
28
27
__ Defaults__
29
28
30
- If you do not use any CSS dev tools such as Compass or Foundation, and have a
31
- simple app structure that you generate on a per-project basis, there are
32
- certain defaults added to ` Sinatra::Assetpack ` . By default, the gem assumes
33
- your asset files are located under a folder called "app" in your app's root
29
+ If you do not use any CSS dev tools such as Compass or Foundation, and have a
30
+ simple app structure that you generate on a per-project basis, there are
31
+ certain defaults added to ` Sinatra::Assetpack ` . By default, the gem assumes
32
+ your asset files are located under a folder called "app" in your app's root
34
33
directory.
35
34
36
- This is the default structure which when used, makes it possible to use the
35
+ This is the default structure which when used, makes it possible to use the
37
36
gem with almost zero configuration.
38
37
39
38
```
@@ -51,12 +50,12 @@ myapp.rb
51
50
52
51
Some points of note:
53
52
54
- * There is no need to stick to this structure. The filepaths can be
55
- configured in ` sinatra-assetpack ` in case you need it.
56
- * There is no need for the ` public ` folder which is the default asset
53
+ * There is no need to stick to this structure. The filepaths can be
54
+ configured in ` sinatra-assetpack ` in case you need it.
55
+ * There is no need for the ` public ` folder which is the default asset
57
56
look-up path for Sinatra.
58
- * The ` .sass ` files go into the ` css ` directory. The conversion will be
59
- handled by ` sinatra-assetpack ` automatically. You just need the ` sass ` gem
57
+ * The ` .sass ` files go into the ` css ` directory. The conversion will be
58
+ handled by ` sinatra-assetpack ` automatically. You just need the ` sass ` gem
60
59
installed and loaded using ` require 'sass' ` .
61
60
62
61
Inside the ` myapp.rb ` file, inside the ` assets do .. end ` block,
@@ -84,7 +83,7 @@ assets do
84
83
end
85
84
```
86
85
87
- The symbol that is sent to the ` js ` and ` css ` methods becomes the access
86
+ The symbol that is sent to the ` js ` and ` css ` methods becomes the access
88
87
helper in your views. You can use those helpers like so:
89
88
90
89
``` ruby
@@ -100,7 +99,7 @@ Which gets expanded to:
100
99
101
100
That is it!
102
101
103
- ### Custom structure
102
+ ## Custom structure
104
103
105
104
__ Level 2__
106
105
@@ -119,7 +118,7 @@ assets
119
118
myapp.rb
120
119
```
121
120
122
- The ` serve ` method can be specified so that the folder from which the
121
+ The ` serve ` method can be specified so that the folder from which the
123
122
assets gets served from may be explained to the gem.
124
123
125
124
``` ruby
@@ -131,39 +130,39 @@ assets gets served from may be explained to the gem.
131
130
' /js/app.js'
132
131
# You can also do this: 'js/*.js'
133
132
]
134
-
133
+
135
134
serve ' /css' , :from => ' assets/stylesheets'
136
135
css :application , [
137
136
' /css/jqueryui.css' ,
138
137
' /css/reset.css' ,
139
138
' /css/foundation.sass' ,
140
139
' /css/app.sass'
141
140
]
142
-
141
+
143
142
js_compression :jsmin
144
143
css_compression :sass
145
144
end
146
145
```
147
146
148
147
And everything else remains the same.
149
148
150
- ### Foundation framework + Compass
149
+ ## Foundation framework + Compass
151
150
152
151
__ Level Awesome__
153
152
154
- The previous sections dealt with limited number of assets. What if
153
+ The previous sections dealt with limited number of assets. What if
155
154
you have vendor assets that need to be served in a particular order?
156
155
157
- This section deals with using the foundation framework with
158
- ` sinatra-assetpack ` . The example also uses the ` compass ` gem to start a
159
- project with the ` zurb-foundation ` framework.
156
+ This section deals with using the foundation framework with
157
+ ` sinatra-assetpack ` . The example also uses the ` compass ` gem to start a
158
+ project with the ` zurb-foundation ` framework.
160
159
161
160
```
162
161
gem install zurb-foundation
163
162
gem install compass
164
163
```
165
164
166
- Complete instructions are not provided here. Follow the Zurb-foundation
165
+ Complete instructions are not provided here. Follow the Zurb-foundation
167
166
link provided in the links section for detailed instructions
168
167
169
168
The created project has a structure like this:
@@ -200,16 +199,16 @@ The created project has a structure like this:
200
199
myapp.rb
201
200
```
202
201
203
- In this app, the ` .sass ` to ` .css ` conversion is handled by running
204
- ` compass watch ` which compiles the ` .scss ` files whenever it detects a
205
- change. So, we'll ignore the conversion for now. The concentration would
202
+ In this app, the ` .sass ` to ` .css ` conversion is handled by running
203
+ ` compass watch ` which compiles the ` .scss ` files whenever it detects a
204
+ change. So, we'll ignore the conversion for now. The concentration would
206
205
be on how to configure the app to get the files in a particular order.
207
206
208
207
In this case, the order of the JS files that need to be loaded/merged is:
209
208
210
209
1 . Vendor JS files like jQuery, Modernizr and Zepto.
211
210
212
- 2 . The "foundation.js" file which defines the ` Foundation ` prototype that
211
+ 2 . The "foundation.js" file which defines the ` Foundation ` prototype that
213
212
gets used in the rest of the ` foundation.*.js ` files.
214
213
215
214
3 . The ` foundation.*.js ` files.
@@ -229,13 +228,13 @@ assets do
229
228
' /js/vendor/*.js' ,
230
229
' /js/app.js'
231
230
]
232
-
231
+
233
232
serve ' /css' , :from => ' stylesheets'
234
233
css :application , [
235
234
' /css/normalize.css' ,
236
235
' /css/app.css'
237
236
]
238
-
237
+
239
238
js_compression :jsmin
240
239
css_compression :sass
241
240
end
@@ -249,27 +248,27 @@ Inside the view:
249
248
< %= js :foundation %>
250
249
```
251
250
252
- Do this, and you'll see that the files are loaded properly and there will be
251
+ Do this, and you'll see that the files are loaded properly and there will be
253
252
no JS errors in the browser's console.
254
253
255
- ### Merging
254
+ ## Merging
256
255
257
- If you have tried the code samples, you might've observed that the files are
258
- not getting merged before they are sent to the browser. This is true and
256
+ If you have tried the code samples, you might've observed that the files are
257
+ not getting merged before they are sent to the browser. This is true and
259
258
happens only in development mode. Change it to production:
260
259
261
260
```
262
261
export RACK_ENV="production"
263
262
```
264
263
265
- Voila! Now you should see only three asset files being loaded viz.,
264
+ Voila! Now you should see only three asset files being loaded viz.,
266
265
"application.css", "application.js" and "foundation.js".
267
266
268
- ### Pre-compilation
267
+ ## Pre-compilation
269
268
270
- Up until now, the concatenation, compression are done after a request
271
- reaches the server for the first time. This step is done only once for the
272
- first request. However, if you need to pre-generate the compressed and
269
+ Up until now, the concatenation, compression are done after a request
270
+ reaches the server for the first time. This step is done only once for the
271
+ first request. However, if you need to pre-generate the compressed and
273
272
concatenated assets, you can use the rake task provided in the gem:
274
273
275
274
Create a `Rakefile` in your app directory with the following contents:
@@ -281,12 +280,11 @@ APP_CLASS = 'Sinatra::Application'
281
280
require 'sinatra/assetpack/rake'
282
281
```
283
282
284
- And run `rake assetpack:build` to generate the assets which automatically
285
- get stored in a `public` directory.
283
+ And run `rake assetpack:build` to generate the assets which automatically
284
+ get stored in a `public` directory.
286
285
287
- ### Resources
286
+ ## Resources
288
287
289
288
* [Sinatra-Assetpack](https://github.com/rstacruz/sinatra-assetpack)
290
289
* [Foundation Framework](http://foundation.zurb.com/docs/index.html)
291
290
* [Compass Framework](http://compass-style.org/)
292
-
0 commit comments