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

1 はじめに
2 設定ファイルの作成
3 プラグインのインストール
4 設定ファイルへの追記
5 実際にコンパイルしてみる
6 他の記事

はじめに

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

設定ファイルの作成

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

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

var gulp = require('gulp');

1	var gulp = require('gulp');

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

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

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

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

npm install --save-dev gulp-sass

1	npm install --save-dev gulp-sass

設定ファイルへの追記

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

var gulp = require("gulp");
var sass = require('gulp-sass');

//sass
gulp.task("sass", function () {
gulp.src(
'dev/scss/*.scss'
)
.pipe(gulp.dest('pub/css'));
});

var gulp = require("gulp");

var sass = require('gulp-sass');

//sass

gulp.task("sass", function () {

gulp.src(

'dev/scss/*.scss'

)

.pipe(gulp.dest('pub/css'));

});

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