【デザイナーだってできるもん】コーディング環境をととのえる必携Gulp入門!【後編】

gulpfile.jsにタスクを登録し走らせる(実行する)手順

0-2

いよいよ本題の後編!Gulp入門前編【前編】ではGulpの概要と導入方法についてご紹介しました。後編はgulpfile.jsの書き方を覚えて実行できるようになりましょう。

■どうやったらgulpfile.jsは実行できるの?

– まずは、gulpfile.jsを”手動で”生成します
gulpfile.jsはプラグインではなくファイルなのでindex.htmlを生成するのと同じ要領で新規作成します。
package.jsonと同じ階層に格納しましょう。

-package.jsonとの関係をおさえることがポイントです。

タスクを書いたら、package.jsonに登録したプラグイン名(青枠部分)をgulpfile.jsに設定します。
※こちらはコマンドラインでインストールしたさいに、すでに記述されているので確認だけすればOKです。

↓ package.json

20160913_23

■gulpfile.jsの基本的な書き方

↓ gulpfile.jsを開きましょう

20160913_24
・青で囲っている部分は、package.jsonとひもづけるための設定になっています。
・”//sassコンパイルタスク”のコメント以降に具体的なタスクを設定していきます。

 
– 設定する内容①
・Sassをコンパイルさせて
・CSSのディレクトリに格納する。

var gulp = require(‘gulp’);
var sass = require(‘gulp-sass’);

//sassコンパイルタスク
gulp.task(‘sass’,function(){
gulp.src(‘./assets/sass/**/*.scss’)
.pipe(sass())
.pipe(gulp.dest(‘./assets/css/’));
});

基本的に上記をコピペして、ファイルのパス(緑の部分)だけ編集すれば実行できます。「*」のマークはSassとみなされるファイル”全てに適応“という記号になります。

– 設定する内容②
・Sassをコンパイルさせたら最新の状態にリロードするよう監視(watch)する。
・gulpコマンドのみで設定した全てのタスクを実行する。

//watchタスク(Sassファイル変更時に実行するタスク)をデフォルトにする
gulp.task(‘default’,function(){
gulp.watch(‘./develop/assets/sass/**/*.scss’,[‘sass’]);
});

gulp.taskとはじめに定義すると、gulpコマンドのみで設定したタスクを実行できるようになります。watchタスクを設定するさいに、上記で設定してあるsassコンパイルタスクを流用すると、スマートなタスク設定になります。

以上がgulpfile.jsタスクの基本的な書き方です。

■gulpを走らせてみよう!

では、最後にちゃんと実行できるか、いよいよgulpfile.js(タスクランナー)を実行してみましょう!ターミナル(コマンドプロンプト)にもどって、自分が実行したいファイルの階層に移動します(cdのあとにディレクトリをドロップ)

$cd /Applications/XAMPP/xamppfiles/htdocs/★★★★★

以下のコマンドを実行します。

$gulp sass
もし、すでにSass(SCSS)にスタイルを書いているかたは、記述にミスがあるとエラーの原因になるので注意してください。
問題なければ、指定したディレクトリにCSSにコンパイルされます。(テキストエディタやファインダーで確認)

20160913_25

$gulp
最後に上記のコマンドを実行し、ブラウザにタスクランナーが実行された状態で、更新したソースデータが反映されたら成功です!

img_7-1

おわりに

ディレクションにデザインにコーディングに開発環境の構築…。近年会社の規模や意向によって、webデザイナーの求められるスキルのハードルも高くなっています。今回はそのスキルのなかでも、なかなか手が出ない開発環境の構築についてふれてみました。ここまでできたらほぼ一人前!あとはグイグイそれぞれのスキルに磨きをかけ、あなたの長所をのばしていってくださいね!

この記事を書いた人:nomal

nomal

大手印刷会社で求人広告(エディトリアルデザインやコピーライティング)を担当し、2年半働いたあとWebデザイナーに転身。 猫とお寿司には目がありません。イラストを描いてリフレッシュしながら楽しく過ごしてます。 Twitter:@nomal_f

関連する記事

facebook

案件情報や最新記事をお届けします。
ぜひチェックしてみてください。