WebDesigner's Memorandumウェブデザイナーの備忘録

効率的なWeb制作を実現するgulp入門

Sassのコンパイル、CSSやJavaScriptファイルの圧縮や結合、画像の圧縮にベンダープレフィックスの付与など、ウェブ実装に必要なさまざまなタスクを自動化してくれるのがgulpです。

このシリーズでは、そんなgulpでできることをまとめています。

gulpのインストール

様々な作業を自動化するgulpの基礎と導入方法

今回は様々な作業を自動化するビルドシステム「gulp(ガルプ)」の基礎と導入方法について書いていきます。 必要な前知識 gulpはNode.jsをベースにしたビルドシステムヘルパー(様々な作業を自動化してくれるツール)です。 「様々な作業って具体的に…

gulp watch

gulpのwatch機能を使って、監視ファイルに変更があった時にタスクを実行する

以前gulpのインストールと、Sassをコンパイルするための最低限の設定を行いました。 今回はそれに引き続き、ファイルを監視してSassが更新されたら自動でコンパイルするタスクを作成してみます。 やりたいこと 今回やりたい事としては下記の通り。 .s…

gulp-postcss

gulpでPostCSSを使う方法

gulpのプラグインの中にはPostCSSというフレームワークを必要とするものもあります。 今回はgulpでPostCSSを使う方法についてまとめておきます。 PostCSS PostCSSは、Node.js製のCSSを操作するプラグインの作成ができ…

gulpでデスクトップ通知を行う

gulp-plumberとgulp-notifyでgulpエラー時にデスクトップで通知がくるようにする

gulpで監視状態にして何か記述ミスをした時、ターミナルを見ないとgulpでエラーが発生している事に気が付きません。 そこで今回はgulp-plumberとgulp-notifyというプラグインを利用して、エラー時にデスクトップ通知が来るようにしてみ…