pugでHTMLを生成する時、変数をコメントに含めて出力するのに少しハマったのでメモ 変数をコメントに含める方法 - var hello = "world"; | ↓ 又はpugの文字列展開の方法を使って - var hello = "world"; != `` ↓ NG集 - var hello = "world";

前回minimistを使ってコマンドから実行するjsに変数を渡せるようにしました。 今回は、実際にコマンドのオプションで便利にgulpを使えるようにしてみた実例のメモです。 一つのgulp下に複数のhtmlサイトをディレクトリを区切って置いているイメージで、次の…

以前 Gulpでタスクを指定して実行することで無理やり処理を分岐させる方法を書いていました。 今回同じような需要が合って調べているとgulp実行時コマンドに直接キーと引数を渡せる素晴らしい方法があったのでメモ。 minimistを使ってコマンドラインから変数…

pugはHTMLテンプレートエンジンなのですが gulp などで拡張子をリネームしてしまえば PHPのテンプレートファイルにする事もできます。 ex: var gulp = require("gulp"), plumber = require("gulp-plumber"), rename = require('gulp-rename'), pug = require…

HTMLプリコンパイラのpugを使っていて、引数から計算をして値を返すMixinを作ろうとした所 mixin getCalendarRow(dayNum, start) return Math.ceil( (dayNum + start - 1) / 7 ); // 呼び出し側 div(class="row"+ +getMonthRow(30, 6)) 次のようなエラーに…

gulp-uglify v3.0.0 から/*!で始まるようなライセンスのコメントを残す preserveComments オプションは使えなくなっているので、エラーになる。 代わりにoutput:{ comments: /^!/ }を使えばOK。

`--depth 0`オプションを付けると依存関係のパッケージを非表示にした第一階層のパッケージ名だけがリスト表示される。 グローバルいインストールしたものなら下記のようなコマンド ```sh npm list -g --depth 0 ```

HTMLのコーディングの際にjadeを愛用しています。 jadeがpugになってから、所々仕様が変わっていたのでメモ Mixinの呼び出し方が変わった mixin 関数名() ではなく+関数名()になった。 jade mixin foo('引数') ↓ pug +foo('引数') 文字列中の変数展開の方法…

Node.jsのバージョンをv6.9.2に上げるにあたって、npmでグローバルにインストールしたパッケージを移行できるコマンドがあるということだったので、Node.jsのバージョン管理をnvmからnodebrewに乗り換えるました。npmのパッケージ結構容量を取るので... nvm…

コーディングをする時、Gulpでコンパイル&min化をしています。 min化したコードにコメントでバージョン情報とか、元のライセンス情報を入れたいケースとかがあります。 javascript ライブラリなどのライセンス情報で/*!で始まるコメントの場合はgulp-uglify…

前回 Ruby(sinatra)でStylusを使えるようにしました。 しかし、このままではSassで言うところのCompassにあたるnibを使うことができていませんでした。nibを使えるようにした際のメモです。 nibはnode(npm)でインストールしておく必要がある $ npm install n…

CSSのプリプロセッサはSASSとLESSの2強の様ですが、ぼくは頑なにStylusを使っています。 Stylusで変数を使って値を計算させる時、マイナスの値にしたいとかで不等号を変更する時は注意が必要です。 NGな例 変数名のまま出力される $posX = 100 .myClass back…

Stylusでループ中に配列から値をとってCSSを作ろうとした時にちょっとハマったのでメモ。 Stylusで配列から値をとって使う方法 // stylusの配列はの中にスペース区切りで書く colors = red blue yellow for i in (0..2) .font-color-{i} color: colors[i] 配…

タイトルからして超ニッチというか、意味がわからない感じですが、 例えばこんなHTMLがあったとします。 <ul class="myNav"> <li class="theme-1"><a class="btn">01</a></li> <li class="theme-2"><a class="btn">02</a></li> <li class="theme-3"><a class="btn">03</a></li> <li class="theme-4"><a class="btn">04</a></li> <li class="theme-5"><a class="btn">05</a>…</li></ul>

chaika.hatenablog.com node.jsのバージョンを上げたら、node-sassを使っていたプロジェクトでgulpコマンドを打つとで次のようなエラーが出るようになりました。 $ gulp [16:39:36] Warning: gulp version mismatch: [16:39:36] Global gulp is 3.9.1 [16:39…

nvmをアップデートする nvmのバージョンを確認 $ npm --version nvmをインストールしてあるディレクトリに移動 $ cd ~/.nvm 最新版にアップデート $ git fetch $ git pull origin master $ source ~/.nvm/nvm.sh $ nvm --version バージョンが新しくなってい…

Express4系でstylusを使おうとミドルウェアのを書いたのですが、コンパイルできなかかったりとはハマったのでメモ stylusとnibを導入 $ npm install --save stylus nib コンパイルできなかった例 // app.js var stylus = require('stylus'), nib = require('…

Express4系でjadeテンプレートを使いjadeでアプリ内のjavascriptファイルをscriptタグで読み込もうとしたら404になってハマってしまったのでメモ。 いわゆるスタティックファイルの読み込みです。 エラーになっていた状態 // app.js var express = require('…

jadeテンプレート内で配列やオブジェクトを記述する時、値を見やすくしようとして改行すると書き方によってはエラーになってしまいます。 エラーになる書き方 // jade - var list = [ 'one', 'two', 'tree' ] - var obj = { a: 'one', b: 'two', c: 'tree', …

$ gulp コマンドを打てば、webserverが起動して、gulp.watchも始まるようにする方法のメモ gulpコマンドはgulp.task('default')で定義したものが実行されるので var gulp = require("gulp"), webserver = require('gulp-webserver'); gulp.task('default', f…

https://dotinstall.com/lessons/basic_expressjs Express 4.xでやり終わったので、違ってた部分とかをまとめておこうと思います。 note. Express 4.xではapp.routerは廃止されているので、Express 3.xで必須だったapp.use(app.router)の記述は必要無い。 ap…

引き続き、ドットインストールのExpress入門 をやっています。 サンプルはExpress3系ですが、Express4系でチャレンジしています。今回は最後の #21 エラー処理をしていこう 値が正しくない時などエラーページを表示させる方法のレッスンでハマりました。 サ…

ドットインストールのExpress入門 をやっていて、サンプルはExpress3系なのですが、4系でやっていたので色々ハマりました。 たいていはモジュールを別途インストールして〜で済んだのですが、 #12 ルーティングを確認しようでPUT、DELETEメソッドに対応させ…

javascriptのファイルをJSHintでチェックするけど、対象ディレクトリ内のlibディレクトリ内のライブラリファイルはJSHintの対象から外したいとか、Gulp.src()の対象から除外する方法のメモ。 !指定すれば除外できる。 対象ファイルの前に!を追加すればOK EX:…

Gulpでjavascriptのファイルを監視 JSHintでエラーなどをチェック 問題がなければconcatで1つにまとめて、min化 browser-syncでリロード という処理を行わせようと思い、Google Web Starter Kitを参考にGulpのタスクを作っていたのですが、下記の問題に当た…

jadeでテンプレートを作成していて、開発時用と本番環境用とでCSSやjsの読み込みを変えたいというような事があります。 jadeでconfig.jadeの様なものを作成しておいて、devModeのようなフラグを基に出し分けることも出来るのですが、都度変数を変えてコンパ…

Gulpでタスクを実行していて、同じような処理だけど開発環境の時と本番リリース用でオプションを変更したいとかがあります。 開発環境用のタスクと、本番用のタスクとで別にタスクを書けば済む話なのですが、同じような記述が増えてしまうのが少しなんだかな…

最近はgulpでjadeをコンパイルしています。 <ul> <li ng-class="{active: thing.score < 50}"> <a href='[permlink slug="url"]'>LINK</a> <li> <ul> HTMLの属性などの中にWordPressのショートコードや、AngularJSのng-classとかを属性の中にコーテーションを使った値を入れたいケースなどがあります。 普通に書くとエスケープされる 属性の中の<や"がエ</ul></li></li></ul>…

最近Glupに慣れようと頑張っています。 世間一般でCSSのプリプロセッサーははSCSSやCompassがやはり多いのでしょうか？ 僕は個人的にStylusが好きなので、今日は今までGruntでやっていたstylus+nibのコンパイルをGulpでしようとしてハマってしまったのメモで…

パッケージマネージャーのBowerでBootstrapをインストールして、Gulpを使ってBootstrapのCSSとjavascriptを開発ディレクトリに持ってくる方法のメモ。 npmを使うのでnode.jsを前もってインストールしておく必要があります。 プロジェクトの準備 $ npm init n…