FEVDES BLOG

自分の経験をシェアしたい。Webデザインのテクニック&効率化。

CSS gulp

3分で設定完了。コピペでできるgulpでCompassのコンパイル

投稿日:2016年9月23日 更新日:

gulp
gulpでCompassのコンパイルを、コピペで済ますようになって、最初の設定が3分で済むようになりましたので、いつもやっている手順を紹介します。

2017/10/16 browser-sync追記

gulpやNode.jsのインストールがまだの方は、

ざっくりGulp.js入門(Mac向け) by @kazukichi3110

などを参考にインストールしてください。

SPONSORED LINK

(1)gulpをローカル環境にインストール

ターミナルを立ち上げ、gulpをローカル環境にインストール

cdコマンドで、作業のディレクトリに移動し、gulpをローカル環境にインストールします。

(2)package.jsonファイルを作成

Yes/Noを聞いてきますが、設定が不要ならYes(Enterキー)を教えて進んでかまいません。

(3)gulp-plumberをインストール

sassの記述にエラーがある場合、gulpが停止してしまいます。
記述ミスがあるたびに、gulpが停止してしまうのを防ぐために、「gulp-plumber」をインストールします。

(4)gulp-compassをインストール

compassを使用するために、「gulp-compass」をインストールします。

(5)browser-syncをインストール

(6)gulpfile.jsを作成

「gulpfile.js」を作成します。

sass: ‘sass’が.scssファイル入れているディレクトリで、css: ‘css’がcssファイルが書き出されるディレクトリです。
制作環境に合わせて変更してください。

(7)config.rbの準備

「config.rb」が必要ですので、「config.rb」を作成し、適時変更して利用してください。

(8)gulp watchでコンパイル

ターミナルに「gulp watch」と打ち込めば実行されます。

sassファイルを保存するたびに、cssファイルが書き出されます。

まとめ

私のようなWebデザイナーだと、タスクランナーが便利とわかっていても、設定ファイルがプログラムっぽくて二の足を踏むのですが、使い出すと便利です。
gulpは、ざっくりとしかわからないのですが、必要な時に調べて導入すると便利です。
ちょっとしたことですが、小さなことから効率化できると、複利計算のように大きくスピードアップできます。

参考サイト

PR

PR

-CSS, gulp
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

CSSのflexプロパティで右寄せ、左寄せ、中央寄せにする方法

CSSのflexプロパティを使うと、均等配置や順番の指定などができ便利ですが、 floatのように、右寄せ、左寄せにしたい場合もあります。

WordPressに自動でBootstrapのレスポンシブのテーブルのクラスを適用する

WordPressにBootstrapのレスポンシブのtableクラスである、table-responsiveを適用する方法です。 jQueryを使うことで、ソースを扱わずに済みます。 [crayon …

【CSS/JS】もっと目立たせて欲しいと言われた場合のTipsまとめ

キャンペーンサイトなど、動きをつけて、もっと目立たせて欲しいなどの要望を受けることは多いのではないでしょうか。言われて探すのは結構手間がかかったりします。見栄えする動きを中心にまとめました。 Phot …

pxをemや%に変換して一覧にしてくれるサイト

最近は、SASSを使えば、フォントサイズをpxからem/%に変換するのは簡単です。 しかし、以前作ったサイトを更新する際に、フォントサイズの一覧がない場合は、pxからem、%に計算するのが面倒です。 …

Webデザイナーが簡単にできる手作りスタイルガイド

スタイルガイドは色々ありますが、初心者には設定が面倒だったり、バージョンアップされないために後から使えなくなったりと、困ることがあります。 スタイルガイドがない場合、他の人にコーディングを頼む時に、教 …

PR




人気の記事

プロフィール

KIYOTA
KIYOTA
Webデザイナー / ウェブ解析士
デザインとコーディングと制作現場が大好きなWebデザイナー(Webデザイナー歴13年)
コーポレートサイトを中心に、官公庁・公共施設・メディア・商業施設・不動産など多岐のジャンルのWebサイトを数百件制作。
モットーは「Speed & Quality」。
広範囲な知識・技術・経験を活かした素早い制作が得意。 WACA上級ウェブ解析士。