こんにちは、今回はWEBサイト構築の効率を上げてくれるGulp(ガルプ)という
タスクランナーを利用してみます。
タスクランナーとは
昨今、Web開発も高度なものになり、Sass(サース)などの「CSSプリプロセッサー」やVue.js(ビュードットジェイエス)等の
フレームワークや、EJS(イージェイエス)やHAML(ハムル)などのテンプレートエンジンが用いられます。
これらは、複雑な処理を手軽に利用するためだったり、ブラウザ間の依存を吸収するために
利用されます。
少し大雑把に言い換えるなら、ブラウザ間に互換性を確保し、高機能を実現するために、
HTMLやCSS、javascriptを直接記述するのではなく、HTMLやCSS、javascriptを出力するための
「プログラム」を記述するようになっています。
この「プログラム」はブラウザでは表示することができないため「コンパイル」を行い
HTMLやCSS、javascriptに変換する必要があります。
この変換を毎回手動で実行するのは手間がかかるため、この処理を自動化してくれるツールが
あります。
これが「タスクランナー」です。
今回はGulp(ガルプ)というタスクランナーを使って自動化を行なっていきます。
Gulpのインストール
Gulpを利用するためにはNode.js(ノードジェイエス)が必要になるため
事前にインストールをしておいてください。
Node.jsがインストールできたら適当なプロジェクトフォルダを作成し、
ターミナルからプロジェクトフォルダに移動した後、下記コマンドを実行します。
|
1 |
npm init -y |
正常に実行が完了すると、プロジェクトの情報が記述された
package.jsonというファイルが作成されます。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
{ "name": "sample1", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" } |
次にGulpをインストールします。
ターミナルから下記コマンドを入力します。
|
1 |
npm install ––save-dev gulp |
インストールが完了するとpackage.jsonのdevDependenciesにgulpの記述が追加されています。
|
1 2 3 |
"devDependencies": { "gulp": "^4.0.2" } |
GulpでSassをコンパイルする。
それではGulpを利用してSass(サース)をコンパイルしてみます。
急に出てきたSass(サース)ですが、Sassは「Syntactically Awesome StyleSheet」の略で
日本語的には「構文的」に「すばらしい」「スタイルシート」ということです。
CSSに変数や、ループ、関数などの概念を加え、保守性やコードの再利用に優れています。
ただし、ブラウザではSassのファイルを読むことができないため、通常のCSSに
コンパイルする必要があります。
このコンパイルの処理にGulpを利用してみます。
gulp-sassのインストール
SassをGulpでコンパイルするためにgulp-sass（ガルプサース）というモジュールが必要に
なるためインストールしていきます。
ターミナルから次のコマンドを入力します。
|
1 |
npm install ––save-dev gulp-sass |
gulpfile.jsの作成
gulpでコンパイル等のタスクを実行するためにはjavascriptで記述した
「gulpfile.js」というファイルを作成する必要があります。
それではSassをコンパイルするタスクをgulpfile.jsに記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// gulp読み込み const gulp = require("gulp"); // sass読み込み const sass = require("gulp-sass"); //コンパイルタスク作成 gulp.task("css-Compile", function(){ //scss/style.cssをsass()で //コンパイルしてcssフォルダに格納 return ( gulp.src("scss/style.scss") .pipe(sass({ outputStyle:"expanded" })) .pipe(gulp.dest("css")) ); }); |
次にSassのstyle.scssを作成します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
//ネスト div { background-color: beige; h1{ color:gray; } } //擬似クラス .ele{ color:red; &:hover{ color:green; } } //演算 $height: 150px; $width: 300px; .box{ width: $width / 2; height: $height * 2; } //繰り返し @for $value from 1 to 4 { .child_#{$value} { margin-left: 50px * $value; } } |
ここまでできたらstyle.scssをコンパイルしてみます。
ターミナルから下記コマンドを実行することでコンパイルが可能です。
「css-Compile」はgulpfile.jsの7行目で指定したタスク名となります。
|
1 |
npx gulp css-Compile |
style.scssがコンパイルされcssフォルダにstyle.cssが作成されます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
div { background-color: beige; } div h1 { color: gray; } .ele { color: red; } .ele:hover { color: green; } .box { width: 150px; height: 300px; } .child_1 { margin-left: 50px; } .child_2 { margin-left: 100px; } .child_3 { margin-left: 150px; } |
GulpでSassを自動コンパイルする。
上の例ではSassファイルを変更する度にコンパイルを実行する必要がありますが
これを自動化することができます。
gulpではwatch()メソッドを利用することで、ファイルを監視して変更があった
場合に処理を実行させることが可能です。
gulpfile.jsをwatch()メソッドを利用して書き換えてみます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// gulp読み込み const gulp = require("gulp"); // sass読み込み const sass = require("gulp-sass"); //コンパイルタスク作成 gulp.task("css-Compile", function(){ return gulp.watch("scss/style.scss",function(){ //scss/style.cssをsass()で //コンパイルしてcssフォルダに格納 return ( gulp.src("scss/style.scss") .pipe(sass({ outputStyle:"expanded" })) .pipe(gulp.dest("css")) ); }); }); |
8行目で gulp.watch()メソッドを利用しています。watch()メソッドの引数に監視する
Sassファイルとコンパイルを実行する関数を指定します。
ここまで完了したら下記コマンドを実行します。
|
1 |
npx gulp css-Compile |
下記コマンド実行後、Sassのファイルを変更するたびにstyle.cssが更新されていくことが
確認できます。このようにGulpを利用することで面倒な作業を一括で実行してくれます！
簡単に利用できるので是非利用してみてください！
