デザイナーがタスクランナーツール「gulp」でSASSを自動コンパイルするまで

WEB

タスクランナーツール「gulp」でSassを自動コンパイルできるようにしました。

以前。SCOUTを利用してSASSを書くという記事を書いていたのですが、
今後も使用すると思うので、備忘録として。

gulpとは

gulp(ガルプ)とは、Node.jsをベースとしたビルドツールのことです。 画像の圧縮・SassやLESSのコンパイル・簡易ローカルサーバの立ち上げ・FTPアップロードなどなど、Web制作の面倒な作業を自動化してくれます。 gulpは「ごくごく飲む」という意味ですが、その名の通り流れるようにビルドができます。
– 出展：https://www.wan55.co.jp/column/detail/id=287

いわゆるタスクランナーツールというやつで、SASSのコンパイル、ローカル環境などを一手に行うことができるツールとのこと ※要プラグインインストール
gulpとは英語で「ごくごく飲む、(がつがつと)急いで食べる」という意味
画像圧縮やローカル環境合志区など、色々できるそうなのですが、今回はgulpでSASSをコンパイルすることにします。

ターミナルを使うけどそんなに難しくない

gulp.jsを導入する、使用する場合、ターミナルを使用します。
今まで「ターミナル=パソコン壊すこわい」というすごい短絡的な恐怖を抱いていたのですが、
今回触ってみた際はディレクトリの移動とインストールに使用するだけだったので、そこまで危険を感じなかったです。
（ターミナル上で削除とか書き換えが危ないっぽい）

やったこと・手順

1. node.jsをインストールする
2. ターミナルを使ってgulpをインストール
3. プラグインをインストール
　　└gulp-sass
4. gulpを使いたいプロジェクトに”package.json”を作成
5. プロジェクト内にgulpをインストール
6. gulpfile.jsの作成・設定

1. node.jsをインストールする

node.jsの公式サイトへ行き、node.jsをインストールします。
以下のコマンドをターミナルで入力し、verが無事に表示されたら、インストール完了です。

node -v

2. ターミナルを使ってgulpをインストール

次にgulpをインストールします。以下のコマンドをターミナルで入力。

$ npm install gulp -g

うまくいかない場合は下記のように入力（管理者権限でインストール）
パスワードを求められた場合はPCのログインパスワードを入れます。

$ sudo npm install gulp -g

4. gulpを使いたいプロジェクトに”package.json”を作成

次にgulpを使用したいフォルダに“package.json”を作成します。
まずはターミナルでgulpを使いたいプロジェクトファルダへ移動。

$ cd /Users/MyName/myproject

ちなみにMacではフォルダをターミナルのウィンドウにドラックアンドドロップするとファイルのパスが生成されるので、パス直打ちが面倒な人はそれでもOKです（cdを忘れずに！）
次に以下のコマンド入力。

npm init

プロジェクトの設定情報が記述されたpackage.jsonファイルがというものが生成されます。
コマンド入力後、プロジェクト名などの入力をもとめられますが、特に入力必要があればEnter(YES)を押して全スルーでも問題ありませんｂ

3. プラグインをインストール

次にプラグインをインストールします。今回はgulp-sassをインストールなので、下記コマンドでgulp-sassをインストールをします。

npm install –save-dev gulp-sass

5. プロジェクト内にgulpをインストール

次に自分が使用したいフォルダー内にgulpをインストールします。
下記コマンドでインストール（例によってエラーが出る人は”sudo”を入れます）

npm install –save-dev gulp

6. gulpfile.jsの作成・設定

gulpをインストールしただけでは意味がないので、gulpでどういった処理をするのかを定義するgulpfile.jsを作成します。
今秋はgulp-sassの設定、以下のように記述します。

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


// Sassコンパイルタスク
gulp.task('sass', function(){
  gulp.src('./css/sass/*.scss') // どのフォルダのsassを参照するのか設定
    .pipe(sass())
    .pipe(gulp.dest('./css/')); // コンパイルしたｓcssの出力先を設定
});


// watchタスク(**/*.scss変更時に実行するタスク)
gulp.task('sass-watch', ['sass'], function(){
  var watcher = gulp.watch('./css/sass/*.scss', ['sass']); 
  watcher.on('change', function(event) {
    console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
  });
});


// gulpのデフォルト動作としてsass-watchを実行
gulp.task('default', ['sass-watch']);

　

・gulpとgulp-sassを実行
・gulp-sassのコンパイル元とコンパイル先を指定
・watchタスクを行った際に.scssを変更時に実行するタスクを指定
・gulpを起動時にgulp watchを自動的に実行

gulp watchについて

gulpはターミナルでgulpと入力すると起動するようになっているのですが、SASSのように記述してすぐに確認したい場合、
SASS変更→ターミナルでgulp→確認と、チェックが面倒です。
なので、ファイルに更新があったらgulpの機能を起動するgulp watch(sass-watch)というのを設定しています。

これで、SASSのコンパイルが自動で行えるようになりました！

gulpで夢がもっとひろがりんぐ

今回はgulp-sassでSASSをコンパイルのご紹介でしたが、gulpではこれ以外にも様々なタスクをこなすことができるそうなので、業務効率化のため、gulpも色々触ってみますです。

ではではー。

参考記事：https://ics.media/entry/3290