はじめに
本当ははじめてじゃないんですが、久しぶりにいじったら忘れていたので勉強しなおしました。
gulpとは
gulp.js(公式サイト)
node.jsベースのビルドシステムヘルパー。
様々な作業を自動化してくれる（例えばファイルの圧縮とか、Sassのコンパイルとかとか）。
gulpfile.jsというファイルを作って操作して行きます。
この記事の目標
必要な機能をつけた環境を、gulpでスムーズに作成できるようになる。
バージョン
node.js 6.10.1
npm 5.0.3
フォルダ構成
test-gulp
|-css
|-sass
|-style.scss
|-js
|-index.html
手順
前準備
ディレクトリ移動
今回使うディレクトリに移動します。
$ cd test-gulp
npmの初期化とpackage.jsonの作成
下のコマンドを打つと名前などいろいろなことを聞かれます。答え終えると、ディレクトリにpackage.jsonが作成されます。
$ npm init
{
"name": "test-gulp",
"version": "1.0.0",
"description": "gulpの練習",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
gulp.jsの導入
--save-devはpackage.json の devDependencies に追加され、--saveだとpackage.json の dependenciesに追加され、他の人がnpm installした時にすべてインストールされます。
$ npm install gulp --save-dev
上のコマンドを打った後にpackage.jsonを確認するとdevDependenciesの中にgulpが増えているのがわかります。
{
"name": "test-gulp",
"version": "1.0.0",
"description": "gulpの練習",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"gulp": "gulp"
},
"author": "",
"license": "ISC",
"devDependencies": {
"gulp": "^3.9.1"
}
}
gulpfile.jsの導入(gulpの設定)
ここからgulpfileを作成して、設定を行います。gulpfile.jsはpackage.jsonと同じディレクトリにおきます。
$ touch gulpfile.js
gulpfile.jsを作成したら、中でgulpを呼び出すコードを記入します。
var gulp = require("gulp");
これでgulpが使えるようになりました。
gulpにタスクの導入
ここからは必要なプラグインをgulpに導入していく作業です。その時その時に必要なものを入れて行きましょう。今回はgulp-sassというSassのコンパイルプラグインをいれてみます。
gulp-sass - npm
プラグインのインストール
インストールをして、package.jsonに追加されたかを確認します。
$ npm install gulp-sass --save-dev
{
"name": "test-gulp",
"version": "1.0.0",
"description": "gulpの練習",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"gulp": "gulp"
},
"author": "",
"license": "ISC",
"devDependencies": {
"gulp": "^3.9.1",
"gulp-sass": "^4.0.1"
}
}
タスクの追加
インストールできたことが確認できたら、gulpfile.jsに呼び込んでタスクを登録します。
var gulp = require("gulp");
var sass = require("gulp-sass");
gulp.task("sass",function(){
gulp.src("sass/**/*.scss")
.pipe(sass({outputStyle: 'expanded'}))
.pipe(gulp.dest("./css"))
})
gulp.task("タスク名",function(){})…タスクの登録を行います。
gulp.src("")…呼ぶファイルを設定します。今回の記述はsassフォルダに入っているscssで終わるファイルを全て呼ぶように設定しています。他の場所のファイルを呼び込みたいときは書き方を変えます。minimatchという書き方だそうです。
pipe()…srcで取得したファイルに行う処理を書きます。
sass()…コンパイルの実行をします。outputStyleで吐き出すcssのスタイルを設定できます。
gulp.dest()…出力したい場所を書きます。今回はcssフォルダに吐き出したいので上の記述にします。
コンパイルの実行
gulpの設定ができたので、タスクの実行を行います
$ gulp sass
成功すれば、cssフォルダにsassファイルから作られたcssファイルができているはずです。
使いそうなプラグイン
ファイルの監視
ファイルの変更を監視して、変更された時に自動的にタスクを実行してくれるものです。
インストールは必要なく、以下のコードをgulpfile.jsに追加します。
gulp.task("default",function(){
gulp.watch("sass/**/*.scss",["sass"]);
})
watch(['監視するファイル'],['実行したいタスク名'])
タスク名をdefaultにするとコマンドにタスク名を入れる必要がなくなり便利です。
よく使うものに設定しましょう。
自動リロード"browser-sync"
タスクが実行された後、更新ボタンを押さずにブラウザを更新することができます。
$ npm install browser-sync --save-dev
タスクの後にpipe（）でbrowser.reloadを追加してあげます。
var browser = require("browser-sync");
gulp.task("server", function() {
browser({
server: {
baseDir: "./"
}
});
});
gulp.task("sass", function() {
gulp.src("sass/**/*.scss")
.pipe(sass({outputStyle: 'expanded'}))
.pipe(gulp.dest("./css"))
.pipe(browser.reload({stream:true}))
});
エラー時のストップ防止 "gulp-plumber"
上の自動リロードは便利ですが、一度エラーがでると監視状態が解除されてしまします。
毎回タスクを実行しなおすのはめんどくさいので、エラー時にも監視を解除しないように設定してあげます。
$ npm install gulp-plumber --save-dev
タスクの前にpipeでplumber()を実行してあげればok。
var plumber = require("gulp-plumber");
gulp.task("sass", function() {
gulp.src("sass/**/*.scss")
.pipe(plumber())
.pipe(sass({outputStyle: 'expanded'}))
.pipe(gulp.dest("./css"))
.pipe(browser.reload({stream:true}))
});
これでエラーメッセージはでても監視のストップはされなくなりました。
終わりに
ここにあげたプラグイン以外にもたくさんの便利なものたくさんあります。
ぜひ自分にとって最高の環境を作ってみてください。