Soumettre la recherche
Mettre en ligne
僕はどうしてもLibsassが使いたかったんだ!
•
5 j'aime
•
4,386 vues
Masato Noguchi
Suivre
新宿.rb #30 LT資料
Lire moins
Lire la suite
Ingénierie
Signaler
Partager
Signaler
Partager
1 sur 44
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
JSer infoでやったLTの資料
RailsのRailから解放される始めの一歩
RailsのRailから解放される始めの一歩
Masato Noguchi
西日暮里.rb一周年記念 LT
Sprocketsを捨てたい
Sprocketsを捨てたい
Masato Noguchi
gotanda.js #2 のLT資料です。
request-specを利用していい感じにモックデータを作ってフロントエンド開発を楽にしたい!
request-specを利用していい感じにモックデータを作ってフロントエンド開発を楽にしたい!
Masato Noguchi
2017-05-23 Speee Cafe Meetup #07
クローズドソースから始めるオープンソース
クローズドソースから始めるオープンソース
Takafumi ONAKA
Ruby/ Ruby on Railsビギナーズ勉強会 第9回資料です
Railsのフロントエンド開発を考える
Railsのフロントエンド開発を考える
Hirata Tomoko
Ruby / Rails ビギナーズ勉強会 第17回 #coedorb https://coedo-rails.doorkeeper.jp/events/52638
Railsチュートリアル(second)を終えて
Railsチュートリアル(second)を終えて
Hirata Tomoko
札幌市中央区Ruby会議01 での発表資料です。
Rails あるある
Rails あるある
Ryunosuke SATO
Innovation EGG 第二回 XEGG での発表資料です。
Ruby on Rails の特徴とそのエコシステム
Ruby on Rails の特徴とそのエコシステム
Tomoya Kawanishi
Recommandé
JSer infoでやったLTの資料
RailsのRailから解放される始めの一歩
RailsのRailから解放される始めの一歩
Masato Noguchi
西日暮里.rb一周年記念 LT
Sprocketsを捨てたい
Sprocketsを捨てたい
Masato Noguchi
gotanda.js #2 のLT資料です。
request-specを利用していい感じにモックデータを作ってフロントエンド開発を楽にしたい!
request-specを利用していい感じにモックデータを作ってフロントエンド開発を楽にしたい!
Masato Noguchi
2017-05-23 Speee Cafe Meetup #07
クローズドソースから始めるオープンソース
クローズドソースから始めるオープンソース
Takafumi ONAKA
Ruby/ Ruby on Railsビギナーズ勉強会 第9回資料です
Railsのフロントエンド開発を考える
Railsのフロントエンド開発を考える
Hirata Tomoko
Ruby / Rails ビギナーズ勉強会 第17回 #coedorb https://coedo-rails.doorkeeper.jp/events/52638
Railsチュートリアル(second)を終えて
Railsチュートリアル(second)を終えて
Hirata Tomoko
札幌市中央区Ruby会議01 での発表資料です。
Rails あるある
Rails あるある
Ryunosuke SATO
Innovation EGG 第二回 XEGG での発表資料です。
Ruby on Rails の特徴とそのエコシステム
Ruby on Rails の特徴とそのエコシステム
Tomoya Kawanishi
Roppongi.rb #3 "Rails x Frontend-Tech" での発表資料です、 Ref: https://roppongirb.connpass.com/event/56456
片手間JS on Rails
片手間JS on Rails
Ryunosuke SATO
2017-06-22 Rails Developers Meetup #2
ふつうのRailsアプリケーション開発
ふつうのRailsアプリケーション開発
Takafumi ONAKA
2014-11-01 渋谷Ruby会議01 http://regional.rubykaigi.org/shibuya01/
すこやかRails
すこやかRails
Takafumi ONAKA
Ruby/ Ruby on Railsビギナーズ勉強会 第5回資料です
WindowsユーザのためのRails環境構築
WindowsユーザのためのRails環境構築
Hirata Tomoko
ぼくのかんがえたさいきょうの Rails スタートダッシュ
ぼくのかんがえたさいきょうの Rails スタートダッシュ
ぼくのかんがえたさいきょうの Rails スタートダッシュ
Kenji Mori
20101009 gunma.web#2 スタパさんをつくるはなし
20101009 gunma.web#2 スタパさんをつくるはなし
ivoryworks .
Ruby/ Ruby on Railsビギナーズ勉強会 第13回資料です
Rails5クイックスタート
Rails5クイックスタート
Hirata Tomoko
Ruby/ Ruby on Railsビギナーズ勉強会 第8回資料です
Rails+Markdownでなにかつくる
Rails+Markdownでなにかつくる
Hirata Tomoko
大江戸Ruby会議05 の Ninja Talks です。 http://regional.rubykaigi.org/oedo05/
Ember コミュニティとわたし
Ember コミュニティとわたし
Ryunosuke SATO
How to relaunch "sapporojs.org" ~Introduction to middleman~
How to relaunch "sapporojs.org" ~Introduction to middleman~
Ryunosuke SATO
2014/12/12 MySQL Casual Talks vol.7
MySQL Fabricつらい
MySQL Fabricつらい
yoku0825
平成23年度 産学官連携セミナー(鹿児島市) 2012/02/23 於: ソフトプラザかごしま
Ruby on Rails を用いたWEBアプリケーションの開発
Ruby on Rails を用いたWEBアプリケーションの開発
Koichi Shimozono
2017-12-09 Rails Developers Meetup 2017
RSpecしぐさ
RSpecしぐさ
Takafumi ONAKA
PHPカンファレンス関西2017発表資料。 -- Webでリアルタイム通信を実現するWebSocket。 WebSocketと言えば、Socket.IO(node)やActionCable(Rails5)なんかはメジャーですが、 さて、PHPではどうしましょうか。まだデファクトが無いですよね。 いろいろ調べて試してわかったことを、お伝えしたいと思います。
PHPでWebSocketを実装してみてわかったこと
PHPでWebSocketを実装してみてわかったこと
ksimoji
株式会社LOUPE エンジニアチームの勉強会「LOUPE Study」の発表資料です。 第一回目の担当は僕。 テーマは「SinatraでのWeb開発について」でした。
Sinatra軽量Web開発 - LOUPE Study #1
Sinatra軽量Web開発 - LOUPE Study #1
Takuya Mukohira
Rubyで作るクローラー Ruby crawler
Rubyで作るクローラー Ruby crawler
Takuro Sasaki
Rails Upgrade Casual Talks 2016/03/28 Railsバージョンアップを段階的に行うためにRails3/4並行稼動させる仕組みを作ってる話
Railsバージョンアップを段階的に行うためにRails3/4並行稼動させる仕組みを作ってる話
Railsバージョンアップを段階的に行うためにRails3/4並行稼動させる仕組みを作ってる話
Masayuki Morita
静岡javaScript勉強会 #1 での発表内容です。
Nodeにしましょう
Nodeにしましょう
Yuzo Hebishima
2014/04/24 MySQL勉強会 in 大阪(第6回)にリモート参加しようとして失敗したスライド。。 http://atnd.org/events/49005
これからはじめるひとのためのdev.mysql.com
これからはじめるひとのためのdev.mysql.com
yoku0825
2008-03-10 に club db2 にて行った Ruby on Rails 入門セミナーの資料です。
Ruby on Rails 入門
Ruby on Rails 入門
Yasuko Ohba
2014/9/12に行われた週末ランサーズでのGulpハンズオンで使用したスライドです。 LIGブログでこの内容をさらにまとめています。 http://liginc.co.jp/web/tutorial/117900
Gulp入門 - コーディングを10倍速くする
Gulp入門 - コーディングを10倍速くする
Hayashi Yuichi
Node学園 19限目の発表資料
gulp-sprockets、あるいはRailsのAssetsのビルドについて
gulp-sprockets、あるいはRailsのAssetsのビルドについて
yo_waka
Contenu connexe
Tendances
Roppongi.rb #3 "Rails x Frontend-Tech" での発表資料です、 Ref: https://roppongirb.connpass.com/event/56456
片手間JS on Rails
片手間JS on Rails
Ryunosuke SATO
2017-06-22 Rails Developers Meetup #2
ふつうのRailsアプリケーション開発
ふつうのRailsアプリケーション開発
Takafumi ONAKA
2014-11-01 渋谷Ruby会議01 http://regional.rubykaigi.org/shibuya01/
すこやかRails
すこやかRails
Takafumi ONAKA
Ruby/ Ruby on Railsビギナーズ勉強会 第5回資料です
WindowsユーザのためのRails環境構築
WindowsユーザのためのRails環境構築
Hirata Tomoko
ぼくのかんがえたさいきょうの Rails スタートダッシュ
ぼくのかんがえたさいきょうの Rails スタートダッシュ
ぼくのかんがえたさいきょうの Rails スタートダッシュ
Kenji Mori
20101009 gunma.web#2 スタパさんをつくるはなし
20101009 gunma.web#2 スタパさんをつくるはなし
ivoryworks .
Ruby/ Ruby on Railsビギナーズ勉強会 第13回資料です
Rails5クイックスタート
Rails5クイックスタート
Hirata Tomoko
Ruby/ Ruby on Railsビギナーズ勉強会 第8回資料です
Rails+Markdownでなにかつくる
Rails+Markdownでなにかつくる
Hirata Tomoko
大江戸Ruby会議05 の Ninja Talks です。 http://regional.rubykaigi.org/oedo05/
Ember コミュニティとわたし
Ember コミュニティとわたし
Ryunosuke SATO
How to relaunch "sapporojs.org" ~Introduction to middleman~
How to relaunch "sapporojs.org" ~Introduction to middleman~
Ryunosuke SATO
2014/12/12 MySQL Casual Talks vol.7
MySQL Fabricつらい
MySQL Fabricつらい
yoku0825
平成23年度 産学官連携セミナー(鹿児島市) 2012/02/23 於: ソフトプラザかごしま
Ruby on Rails を用いたWEBアプリケーションの開発
Ruby on Rails を用いたWEBアプリケーションの開発
Koichi Shimozono
2017-12-09 Rails Developers Meetup 2017
RSpecしぐさ
RSpecしぐさ
Takafumi ONAKA
PHPカンファレンス関西2017発表資料。 -- Webでリアルタイム通信を実現するWebSocket。 WebSocketと言えば、Socket.IO(node)やActionCable(Rails5)なんかはメジャーですが、 さて、PHPではどうしましょうか。まだデファクトが無いですよね。 いろいろ調べて試してわかったことを、お伝えしたいと思います。
PHPでWebSocketを実装してみてわかったこと
PHPでWebSocketを実装してみてわかったこと
ksimoji
株式会社LOUPE エンジニアチームの勉強会「LOUPE Study」の発表資料です。 第一回目の担当は僕。 テーマは「SinatraでのWeb開発について」でした。
Sinatra軽量Web開発 - LOUPE Study #1
Sinatra軽量Web開発 - LOUPE Study #1
Takuya Mukohira
Rubyで作るクローラー Ruby crawler
Rubyで作るクローラー Ruby crawler
Takuro Sasaki
Rails Upgrade Casual Talks 2016/03/28 Railsバージョンアップを段階的に行うためにRails3/4並行稼動させる仕組みを作ってる話
Railsバージョンアップを段階的に行うためにRails3/4並行稼動させる仕組みを作ってる話
Railsバージョンアップを段階的に行うためにRails3/4並行稼動させる仕組みを作ってる話
Masayuki Morita
静岡javaScript勉強会 #1 での発表内容です。
Nodeにしましょう
Nodeにしましょう
Yuzo Hebishima
2014/04/24 MySQL勉強会 in 大阪(第6回)にリモート参加しようとして失敗したスライド。。 http://atnd.org/events/49005
これからはじめるひとのためのdev.mysql.com
これからはじめるひとのためのdev.mysql.com
yoku0825
2008-03-10 に club db2 にて行った Ruby on Rails 入門セミナーの資料です。
Ruby on Rails 入門
Ruby on Rails 入門
Yasuko Ohba
Tendances
(20)
片手間JS on Rails
片手間JS on Rails
ふつうのRailsアプリケーション開発
ふつうのRailsアプリケーション開発
すこやかRails
すこやかRails
WindowsユーザのためのRails環境構築
WindowsユーザのためのRails環境構築
ぼくのかんがえたさいきょうの Rails スタートダッシュ
ぼくのかんがえたさいきょうの Rails スタートダッシュ
20101009 gunma.web#2 スタパさんをつくるはなし
20101009 gunma.web#2 スタパさんをつくるはなし
Rails5クイックスタート
Rails5クイックスタート
Rails+Markdownでなにかつくる
Rails+Markdownでなにかつくる
Ember コミュニティとわたし
Ember コミュニティとわたし
How to relaunch "sapporojs.org" ~Introduction to middleman~
How to relaunch "sapporojs.org" ~Introduction to middleman~
MySQL Fabricつらい
MySQL Fabricつらい
Ruby on Rails を用いたWEBアプリケーションの開発
Ruby on Rails を用いたWEBアプリケーションの開発
RSpecしぐさ
RSpecしぐさ
PHPでWebSocketを実装してみてわかったこと
PHPでWebSocketを実装してみてわかったこと
Sinatra軽量Web開発 - LOUPE Study #1
Sinatra軽量Web開発 - LOUPE Study #1
Rubyで作るクローラー Ruby crawler
Rubyで作るクローラー Ruby crawler
Railsバージョンアップを段階的に行うためにRails3/4並行稼動させる仕組みを作ってる話
Railsバージョンアップを段階的に行うためにRails3/4並行稼動させる仕組みを作ってる話
Nodeにしましょう
Nodeにしましょう
これからはじめるひとのためのdev.mysql.com
これからはじめるひとのためのdev.mysql.com
Ruby on Rails 入門
Ruby on Rails 入門
En vedette
2014/9/12に行われた週末ランサーズでのGulpハンズオンで使用したスライドです。 LIGブログでこの内容をさらにまとめています。 http://liginc.co.jp/web/tutorial/117900
Gulp入門 - コーディングを10倍速くする
Gulp入門 - コーディングを10倍速くする
Hayashi Yuichi
Node学園 19限目の発表資料
gulp-sprockets、あるいはRailsのAssetsのビルドについて
gulp-sprockets、あるいはRailsのAssetsのビルドについて
yo_waka
HTML5MinutesのLTでお話させて頂いた資料です。 FrontNoteというNode.js製のジェネレーターについて少しだけお話させていただきました。 5分はやっぱり短い・・・・
CSS Living StyleGuide
CSS Living StyleGuide
Hayashi Yuichi
Slides from Linux tuning to improve PostgreSQL performance by Ilya Kosmodemiansky at PGConf.eu 2015 in Viena
Linux tuning to improve PostgreSQL performance
Linux tuning to improve PostgreSQL performance
PostgreSQL-Consulting
2017/03/04の『Geek になりたい人のためのミニカンファ』での、Visual Studio Codeのハンズオン用の資料です。
Visual Studio Code 入門
Visual Studio Code 入門
Saki Homma
2016/01/20 GMOアドパートナーズグループ勉強会
雑なMySQLパフォーマンスチューニング
雑なMySQLパフォーマンスチューニング
yoku0825
En vedette
(6)
Gulp入門 - コーディングを10倍速くする
Gulp入門 - コーディングを10倍速くする
gulp-sprockets、あるいはRailsのAssetsのビルドについて
gulp-sprockets、あるいはRailsのAssetsのビルドについて
CSS Living StyleGuide
CSS Living StyleGuide
Linux tuning to improve PostgreSQL performance
Linux tuning to improve PostgreSQL performance
Visual Studio Code 入門
Visual Studio Code 入門
雑なMySQLパフォーマンスチューニング
雑なMySQLパフォーマンスチューニング
僕はどうしてもLibsassが使いたかったんだ!
1.
僕はどうしてもlibsass が使いたかったんだ! @joe-re
2.
自己紹介 • 名前: joe-re(じょー) •
freeeという会社で働いています • この前までクラウド会計やってましたが、 今はクラウド給与計算やってます
3.
4.
前にもSprocketsを捨てたいLTした ことがあるので資料貼ってみます • http://www.slideshare.net/ masatonoguchi169/sprockets-49965435
5.
Sprocketsを捨てるには 2つの道がある
6.
Railsのassets pipelineを一切 使わない!の道 • gulp等のビルドツールを使い、concat、 minify、uglify、fingerprint付与などの Sprocketsさんがやっている仕事を全部奪う •
成果物はPublic配下に出力する • まさしく理想の世界!
7.
Railsのassets pipelineを一切 使わない!の壁 • fingerprintの解決が難しい •
フロント側で単純に付与しただけでは、Railsの asset_pathヘルパーが一切効かなくなる • manifest.jsonを生成することでRails側に伝えること は可能だが、こいつはライブリロードされない • 一気にやらないといけない作業の量やばすぎ
8.
フロント側の成果物をapp/assets に吐き出す!の道 • concat、uglify、minify、fingerprintなどの処 理は従来通りSprocketsにお任せ! • まだフロントで解決できないものは、とりあ えずapp/assets配下にそのままコピーしてお けば何とかなるので、徐々に作業可能
9.
フロント側の成果物をapp/assets に吐き出す!の壁 • 結局Sprocketsから脱却できてない • 常にSprocketsとの良好な関係を 意識し続けなければプロダクトが死ぬ
10.
今回は app/assets配下に gulpで生成した成果物を 出力する道を選んだ 場合の話です
11.
それから僕たちは少しづつ Sprocketsから距離をおき始めたんだ • jsのビルドはwebpackで! • es6-modulesで依存関係を定義 •
styleのビルドはnode-sass使う! • などなど
12.
jsのビルド構築にも数々の ドラマがありましたが
13.
今回はstyleのビルドの 話をします
14.
そもそも僕たちの プロダクトには styleのビルド改善に 早く着手しなければならない 重大な問題があったのだ
15.
Sprocketsで 出力しているassetsは、 ファイルに変更がないとき、
16.
キャッシュが効きます!
17.
つまり前回と同じassetsを 使うので、ビルドしません
18.
しかしキャッシュが 効かない時、恐ろしい現象が 起きていました
19.
普段10分ぐらいの デプロイ時間がなんと
20.
(゜Д゜) !?
21.
やばい
22.
原因は、複雑に処理を 定義していたscssファイルの ビルド時間でした
23.
そこに颯爽と登場するlibsass! • Ruby に依存しないですげー早いyabeeeや つ! •
libsassはC/C++ 実装なsassのコンパイラーだ けど、node-sassでnode.jsの世界で扱うこと ができる
24.
Ruby Sass, LibSass
– What's the Difference? http://sassbreak.com/ruby- sass-libsass-differences/
25.
ローカルで試しにかけて みたところ、なんとstyle のビルド時間は1分!
26.
こいつだ、こいつしかねぇ
27.
そこに立ちはだかる2つの壁
28.
1. 複数エントリーポイントが あるときの依存関係 (@import)の解決 2. asset_pathヘルパーの解決
29.
複数エントリーポイントがあるときの 依存関係を解決するにあたっての課題 • いくら速いとはいえ、開発中にファイルを変更するた びに1分のビルドが走るのは苦痛。差分だけビルドし たい。 • もともとstyleはページ単位で分割していたため、エン トリーポイントが複数ある。 •
単純に変更のあったファイルをビルドするだけだと、 @import元を れない
30.
いや、でも待てよ
31.
node-sassの watchオプションって @import ってるよな
32.
あれどうやってるんだ??
33.
というわけで解決した • http://qiita.com/joe-re/items/ 542b3f6fdc577cf50509 • node-sassは、sass-graphというnpmを使って
っ ていた • こいつをgulp taskに組み込んだ • ビルド時間が0.1secに!
34.
こんな感じ
35.
asset_pathヘルパーを 解決するにあたっての課題 • sassにはasset_pathヘルパーなんてもちろんない ので、解決してくれない • Sprocketsにはcssのプロセッサーがないので.css ではasset_pathを解釈しない •
自分でSprocketsのプロセッサー作ればいけるの かも?
36.
腕力で解決を図る
37.
無理やり.css.erbに変換する か。erbなら余計な処理もな くて軽いでしょ
38.
というわけで解決した • http://qiita.com/joe-re/items/ a3366421b5fc538f6eae • lib-sassをかけた上で、gulp
task内で正規表現 を使ってsassのasset_helperの記法を無理やり erbの記法に置換する
39.
こんな感じ
40.
お前それかっこいいと 思ってんの?
41.
思ってませんすみません もっと良いやり方ご存知の方 教えてください 是非お願いします
42.
かくして僕たちは手に入れた
43.
ワーイヽ(゚ ゚)メ(゚ ゚)メ(゚
゚)ノワーイ
44.
おわり
Télécharger maintenant