- コンパイル
- 圧縮
- 保存
といった動作を自動でやってくれる賢いGulp。
でも環境構築はいつもひとまかせ。
さすがに覚えようと、うちの会社でちょくちょくやってる勉強会に参加しました。
#準備
##node.jsのダウンロード
Gulpはnode.jsで動いてるのでまずはダウンロードします。
バージョンについては4, 6などの偶数はLTS対応、5などの奇数は挑戦的な新機能を含むものらしい。
私は5でした。
##gulpをインストール
$ npm i -g gulpでgulpをインストール。
##フォルダつくる
-
gulpfile.jsをつくる -
$npm initでpackage.jsonをゲットする -
$npm i gulp node_modulesでnode_modulesもいれる
フォルダ名が"gulp"だとうまくいかないので、もしそうしちゃった場合はpackage.jsonの"name"をかきかえる。
#gulpfile.jsを書いてみよう
###記法ルール
基本はgulp.taskと書く感じ。
functionの中に内容を記述する。
var bourbon = require("node-bourbon");
のようにnode経由でいろいろインストールしてきたやつをよみこんでつかっていく。
コマンド叩いてうまくいかないときはrequireをチェックして、なければ$ npm iを。
##$ gulp（デフォルト）
var gulp = require("gulp");
gulp.task("default", function(){
console.log("Hello World")
});
これでgulpとターミナルで叩くと "Hello World" と表示される。
##$ gulp {好きなタスク名}
次は早速自分の好きなタスク名で作ってみる。
gulp.task("sample", function(){
console.log("this is sample sentence.")
});
$gulp sampleを実行すると "this is sample sentence." と表示される。
##もうちょっといい感じにタスクを作成
buildが本番公開フォルダー、publicが開発環境用のフォルダー。
gulp.destで処理されたファイルが入る場所を指定して 保存。
gulp.task("image", function(){
gulp.src(["./images/**/*"])
.pipe(gulp.dest("public/img"));
gulp.src(["./images/**/*"])
.pipe(gulp.dest("build/img"));
});
下記のとおりでもOK。
gulp.task("image", function(){
gulp.src(["./images/**/*"])
.pipe(gulp.dest("public/img"));
.pipe(gulp.dest("build/img"));
});
##pipeをつなげて書いたり
gulp.task("test", function(){
gulp.src(["./images/**/*.gif"])
.pipe(gulp.dest("public/img"))
.pipe(gulp.dest("build/img"));
});
##複数タスクの実行
すでにつくった複数のタスクをまとめることだってできる。
gulp.task("message", ["default", "sample"]);
さらにその後taskを追加したいとき
gulp.task("message", ["default", "sample"], function(){
console.log("Finished!")
});
##実行順序
先に作ったdefaultを実が終わらないうちに先に作った複数タスクのmessageが実行される。
#scss
以下基本的にプラグインを使う。
##コンパイル
- sassのフォルダ作成
- 中に~.scssファイルを作成
で以下のコマンドでプラグインを。
$ npm i gulp-sass --save
var sass = require("gulp-sass");
gulp.task("scss", function(){
gulp.src(["./sass/*.scss"])
.pipe(sass())
.pipe(gulp.dest("public/css"))
});
requireでプラグインのsassコンパイルの機能をとってきて、task内でsass()を渡す。
##オプション
###outputStyle
gulp.task("scss", function(){
gulp.src(["./sass/*.scss"])
.pipe(sass({
outputStyle: "compressed"
}))
.pipe(gulp.dest("public/css"))
});
コンパイルされた後のファイルに記述される形式を指定。
たとえばcompressをすると、圧縮された読みにくい形ではきだされる。
* {
color: red;
}
h1 {
color: blue;
}
p {
background-color: #fff;
margin-top: 10px;
}
*{color:red}h1{color:blue}p{background-color:#fff;margin-top:10px}
###sourceMap
デバッグに使えるらしい。今回は省略
##gulp watchでコンパイルを監視
変更の度にコマンドをたたくのは嫌なので、変更を監視して自動コンパイルしてくれるwatchを使う。
読み込み先の指定方法の違いは以下のとおり。
- src：処理に必要なファイルをよみこむ
- watch：監視する対象のファイル
gulp.task("watch", function(){
gulp.watch(["./sass/*.scss"], ["scss"])
});
第一引数に監視するファイルパス、第二引数に実行するタスクを指定。
#Bootstrap
npm i bootstrap-sass --save
--saveをつけるとpackage.jsonにbootstrapが記述されるので、同じファイルを他の人が使うときに楽。
node_modulesの中にbootstrapのファイルが入ってる。
gulp.task("bootstrap", function(){
gulp.src([
"./node_modules/bootstrap-sass/assets/**/*"
])
.pipe(gulp.dest("public/lib"))
});
scssファイルに@importするのも忘れずに。
@import "../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
##変数について
Bootstrapのファイルをちょこっとかきかえれば自分の欲しい感じにカスタマイズも可能。
ただ、直接書き込むと絶対わからんくなるので一度全てコメントアウトして、必要なところだけ書き込むのがベスト。
#normalize css
npm i normalize.css --save
gulp.task("normalize", function(){
gulp.src([
"./node_modules/normalize.css/normalize.css"
])
.pipe(gulp.dest("public/lib"))
});
#Bourbon/Neat
Bootstrapの無駄がなくて使い易いやつ。
$ npm i node-bourbon --save
$ npm i node-neat --save
var bourbon = require("node-bourbon");
var neat = require("node-neat");
gulp.task("scss", function(){
gulp.src(["./sass/*.scss"])
.pipe(sass({
//outputStyle: "compressed",
includePaths: bourbon.with(neat.includePaths)
}))
.pipe(gulp.dest("public/css"))
});
特にBourbon Neat Examplesを使うとメディアクエリが超楽。
//ブレイクポイント
$mobile: 800px;
@include media($mobile) {
//PC版のコード
* {
color: blue;
}
}
Boubonは単独で使うことはあるけど、Neatは基本Bourbonとセットで使う。