Hokkaido.pm#10 LT
@aloelight
Asset Pipeline
for Perl
Asset Pipeline
•複数のJavaScriptやCSSを結合して、
minifyしたりしてくれる機能
•CoffeeScript、Sass等を自動で変換
•Railsに標準搭載されている
それっぽいの作りました
Plack::Middleware::Assets::RailsLike
github.com/ysasaki/p5-plack-middleware-assets-railslike
主な機能
•JavaScript, CSSの結合と最小化
•LESS, Sass/Scssの展開
•Cache
•Pre-compile
使い方
ディレクトリ構造
.
├── app.psgi
├── assets
│ ├── main.css
│ └── main.js
└── static
├── css
│ ├── div.css
│ └── style.css
└── js
├─...
Manifest
> cat assets/main.js
//= require jquery-2.0.3
//= require functions
//= require alert
> cat assets/main.css
/*
*=...
app.psgi
use strict;
use warnings;
use Plack::Builder;
builder {
enable 'Assets::RailsLike',
path        => qr{^/assets},
...
DEMO
Pre-compile
> assets-railslike-precompiler.pl -v 
> --search-path static/js 
> assets/main.js
Compiles assets/main.js => a...
DEMO
Upcoming SlideShare
Loading in...5
×

Asset Pipeline for Perl

2,922

Published on

Plack::Middleware::Assets::RailsLike

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,922
On Slideshare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
1
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Asset Pipeline for Perl

  1. 1. Hokkaido.pm#10 LT @aloelight Asset Pipeline for Perl
  2. 2. Asset Pipeline •複数のJavaScriptやCSSを結合して、 minifyしたりしてくれる機能 •CoffeeScript、Sass等を自動で変換 •Railsに標準搭載されている
  3. 3. それっぽいの作りました Plack::Middleware::Assets::RailsLike github.com/ysasaki/p5-plack-middleware-assets-railslike
  4. 4. 主な機能 •JavaScript, CSSの結合と最小化 •LESS, Sass/Scssの展開 •Cache •Pre-compile
  5. 5. 使い方
  6. 6. ディレクトリ構造 . ├── app.psgi ├── assets │ ├── main.css │ └── main.js └── static ├── css │ ├── div.css │ └── style.css └── js ├── alert.js ├── functions.js └── jquery-2.0.3.js Manifestファイル 読み込ませたいファイルを記載 読み込みたい普通のjs, cssファイル
  7. 7. Manifest > cat assets/main.js //= require jquery-2.0.3 //= require functions //= require alert > cat assets/main.css /* *= require style *= require div */
  8. 8. app.psgi use strict; use warnings; use Plack::Builder; builder { enable 'Assets::RailsLike', path        => qr{^/assets}, root        => '.', search_path => [ './static/js', './static/css' ]; $app; };
  9. 9. DEMO
  10. 10. Pre-compile > assets-railslike-precompiler.pl -v > --search-path static/js > assets/main.js Compiles assets/main.js => assets/ main-1078b9553ce7343a23b915716b84d68bf5c72d64.js
  11. 11. DEMO
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×