かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

node.js

Mac Sublime Text 3 ESLint 導入メモ

ESLintをグローバルにインストール $ npm install -g eslint Sublime TextにSublimeLinterパッケージをインストール Sublime Textを起動しPackage Control(⌘+shift+P)を起動 Installと入力しInstall Packageを選択 SublimeLinterと入力しEnterを押してインス…

Mac OSX High Sierra 開発環境セットアップのメモ (2) node.js

CSSプリプロセッサやタスクランナーなどフロントを触るにはnode.jsは必須になっているのでnodeが使える環境のセットアップも必須になってる感じです。 1. nodebrewのインストール node.jsのバージョン管理をするnodebrewをインストールします。 お好みの方法…

node.js Express でHTMLとか確認できる簡単なローカルサーバー作ってみた

WEBサイトの制作のときならgulpでサーバー起動してCSS・JSを本番と同じようにコンパイルして確認するのが良いのですが、実験や学習用にでわざわざコンパイルまでしなくていいローカル環境が欲しかったのでexpressで作ってみました。 インストール $ npm inst…

Gulp 4 gulp.seriesとgulp.parallel

gulp v4 で追加されたgulp.seriesとgulp.parallelを試してみた gulp.series(...tasks) ... 順番に実行する gulp.parallel(...tasks) ... 並列に実行をする GitHubのサンプル gulp.task('one', function(done) { // do stuff done(); }); gulp.task('two', fu…

Gulp ディレクトリ構造を保ったままリネームしたい

ニッチ過ぎて一体どこに需要があるのか謎すぎるのですが、gulpでディレクトリ構造を保ったままリネームして出力する方法を試していたのでメモです。 stylusで試してますがpugやsass、jsファイルでも同じかと思います。 renameしない場合、パスの/**/の部分の…

Gulp Stylusでautoprefixerを使うメモ

nibだけだと今は不要になってるベンダープレフィックスも出力してしまうのでautoprefixerを使って対象ブラウザをコントロールするメモ node: v9.6.1 npm: v6.1.0 gulp@3.9.1 gulp-stylus@2.7.0 gulp-autoprefixer@2.3.1 nib@1.1.2 install $ npm install --s…

Gulp4 gulpコマンドでgulpInst.start.apply(gulpInst, toRun); Cannot read property 'apply' of undefinedで動かなくなった

久々にnpm installしてgulpを動かそうとしたところ $ gulp [08:46:54] Using gulpfile ~/Documents/local/gulpfile.js /.nodebrew/node/v6.9.2/lib/node_modules/gulp/bin/gulp.js:129 gulpInst.start.apply(gulpInst, toRun); ^ TypeError: Cannot read pro…

Pug 出力するコメントに変数を使いたい

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

Gulp 実行コマンドに独自のオプションを付けて便利にしてみる例

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

Gulp node.js 実行時に変数を渡して処理を分岐させたい

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

PugでPHPタグを出力したい

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

Pug 変数を返すMixinをつくりたい。

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

Gulp gulp-uglify でmin化しようとしたらエラーになった件

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

Node.js NPM 自分でインストールしたパッケージ名だけをリスト表示したい

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

jadeがpugになって変わった所のメモ

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

Node.js nvmからnodebrewに乗り換えるぞい!

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

Gulp min化したJS・CSSに自動でコメントを入れたい

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

Ruby Stylusでnibを使いたい。

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

Stylus 変数の計算で不等号を変更するときのメモ。

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

Stylus ループ中に配列から値を取得する際に気をつけること

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

Stylus プロパティの値に変数名を変数で指定したい。

タイトルからして超ニッチというか、意味がわからない感じですが、 例えばこんな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>

node.jsのバージョンを上げたらgulpでエラーが出るようになった時の解決方法

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, npm, Node.js関係をアップデートするぞぃ

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

Express4 stylusのコンパイルにハマる

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

Express4 jadeからのjsファイル読み込みにハマる。

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

jade テンプレート内の配列を見やすくするために改行したい。

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

Gulp コマンド一発でwebサーバーを立ち上げてwatchを開始したい

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

ドットインストール Express入門 Express 4.x でやる時のちがいまとめ。

Express 4.xでやり終わったので、違ってた部分とかをまとめておこうと思います。 note. Express 4.xではapp.routerは廃止されているので、Express 3.xで必須だったapp.use(app.router)の記述は必要無い。 app.use(app.router); があるとエラーになる -> Erro…

Express 4.x エラーハンドリングにハマる。

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

Express 4.x でmethod-overrideでput / delete メソッドを使いたいにハマる。

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