LoginSignup
41
37

More than 5 years have passed since last update.

@cotolier_risa(R Yasi)

デザイナーだけどGulpを使って制作環境を作ってみた　

Last updated at Posted at 2016-08-01

Gulpつくるまで

今まで仕事でコーディングするときは、エンジニアさんにコーディングの環境作ってもらい、
教えてもらったコマンド叩くだけ…という感じでコーディングの制作環境は全部エンジニアさん任せっていう感じでした。

そのうち何度か社内勉強会でGulpの勉強会をしてもらってその時は全然わからなかったけど、
前よりjsに触れる機会が多くなってきて、今日改めて自分でやってみたらちゃんと構築できたのでまとめておきます。

8/24 勉強会用gulpスライド
https://docs.google.com/presentation/d/136ELj-ll34WecyyfyhDfacKhcg1GJbom05y-VAnwY5s/edit#slide=id.g165a0cf126_1_591

9/22 WordBench大阪でのgulpハンズオン用スライド（内容はほぼ上と同じ）
https://docs.google.com/presentation/d/136ELj-ll34WecyyfyhDfacKhcg1GJbom05y-VAnwY5s/edit#slide=id.g35f391192_00

Gulpで作った制作環境

Gulpで自動化したタスクは以下のとおり。

  • jadeのコンパイル
  • sassのコンパイル
  • 上記それぞれwatch(変更を監視)し、変更があったらコンパイルする
  • browserSync（コンパイルされたファイルがあったらブラウザーを自動でリロードする）

作り方

【作る人に必要なスキル】

  • ターミナル（黒い画面）がちょっとだけでも使える。（ファイルの移動、コマンドを入力するくらいができればok）この記事では使えることを前提として記述していきます。
  • jsの記述を見慣れてるか（js書いたことなくてもできるけどjQueryとかでもいいので書き方知ってるだけでも理解しやすいと思われる）

【準備するもの】
以下は初回のみ。次回からは飛ばして大丈夫です。
1. node.jsのダウンロード　https://nodejs.org/en/
※ただし、$ node -vでバージョンが表示された方は無視してもらって大丈夫です。

  1. gulpのインストール　$ sudo npm i -g gulp

1.ディレクトリの準備

今回はこんな感じで作成しました。

project
　└frontend
　　　└assets
　　  　　└sass（scssファイルを入れる）
　　　　 └tmpl（jadeファイルを入れる）
　　└public
　　　　　└css（コンパイルしたcssが入る。今は空っぽ）

2.Gulpを使う準備

package.jsonを作成する

$ npm init

gulpのインストール

$ npm install gulp --save-dev

gulpfile.jsを作成

$ touch gulpfile.js

この３つのコマンドを入力することで以下のファイルができたと思います。
気になる人用にものすごーくざっくり説明。気にならない人は読み飛ばすの推奨。

  • node_modules :　便利なプラグインとかがいっぱい入ってるフォルダ。
  • package.json　:　先程の２つめのコマンドと関連してくるのですが、インストール系のコマンドに[--save-dev]をつけておくと、何をインストールしたかpackage.jsonが覚えていてくれる。なので、例えばnode_moduleのフォルダごと全部消してしまっても$ npm iのコマンドだけで今までインストールしたものを再度node_modulesに突っ込んでくれる仕組み。
  • gulpfile.js　：ここgulpのタスクを書いていきます。

詳しいことはちゃんとしたエンジニアさん聞くのが吉。

3.とりあえず簡単なタスクを書いてみる

簡単なタスクを書いてみて感覚をつかんでみる。
gulpfile.jsに以下を記述します。

//gulp使うよ宣言
var gulp = require("gulp");

//タスクの名前をつける
gulp.task("default",function(){

　　//ここに処理を記述
   console.log("ほげほげ");
});

"default"のところがタスク名（=gulpコマンドになる）

このコードは「gulp default」っていうコマンドを入力したら
console.logに"ほげほげ"を表示してねって意味になる。

実際にターミナルで確認

$ gulp default

ほげほげが表示されたら成功。

そして、defaultっていうタスク名に関しては省略できるので

$ gulp

だけで入力するのが普通。てことで、標準で使いまくるタスクはdefaultに記述すると便利。

4.させたい処理にあったプラグインを入れ、タスクを記述する

仕組みがなんとなくわかったところで、後の作業としては、
させたい処理にあったプラグインをnpm経由でインストールする　→　それに合わせてタスクをgulpfile.jsに記述する
これの繰り返し。

今回は

  • sassのコンパイル
  • jadeのコンパイル
  • jadeとsassを監視してファイルに変更があったら自動でコンパイルさせる
  • コンパイルされたファイルがあったらブラウザを自動でリロードする

この４つのタスクを書いていますが、不要なとこは軽めに眺めてもらって、必要なコマンドだけ入れてもらえれば良いかなーと思います。

sassのコンパイル

まずはsassのコンパイル用のプラグインを導入

$ npm install gulp-sass --save-dev

scssファイルの作成

$ touch frontend/assets/sass/common.scss

とりあえず中身には適当なコードを書いておきましょう

html {
　body {
　　background: orange;
　} 
}

gulpfile.jsにscssをコンパイルするタスクを記述する

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


gulp.task("sass",function(){
   gulp.src("./frontend/assets/sass/**/*.scss")
       .pipe(sass())
       .pipe(gulp.dest("./public/css"))
});

解説するとこう

//gulp-sassプラグインを使うための宣言
var sass = require("gulp-sass");

//"sass"はタスク名（=コマンド名）
gulp.task("sass",function(){

　　//.src　：読みに行くファイルの指定
   gulp.src("./frontend/assets/sass/**/*.scss")

　　//.pipe　：srcで指定したファイルにコンパイルするプラグインの処理を実行
       .pipe(sass())

　　//.pipe　：↑で処理したファイルを.gulp.destで指定された出力先に出力する
       .pipe(gulp.dest("./public/css"))
});

ターミナルで

$ gulp sass

と入力して無事にpublic/cssフォルダにcommon.cssが吐き出されていたら成功。

◎ちょっと補足。
パスの指定について。
.srcのところに書いた*とかはglob形式と呼ばれるもの
こちらの記事に少しメモしました。　http://qiita.com/yasui05821/items/2645d88eecfaa6e2bc1c

jadeのコンパイル

jadeのインストール

$ jade --versionでバージョンが出てこなかった人は
npm i jade

無事にバージョンが表示されたら

$ npm install gulp-jade --save-dev

jadeファイルの作成

$ touch frontend/assets/tmpl/index.jade

とりあえず中身には適当なjadeを書いておきましょう

doctype html
html
  head
  meta(charset='UTF-8')
  title Hello, Jade!
  body
    h1 Hello!

gulpfile.jsにjadeをコンパイルするタスクを記述する

var gulp = require("gulp");
var jade = require("gulp-jade");


gulp.task("jade",function(){
   gulp.src(["./frontend/assets/tmpl/**/*.jade","!./frontend/assets/tmpl/**/_*.jade"])
       .pipe(jade({
          pretty: true
       }))
       .pipe(gulp.dest("./public"))
});

解説するとこう。基本はsassと同じなのでsassで説明したところは飛ばします。

var jade = require("gulp-jade");

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

　//"!./frontend/assets/tmpl/**/_*.jade"はjadeファイル名の先頭にアンダーバーがついてるファイルはコンパイルさせないために記述
   gulp.src(["./frontend/assets/tmpl/**/*.jade","!./frontend/assets/tmpl/**/_*.jade"])

　//pretty: trueというオプションをつけることで、コンパイル後のhtmlが読みやすくなる。
       .pipe(jade({
          pretty: true
       }))
       .pipe(gulp.dest("./public"))
});

ターミナルで

$ gulp　jade

と入力して無事にpublicフォルダにindex.htmlが吐き出されていたら成功。

watch（ファイルを監視する）処理を記述する。

先ほど作ったsassとjadeのコンパイルの処理を、
jadeファイルやscssファイルに変更があったタイミングで自動でコンパイルする処理を書きます。
タスクの書き方は基本的に同じ。

gulp.task("watch",function(){
   gulp.watch("./frontend/assets/tmpl/**/*.jade",["jade"]);
   gulp.watch("./frontend/assets/sass/**/*.scss",["sass"]);
});

ターミナルで

$ gulp　watch

と入力してjade,scssそれぞれ書き換えたタイミングで勝手にコンパイルしてくれてたら成功。

エラーが出ても処理が止まらないようにする

sassを記述しているとき、セミコロンを入れ忘れたりなどのミスがあるとエラーが出るのですが、
エラーが出る度にwatchが止まってしまうのでエラーが出る度にまたコマンドを叩かないといけないことになります。
そこで、エラーがでても処理が止まらないように「gulp-plumber」というプラグインを入れます。

$ npm install gulp-plumber --save-dev

var plumber = require("gulp-plumber");


gulp.task("jade",function(){
   gulp.src(["./frontend/assets/tmpl/**/*.jade","!./frontend/assets/tmpl/**/_*.jade"])
       .pipe(plumber())
       .pipe(jade({
          pretty: true
       }))
       .pipe(gulp.dest("./public"))
});

gulp.task("sass",function(){
   gulp.src("./frontend/assets/sass/**/*.scss")
       .pipe(plumber())
       .pipe(sass())
       .pipe(gulp.dest("./public/css"))
});

jadeとsassのタスクそれぞれの.srcの記述の後に
.pipe(plumber())を追加します。

ブラウザを自動でリロードする

browserSyncというやつなのですが、ココでは説明しません。
使ったことないよって人は調べてみてください。とにかく便利。

gulp-browser-syncをインストール

$ npm install browser-sync --seve-dev

gulpfile.jsにbrowserSyncのタスクを記述する

var browser = require("browser-sync")

gulp.task("server",function() {
    browser.init({
        server: {
            baseDir:"./public"
        },
        open: "external"
    });
    gulp.watch([
        "./public/**/*"
    ],function(){
        setTimeout(function(){
            browser.reload();

        },500);
    })
});

解説。オプションやルートは必要に応じて変更してください。

var browser = require("browser-sync")

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

　　//"browserSyncを開くための設定"
    browser.init({
        server: {
　　　　　　　//baseDir: "ルートフォルダを指定する"
            baseDir:"./public"
        },

　　　　//ブラウザを開くときのオプション。externalのURLで開いてくれる（オンラインが必須）。この記述がない場合はアドレスがlocalhostになる。
        open: "external"
    });

　　//ここでpublicの中のフォルダに変更があったら（=何かしらのコンパイルされた時）ということを定義している
    gulp.watch([
        "./public/**/*"
    ],function(){

　　　　//setTimeout(function(){〜省略〜},500);は上の変更後の0.5秒後にリロードが走るようにしている。必須ではないけど、変更した瞬間に無駄にリロードされるのを防ぐために記述。
        setTimeout(function(){

　　　　　　//.reload　：同期しているブラザをすべてリロードするための処理
            browser.reload();

        },500);
    })
});

ターミナルで

$ gulp　server

でブラウザが立ち上がったら成功。

browsersyncのオプションもっと知りたい人はこちら
https://www.browsersync.io/docs/options

コマンドを整理する。

以上で基本的なタスクの自動化が完了しました。
でも現状のコマンドは以下のようになっているかと思います。

gulp sass　　：　scssファイルのコンパイル
gulp jade　　：　jadeファイルのコンパイル
gulp watch　 :　jade,scssに変更があったらコンパイルする
gulp server　:　何かしらのファイルがコンパイルされたらブラウザをリロードする

これらを
gulp 　　　　:　jade,scssに変更があったらコンパイルする
gulp build　 :　watchでうまくコンパイルできない時にコンパイルする
gulp server　:　何かしらのファイルがコンパイルされたらブラウザをリロードする（これはそのまま）

こんな感じにしたいと思います。

gulp.task("default",["watch"]);
gulp.task("build",["jade","sass"]);

タスクの中で別のタスクを呼び出すことで、タスクを複数処理するためのタスクを作ることができます。
こんな感じで、お好みにコマンドを生成するといい感じです。

作り方とかいいからその環境使いたい

って人いるのかどうかわからないけど。jadeやsassの練習だったり、Gulpがどういうものなのか使ってみたいって方はどうぞ。（まだまだひよっこなので、間違いとかあったらお手柔らかに指摘もらえると嬉しいです）
https://github.com/yasui05821/gulp-practice
README.mdにざっくり書いておりますが
画面右にある緑のボタンから、$ git cloneかzipでダウンロードしてもらって、

$ npm i

これだけ叩いてもらったら準備完了。あとはREADME.mdのコマンド一覧見て
叩いてもらえれば使えるはず。

※npmコマンド使えないよって方は以下の準備が必要。

今までnode.js使ったことない人、gulp初めて使う人は以下の手順にすすめてもらえば使えるようになるはず。

  1. node.jsのダウンロード（https://nodejs.org/en/）
    ※ただし、$ node -vでバージョンが表示された方は無視してもらって大丈夫です。

  2. gulpのインストール　$ sudo npm i -g gulp

41
37
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
41
37