Category Archives: Daily

gulp-plumber,gulp-notify

2015.9.22

watchで監視中にビルドでエラーが出るとwatchが中断してしまい、それに気づかずずっと作業を続けていてターミナル見たらだいぶ前から動いていなかったっていうことがあったのでgulp-plumberでエラーが出てもwatchが途切れないようにして、かつエラーが出たことをデスクトップ通知するようにgulp-notifyをインストールしました。

まずはgulp-plumber。

sudo npm install gulp-plumber --save-dev

gulpfile.jsに下記を追記します。

var plumber = require('gulp-plumber');

そして各タスクにpipeで差し込んであげれば完了です。

gulp.task('stylus', function() {
  gulp.src(['src/stylus/*.styl'])
    .pipe(plumber())//plumber追加
    .pipe(stylus())
    .pipe(gulp.dest('src/css/'));
});

次にgulp-notifyをinstall。

sudo npm install gulp-notify --save-dev

gulpfile.jsに下記を追記します。

var notify = require('gulp-notify');

plumberにはerrorHandlerというエラー内容をコンソールに出力するオプションがあるので、それをnotifyで拾ってデスクトップ通知するという仕組みです。
先ほど差し込んだplumberの部分を下記のようにします。

gulp.task('stylus', function() {
  gulp.src(['src/stylus/*.styl'])
    .pipe(plumber({
      errorHandler: notify.onError("Error: <%= error.message %>")
    }))
    .pipe(stylus())
    .pipe(gulp.dest('src/css/'));
});

これで完成です。

SourceTree

2015.6.3

web系の記事のほうがアクセスがいいので、gulpに引き続き、今度はGitについて書いてみます。Gitについては僕もまだまだ勉強中ですが、最近のweb業界では知らないとまずい感じになってきてるらしいです。
そのGitをGUIでわかりやすく使えるクライアント、SourceTreeをインストールしてみました。SourceTreeはフリーで使い勝手もよく、職場でも使用しています。ダウンロードは下記リンクからどうぞ。

Free Mercurial and Git Client for Windows and Mac | Atlassian SourceTree

僕が借りているレンタルサーバーはGitが使えない、というかSSHが使えない低額プランだったのでとりあえずリモートリポジトリは諦め、ローカルのみで使っています。

スクリーンショット 2015-06-01 22.22.35

インストールが完了したら、リポジトリブラウザで上部の新規リポジトリをクリックし、バージョン管理したいフォルダを選択します。
最初のコミットはそのフォルダ内の全ファイルの追加になります。
スクリーンショット 2015-06-01 22.25.18全てステージしてコミットします。めでたくファーストコミット完了です。あとは変更を加える度に履歴として残っていきます。次にブランチを切ってみます。上部メニューのブランチをクリックし新規ブランチのところにブランチの名前を入力します。testという名前にしてみます。
スクリーンショット 2015-06-03 8.59.35
そこで試しにstylusにpadding-bottom 0の1行加えて、コミット。
スクリーンショット 2015-06-03 8.26.11
そのあとでmasterに戻ってみます。
スクリーンショット 2015-06-03 8.16.29
すると、あら不思議。先ほど変更を加えたstylusファイルを見てみると、追加した1行がなくなっています。
スクリーンショット 2015-06-03 8.29.01
消えた?と不安になるのですが、testブランチに戻れば変更は生きています。これが意味するところは枝分かれしたブランチの先で加えた変更はその他のブランチには影響を及ぼさないということです。この機能のおかげで複数人でひとつのリポジトリを編集していくことができるというわけです。


※2015.6.26 追記
SourceTreeは無料で使えると書きましたが、ライセンス登録は必要でした。
Atlassianのサイトに行きMy Atlassianにサインアップ。僕はGoogleアカウントを使いました。My Attlasianに入りメニューのライセンスへ。New SourceTree Licenseをクリックし、Licensed toの後に名前、下のチェックボックスにチェックを入れてライセンスの生成をクリック。これでライセンスが生成されるので、後はDownload your SourceTree licenseをクリックして落ちてきたファイルをSourceTreeの登録→ライセンスを読み込む、で先ほどのファイルを選択すれば完了です。

gulp.watch

2015.6.2

gulpで.stylファイルの変更を監視して、変更があればコンパイルを走らせるようにしました。
最初とあるサイトでgulp-watchというnpmモジュールが紹介されていて、インストールしてみたのですが、うまく動かず。そこで別のサイトで調べなおしてみると、gulpにはgulp.watchというメソッドがあるので、モジュールは追加しなくてもいいみたいでした。なのでgulp-watchはアンインストールして、gulp.watchのタスクを定義してみました。
まずgulp-stylusの部分は下記の通りです。

var gulp = require('gulp');
var stylus = require('gulp-stylus');
gulp.task('stylus', function() {
gulp.src('stylus/*')
.pipe(stylus())
.pipe(gulp.dest('css/'));
});

gulpfile.jsと同階層にあるstylusフォルダ内の.stylファイルをコンパイルする設定になっています。
そこで、stylusフォルダ内の.stylファイルに変更が加わったらgulp-stylusを走らせたいので下記のようなタスクを定義します。

gulp.task('watch', function() {
gulp.watch('stylus/*', ['stylus']);
});

これで完了です。監視したいファイルを増やすにはこんな感じに。

gulp.task('watch', function() {
gulp.watch('stylus/*', ['stylus']);
gulp.watch('css/*.css', ['minify-css']);
gulp.watch('js/*.js', ['compress']);
gulp.watch('src/icons/*.svg', ['font']);
});

監視を開始するには
gulp watchとコマンドを叩きます。監視の終了はcontrol + Cです。

CLUTCH COLLECTION 2015

2015.5.29

IMG_3511IMG_3514IMG_3515IMG_3518
26日、横浜で行われているCLUTCH MAGAZINE主催のCLUTCH COLLECTIONというイベントに行ってきました。メインは大さん橋で行われているアメカジ系ブランドの合同展示会で、それに併せて赤レンガ倉庫でCLUTCH VINTAGE MALLという全国の古着屋が集まる会も同時開催されていました。展示会にも行きたかったんですが時間が合わず、赤レンガに直行しました。事前登録してあったので受付で名刺見せるだけで入れました&ドリチケ2枚貰えました。ちなみに一般入場は1000円かかるみたいでした。

CC SHOW