gulp で BrowserSync を使う

HTML・CSS・JS 周りを含むプロジェクトを進める際に、これまでなら MAMP などのローカルでのサーバー環境を用意して進めていたのですが、 grunt や gulp などが出てきてからは、それらをベースに BrowserSync などを利用して開発を進めるようになりました。

毎回準備する手間が省けるのと、デプロイ場所をいろいろと変更してもひとまとめで扱うことができるため、今では無くてはならないツールになっています。

BrowserSync

続きを読む

gulp-sass のエラー時に gulp タスクを止めない為の方法

タスクランナーでどれを使うかをいろいろ模索中ですが、今は gulp.js を勉強しておこうと、いろいろと使ってみています。

gulp で Sass をコンパイルする時に使うプラグインはいろいろとあるのですが、今回使ってみるのが gulp-sass です。同じ Sass でも LibSass が使われているものの方がかなり早いですからね。

gulp-sass

この gulp-sass を利用している時に、 Sass のコードでエラーとなる記述をしてしまいますと、 gulp の watch などが止まってしまいます。一度止まってしまうと、 watch が強制終了的な動きをしてしまうので、気づかないでコードを書いていると、表示が変わってない〜と困惑してしまう状況に。

そんな gulp-sass のエラーで処理を止めない方法についてメモとして記載。

続きを読む

Web Starter Kit で JavaScript のライブラリを利用しようとしたらエラーで gulp のサーバーが止まってしまう場合の対応

Google が提供している、ウェブサイトを構築するためのツール、 Web Starter Kit

Web Starter Kit

レスポンシ対応のマルチデバイスボイラープレートなので、サイト構築のための準備部分の設定とか楽だろうなと思い、テストがてら触ってみた。

gulp の設定ファイルが入っているので、利用するとローカルサーバーでライブリロードもついてて、便利!なのはいいのですが、 JavaScript の コードを書いていると何やらエラーがでて、gulp のストリームも止まってしまうため、ローカルサーバー落ちてしまう状態に。

今回はそのエラーが出てもサーバーが止まらないようにする対応などをメモ。

続きを読む

Node.js 製の タスクランナー gulp.js を使ってみる

ここ最近のSaCSSでタスクランナーの導入やできることなどをテーマにお話をしていまして、6月7日に開催された vol.55 でも gulp についてを話てきました。

まだまだ Grunt で準備することのほうが多いのですが、今後は様々な場面で gulp.js が出てきそうだったので、ちょこちょこ gulp の使い方やできることなどなどをメモしていこうと思います。

まとめのエントリーはいつの日か書くかもしれないですが、とりあえずは導入や試したこと、使っているプラグインなどなどについてをまとめようと思います。

gulp.js – the streaming build system

続きを読む