Jadeでゴリゴリ書いてく時にちょっと注意することとか
最近Jadeにハマってます。で、書いてると時々エラーで引っかかることがあるのでメモ。
includeやextendのパス
includeやextendで読んでくるファイルのパスは、コンパイルするルートディレクトリのパスからじゃなくて、呼び出し元のファイルからの相対パス。
つまり、/hoge/fuga/piyo.jadeを編集していて、このファイルから/include/_sugoi.jadeをincludeする場合、
include ../../include_sugoi
とする。
特にextendはレイアウトとかを書いておいて、すべてのファイルで使いまわす場合がほとんどな気がするので注意が必要。
mixinは外部ファイルに定義しといても大丈夫
mixinも定義するファイルを別にしておいて、includeして使える。当たり前といえば当たり前だけど。
/mixin/_saikounomixin.jadeがあったとして、これを/page/hoge.jadeから使いたい場合は、次のようになる。
include ../mixin/_saikounomixin +saikounomixin(args)
incudeするときに絶対パスを使いたい
上記二点に付随して、よくよく考えたら絶対パス使えれば楽ということにきづいた。
というわけで試してみたら、
the "basedir" option is required to use "include" width "absolute" paths
と怒られてしまった。
なので、optionに、
option: { basedir: '<%= path.src %>/jade' }
という感じでjadeのルートパスを指定してやったところ、無事成功。
そんなわけで、includeするときに絶対パスを使えるようにしたい場合はoptionでbasedirを指定してやりましょう。
参考までにGruntのjade用タスク部分を下記に。
jade: { compile: { options: { pretty: true, data: { // コンパイル時に渡しておきたいオブジェクト }, basedir: '<%= path.src %>/jade' }, files: [{ expand: true, cwd: '<%= path.src %>/jade', src: '**/!(_)*.jade', dest: '<%= path.dist %>', ext: '.html' }] } }
javascriptとかをjadeに直接書く場合とか
ちょっとしたjsをjadeに直接書く場合とか、たまーにしかやらないようなこと。
script hoge(); function hoge() { console.log('fuga'); }
はだめで、
script. hoge(); function hoge() { console.log('fuga'); }
が正しい。
scriptのあとに、.が必要。そうしないとうまいこと展開してくれない。
=の使い方周り
=の使い方周り、意外とまぎらわしいのでまとめてみる。
入力のあとに実際のコンパイル結果を（Jadeの）コメントアウトで書いてます
elementName= 値で要素の中に値を入れる。elementNameと=の間は半角スペースなどは入れてはいけない。=と値の間に半角スペース。
変数は展開される。文字列を直接入力する場合は''で囲う。javascriptにおける変数への値の代入と思えばいい。
p= '適当な文章' //- <p>適当な文章</p> - var val = '適当な文章' p= val //- <p>適当な文章</p>
=のみなら文字列はエスケープされる。!=にするとエスケープされないので、タグなどを入れた場合タグとして出力される。
p= '適当な文章 <escaped>' //- <p>適当な文章<escaped></p> p!= '適当な文章 <escaped>' //- <p>適当な文章<escaped></p>
Attributesの設定は attr=value。=の前後にスペース入れない。
- var cls = 'hoge fuga piyo' p(class=cls) img(src='/path/to/img.png', alt='image', width=60, height=60) // <p class="hoge fuga piyo"><img src="/path/to/img.png" alt="image" width="60" height="60"></p>
Gruntfile.jsで新しいプラグインを入れるときに楽をするやつ+何か
Gruntを使っていて、後から新しいプラグインを入れるとき、いちいち次のようにGruntfile.jsにプラグインを読み込む一文を追加しないといけない。
grunt.loadNpmTasks('grunt-new-plugin');
これはとても面倒。
面倒だし、うっかり追加忘れてエラー吐いてしまうとかよくある。ゆえにダサい。
自動化する。
module.exports = function(grunt) { // ここから var pkg = grunt.file.readJSON('package.json'); var taskName; for(taskName in pkg.devDependencies) { if(taskName.substring(0, 6) == 'grunt-') { grunt.loadNpmTasks(taskName); } } // ここまでを追加 // 以下通常通りtask定義などしていく };
これでOK。package.jsonをもともと読み込んでるならそれをそのまま使えばOK。
あとはいつもどおりmodule.exportsの中にtaskを定義したり、grunt.registerTaskしたりする。
他にも細かい設定とかも、Gruntfileガリガリ書いてるとそこら中に散らばったりして面倒なことが多い。そういうときも適当にgrunt.conf.jsonとかそういうのを作っておいて、まとめておくと後々楽だったりするかもしれない。
その場合も同じように
var conf = grunt.file.readJSON('grunt.conf.json');
とかやってconfを読み込んでおけば、
dest: '<%= conf.hoge %>/piyopiyo',
option: conf.hogeOpt
みたいな感じで使えて楽。多分。
jQueryでイベント管理とかしている時にうっかり忘れるとハマるやつ
なにかDOMがあって、それに対してイベント監視しておいて、イベント発火時にそのイベントの情報をもとに色々と操作したいとき。
var $dom = $('.target_btn'); $dom.on('click', function(event) { var target = event.target; console.log(target); // undefined });
って感じに生のjsと同じように直接eventのプロパティ取ってこようとすると、undedinedになる。
jQueryでイベント発火とかさせていた場合は、event.originalEventに生のjsの時と同じようにプロパティが入ってる。
var $dom = $('.target_btn'); $dom.on('click', function(event) { var oEvt = event.originalEvent, target = oEvt.target; console.log(target); // .target_btnなDOM });
なので、こっちが正しい。
うっかり忘れて書いてるとハマる。
そこそこ使う気がするsassのmixinのメモを残しておきます
opacity（IE対策）
@mixin opacity($opacity) {
$ieopacity: $opacity*100;
opacity: $opacity;
filter: alpha(opacity= #{$ieopacity});
-ms-filter: "alpha(opacity=#{$ieopacity})";
}
ブロックのセンタリング
もちろん親要素にposition: relative;必要
@mixin center {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
margin: auto;
}
minのサイズ（IE対策）
@mixin minHeight($px) {
min-height: $px;
height: auto !important;
height: $px;
}
@mixin minWidth($px) {
min-width: $px;
width: auto !important;
width: $px;
}
display: inline-blck;（IE対策）
@mixin inlineBlock {
display: inline-block;
*display: inline;
*zoom: 1;
}
1行に入りきらない時の末尾を三点リーダに変える
要素にwidth設定必要あり
@mixin overflowEllipsis {
white-space: nowrap;
overflow: hidden;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
}
keyframe-animationの設定用
@mixin prefixKeyframes($name) {
@if $use-prefix-webkit {
@-webkit-keyframes #{$name} {
@content;
}
}
@if $use-prefix-moz {
@-moz-keyframes #{$name} {
@content;
}
}
@if $use-prefix-ms {
@-ms-keyframes #{$name} {
@content;
}
}
@if $use-prefix-o {
@-o-keyframes #{$name} {
@content;
}
}
@keyframes #{$name} {
@content;
}
}
呼び出しは次みたいな感じで。
@include prefixKeyframes('animation-name') {
0% { }
100% { }
}
なんか思いついたらまた書きます。
Sublime TextのSettingで忘れがちなやつ
エディタはSublime Text派ですが、Settingの書き方とか結構忘れがちなので備忘録代わりに。
プロジェクトの設定
設定ファイルを開く
メニューバー > Project > Edit Project
プロジェクトのワーキングツリーに任意のフォルダを任意の名前で追加する。
/Users/rtshaaa/project/src/jadeをhtmlという名前で、
/Users/rtshaaa/project/specをspecという名前でそれぞれワーキングツリーのルート直下に追加したい場合
{ "folders": [ { "path": "/Users/rtshaaa/project/src/jade", "name": "html" }, { "path": "/Users/rtshaaa/project/spec", "name": "spec" } ] }
任意のフォルダを追加しつつ、フォルダ内の除外パターンを設定する
gabageディレクトリを除外し、*.cssなファイルを除外する
{ "folders": [ { "path": "/Users/rtshaaa/project/src", "name": "src", "folder_exclude_patterns": [ "gabage" ], "file_exclude_patterns": [ "*.css" ] } ] }
このプロジェクトだけインデントのルール変える
いつもは4だけどこれだけ2にするとき
{ "folders": { // フォルダの設定 }, "settings": { "tab_size": 2 } }
同様にグローバルにSettingsに記述する他の設定も、このsettingsの中にいれる。
拡張子ごとの設定
拡張子ごとにも設定を書ける。
対象となる拡張子のファイルを開く > メニューバー > Sublime Text 2 > Preference > Settings More > Syntax Specific - User
記述法はグローバルのSettingsと全く同じ。
他にもなんか思い出したら追記します
