Tag Archives: web

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です。

gulp.js

2015.4.18

たまにはこういうのも書いてみます。
最近ちょっと転職とか考えてみたりしててwebデザイナーとかフロントエンドエンジニアとかの求人を見ていると募集要項に「Gitを使ったチームでのソース管理」、「SASSやLESSを用いた開発経験」とか、「UI/UXを意識したサイトデザイン」とか書いてあってちょっとびっくりしてます。数年前に転職考えてた頃の求人は「Photoshop、 illustratorの実務経験x年」、とか「HTML、CSSの知識」とかだったような。
自分も趣味レベルでサイトとか作っててCSS3のほんの一部にjQueryのプラグインいっぱい使ってダイナミックだろ?ってドヤ顔してたんですけど、多分そういう人が最先端のweb作ってる会社に自信満々にいくと怪我するっぽい。
というのも去年の夏くらいに社内で、あいつちょっとHTMLかじってるらしいよみたいな噂が流れてマーケティングのほうに誘われ、異動することになり、最初はレスポンシブなHTMLメールを作るみたいなことをずっとやって(CRMメールのほぼ全てをレスポンシブにしてやりました)、それと平行してちょっとしたLPとか特設ページみたいなの作るようになったりして、そこでまず衝撃を受けたのがGitを使ったバージョン管理。趣味レベルでサイト構築してる人あるあるだと思うけど、ある部分を修正するコード半日くらい書いて、よし直ったって満足して眺めてたら違う部分のデザイン崩れてて、どこのタイミングからおかしくなってたのかわからなくて涙目みたいな現象。Gitでバージョンを管理してると更新履歴が残るので遡って、ここからおかしくなってるっていうのが突き止められます。何人かでひとつのファイルを修正する場合も間違って他人の修正に上書きしちゃうなんてこともありません。他にもいろいろ利点はあるのですが、詳しくはGitでググったらいっぱいでてくると思います。
さらに衝撃を受けたのがstylus。最初stylusって聞いてナニソレ美味しいの?って感じだったんですけど一度使うとcssを一から書くのがものすごく億劫になります。stylusっていうのはcssの拡張メタ言語で、上で書いたSASSとかLESSとかと同じ類です。例えばこんな感じ。

.content
 width 100%
 p
  color red

とstylusファイルに書いてコンパイルすると、

.content {
  width: 100%;
}
.content p {
  color: #f00;
}

ってな具合のcssファイルが吐き出される仕組みです。インデントすればいいだけなので深いセレクタも楽々。やはりチームで作業する際に個人の書き方の癖みたいなのがでなくなって誰が書いても綺麗なcssになるっていうのが利点かも。

前置きが長くなりましたがタイトルのgulp.jsの話です。タスクランナーっていう言葉も求人でちょくちょく見かけます。タスクランナーは拡張メタ言語のコンパイルから圧縮、書き出しなどを自動化するツールのことで有名なものに、Gruntや今回僕がインストールしたgulp.jsなどがあります。会社ではcodekitっていう有料のコンパイラを使っているのですが、自宅でもstylus使いたいけど有料のコンパイラは買うほどじゃないしっていうのと、あとやっぱ流行のタスクランナー使いたいっていうのがあってgulp.jsをインストールしました。
ちょっと前にもインストールを試みたんですがERR!って言われて放置してたんですが気をとりなおして。Node.jsとnpmがインストールされてる前提です。

まずgulpのグローバルインストール。

sudo npm install -g gulp

適当な場所にprojectフォルダを作成。

mkdir -p /Users/xxxx/project/stylus /Users/xxxx/project/css
cd /Users/xxxx/project/

projectフォルダにgulpをインストール。

sudo npm install --save-dev gulp

すると

npm ERR! Error: No compatible version found

などと言われたのでNodeのバージョンをv0.10.12からv0.10.23に変更。ちなみにnpmのバージョンは1.3.17です。

nodebrew use v0.10.23

gulpのインストールが完了しました。お次はパッケージです。

sudo npm install gulp-stylus
sudo npm install gulp-minify-css

projectフォルダにgulpfile.jsを作ります。

var gulp = require('gulp');
var stylus = require('gulp-stylus');
var minifyCSS = require('gulp-minify-css');

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

gulp.task('minify-css', function() {
  return gulp.src('css/*.css')
    .pipe(minifyCSS({keepBreaks:false}))
    .pipe(gulp.dest('./dist/'))
});

gulp.task('default', ['stylus','minify-css'])

というわけでさっそくprojectのstylusフォルダにさっきの.stylファイルを入れてgulpと叩いてみます。
めでたくproject/distの中にMinifyされた.cssが入っていました。


※2015.4.19 追記
sudoしないとPlease try running this command again as root/Administrator.って言われる問題が解決しました。下記を実行すると.npmディレクトリ内全てがユーザー権限で動かせるようになるみたい。
sudo chown -R $(whoami) /Users/xxxx/.npmこれでsudoしなくて済むようになりました。