gulp で BrowserSync を使う
HTML・CSS・JS 周りを含むプロジェクトを進める際に、これまでなら MAMP などのローカルでのサーバー環境を用意して進めていたのですが、 grunt や gulp などが出てきてからは、それらをベースに BrowserSync
などを利用して開発を進めるようになりました。
毎回準備する手間が省けるのと、デプロイ場所をいろいろと変更してもひとまとめで扱うことができるため、今では無くてはならないツールになっています。
続きを読むHTML・CSS・JS 周りを含むプロジェクトを進める際に、これまでなら MAMP などのローカルでのサーバー環境を用意して進めていたのですが、 grunt や gulp などが出てきてからは、それらをベースに BrowserSync
などを利用して開発を進めるようになりました。
毎回準備する手間が省けるのと、デプロイ場所をいろいろと変更してもひとまとめで扱うことができるため、今では無くてはならないツールになっています。
続きを読むタスクランナーでどれを使うかをいろいろ模索中ですが、今は gulp.js を勉強しておこうと、いろいろと使ってみています。
gulp で Sass をコンパイルする時に使うプラグインはいろいろとあるのですが、今回使ってみるのが gulp-sass です。同じ Sass でも LibSass が使われているものの方がかなり早いですからね。
この gulp-sass を利用している時に、 Sass のコードでエラーとなる記述をしてしまいますと、 gulp の watch などが止まってしまいます。一度止まってしまうと、 watch が強制終了的な動きをしてしまうので、気づかないでコードを書いていると、表示が変わってない〜と困惑してしまう状況に。
そんな gulp-sass のエラーで処理を止めない方法についてメモとして記載。
続きを読むGoogle が提供している、ウェブサイトを構築するためのツール、 Web Starter Kit。
レスポンシ対応のマルチデバイスボイラープレートなので、サイト構築のための準備部分の設定とか楽だろうなと思い、テストがてら触ってみた。
gulp の設定ファイルが入っているので、利用するとローカルサーバーでライブリロードもついてて、便利!なのはいいのですが、 JavaScript の コードを書いていると何やらエラーがでて、gulp のストリームも止まってしまうため、ローカルサーバー落ちてしまう状態に。
今回はそのエラーが出てもサーバーが止まらないようにする対応などをメモ。
続きを読むここ最近のSaCSSでタスクランナーの導入やできることなどをテーマにお話をしていまして、6月7日に開催された vol.55 でも gulp についてを話てきました。
まだまだ Grunt で準備することのほうが多いのですが、今後は様々な場面で gulp.js が出てきそうだったので、ちょこちょこ gulp の使い方やできることなどなどをメモしていこうと思います。
まとめのエントリーはいつの日か書くかもしれないですが、とりあえずは導入や試したこと、使っているプラグインなどなどについてをまとめようと思います。
gulp.js – the streaming build system
続きを読む