第4回「Gulpを導入してみよう!その2」

  • このエントリーをはてなブックマークに追加

はじめに

こんにちは!
テンダ仙台支店webデザイナーのYHです。
前回はGulpのインストールまで行ったので、今回はプラグインのインストールと設定ファイルの作成を見ていきましょう。
引き続き、実際に使用するまでのお話です。

設定ファイルの作成

Gulpに自動化したい仕事(タスク)を任せるために設定ファイルを作成します。
gulpfile.jsと名前でファイルをappフォルダ内に作ります。

まずは一文書きましょう。

とりあえずGulpを使用できるようになりました。

プラグインのインストール

設定ファイルを書く前に、自動化したい処理を行うプラグインをインストールします。
今回はsassコンパイルを行ってみましょう。
例としてディレクトリを以下のようにします。

sassコンパイルには以下のプラグインをインストールします。

設定ファイルへの追記

インストールが完了したら、gulpfile.jsへ追記を行いましょう。

2行目はプラグインの呼び出し、5~10行目が自動化の指示(タスク)にあたります。
9行目でpub配下のcssフォルダへコンパイルしたcssを出力するように設定しています。
8行目のアスタリスクによるファイル指定は、scssフォルダ配下にあるscss全て指定するという意味です。
これでコンパイルを行う準備ができました。

実際にコンパイルしてみる

作成したら、コマンドプロンプトへ[gulp タスク名]を入力します。

これでsassをコンパイルするタスクが実行されます。

他の記事

第1回「web制作が便利に!Gulpを知った気になれる記事」

第2回「Gulpを使ってできること」

第3回「Gulpを導入してみよう!その1」

第4回「Gulpを導入してみよう!その2」

第5回「Gulpを導入してみよう!その3」

第6回「Gulp活用 実際のweb制作では」

  • このエントリーをはてなブックマークに追加

ウェブサイト制作・ウェブアプリ開発なら

下記のお悩みがあればお気軽にご相談ください。

・ウェブサイトをリニューアルしたい
・ECサイトを新規に構築したい
・自社だけのオリジナルサービスを作りたい
・ウェブサイトを作りたいが何から始めて良いかわからない


お問い合わせ

株式会社テンダ
第4回「Gulpを導入してみよう!その2」
テンダ仙台支店
サイトトップ
支店情報
オフィス情報
取り組み
ヴィジョン
事業紹介
開発分野
開発言語
パッケージ
実績紹介
すべて
開発実績
デザイン実績
その他
採用情報
ブログ
お問い合わせ
Copyright© TENDA Co.,Ltd. All Rights Reserved.