一時期ほどではないでしょうが、今でも多くの人が使っているであろうGulp。これを使えば、Web制作における面倒な作業を自動化することができます。
一例を挙げると、
- CSSにベンダープレフィックスを付ける
- CSSを圧縮する
- ソースを保存した後ブラウザをリロードして表示を確認
- 複数のファイルを結合する
このような作業はGulpで自動化することができます。
あくまでこれは一例で、Gulpには様々なパッケージが存在し、タスクを効率化することができます。
Gulpの導入方法
Gulpを利用するためには、Node.jsをインストールする必要があります。Node.jsのインストール方法はこの記事を参考にしてください。
nodistでNode.jsをインストールをしてバージョン管理（Windows向け） | Tech dig
Node.jsをインストールすると、npmというパッケージマネージャが使えます。
試しにnpmコマンドを打ってみましょう。コマンドプロンプトを立ち上げて以下を入力して下さい。
npm -vこれでnpmのバージョンが出力されて、npmが使えることが確認できます。
そして以下のコマンドでGulpをインストールします。
npm install -g gulpプロジェクトでGulpを利用する
コマンドプロンプトでプロジェクトのフォルダに移動します。
フォルダの移動の仕方が分からない人は、こちらの記事を参考にしてください。
コマンドプロンプトでフォルダに移動する３つの方法 | Tech dig
今回はローカルホスト（xampp→htdocsフォルダ）に「example」フォルダを作って、その中で作業をしてみます。
フォルダを移動したら、package.jsonを作成するためのコマンドを実行します。既にpackage.jsonを自前で用意している場合は不要です。
npm init色々と尋ねられますが、後で変更できるので全部未入力のままEnterを押して進んで大丈夫です。
これでpackage.jsonが生成されました。
次に、使いたいパッケージをインストールしていきます。
パッケージのインストールは以下のコマンドを実行します。
npm install パッケージ名 --save-dev–save-dev というのは、package.jsonにパッケージ名とバージョンを記録するためのオプションです。
まずはGulpをインストールします。
npm install gulp --save-devEnterで実行して、しばらく待ってください。
このコマンドを実行すると、「node_modules」というフォルダが生成されます。「node_modules」の中に、gulpに必要なファイルがインストールされます。その中には「gulp」というフォルダがあります。これでインストール完了です。
同時に、package.jsonにも以下のような記述が追加されます。
"devDependencies": {
"gulp": "^3.9.1",
}devDependenciesに記述されたパッケージは、以下のコマンドで一括インストールすることができます。
npm install別のプロジェクトでGulpを使う時、再度一つ一つインストールせずに、package.jsonを使いまわして一括インストールするとスムーズになります。
次は、「gulp-sass」というパッケージをインストールします。これはsass（sacss）ファイルをCSSに変換するためのパッケージです。
npm install gulp-sass --save-devインストールされたら自動的にpackage.jsonに以下のような記述が追加されているはずです。
"devDependencies": {
"gulp": "^3.9.1",
"gulp-sass": "^3.1.0"
}お次は、実際にGulpを使ってみましょう。
gulpfile.jsを書く
パッケージをインストールできたら、そのパッケージを使えるようにするためにgulpfile.jsを作成して、その中に処理を書きます。
コマンドプロンプトで、
type nul > gulpfile.jsと打って実行するとファイルを作成することができます。良く使うコマンドなので覚えておくと便利です。
例として、以下の画像のようなフォルダ構成でGulpを使ってみます。
srcフォルダは開発を行うためのファイルを入れる場所です。
distフォルダは実際にWebサイトを表示するためのファイルを入れる場所です。
gulpを使ってsrcフォルダのScss（Sass）ファイルを、Webで表示できるようにCSSに変換してdistフォルダの中に出力します。
Sass（Scss）ファイルをCSSファイルにコンパイル
src – sassフォルダにあるstyle.scssファイルをコンパイルする処理を実際に行ってみましょう。
試しに、style.scssに以下のような記述をしてみましょう。
.example {
width: 100%;
h1 {
font-size: 2rem;
}
}編集ができたら、次はgulpfile.jsに記述します。
const gulp = require('gulp');
const sass = require('gulp-sass');
// sassという名前のタスクを作成
gulp.task('sass', function(){
gulp.src('./src/sass/*.scss') // 元データの場所
.pipe(sass({outputStyle: 'expanded'}))
.pipe(gulp.dest('./dist/css/')); // 出力先の場所
});outputStyle: ‘expanded’ というのは出力後のコードを一般的な書き方に整形してくれるオプションです。
gulp sassというコマンドでsassというタスクが実行されます。
画像のような表示が出て、処理が行われます。
では、問題なく出力されたかdist→cssにあるstyle.cssの中身を見てみましょう。
.example {
width: 100%;
}
.example h1 {
font-size: 2rem;
}問題なく出力されました。
処理を自動化する
コードを書くたびにgulp sassコマンドを実行するのは手間がかかり非効率です。
scssファイルを上書き保存したら自動的にgulp sassが実行されるようにします。
const gulp = require('gulp');
const sass = require('gulp-sass');
// sassという名前のタスクを作成
gulp.task('sass', function(){
gulp.src('./src/sass/*.scss') // 元データの場所
.pipe(sass({outputStyle: 'expanded'}))
.pipe(gulp.dest('./dist/css/')); // 出力先の場所
});
// srcフォルダ内のファイルが保存されたら自動でsassを実行
gulp.task('watch', function(){
gulp.watch('./src/**/*', ['sass']);
});
// gulpコマンドを実行するだけでまとめて実行
gulp.task('default', ['sass', 'watch']);以下の部分がファイルの保存を監視するためのタスクです。
gulp.watchはgulpに元々実装されている機能なので、追加でパッケージをインストールする必要はありません。
上のコードを細かく説明しておきます。
gulp.task('watch', function(){
gulp.watch('./src/**/*', ['sass']);
});‘./src/**/*’のアスタリスク（*）は全てのファイルを対象にするという意味で、アスタリスク2つ（**）が全てのフォルダを対象にするという意味になります。
つまり、src内にある全てのフォルダを監視対象にするということです。
gulp.task('default', ['sass', 'watch']);‘default’というタスクは、コマンドプロンプト上で「gulp」コマンドを実行するだけで走ります。
つまり、
gulpを実行すればsassをcssにする処理が行われ、同時にsrcフォルダの監視が始まるのです。
実行すると、以下の様に表示されます。
watchが走ると監視状態になります。
試しに以下のようにscssファイルを編集してみます。
.example {
width: 100%;
h1 {
font-size: 2rem;
color: #333;
}
}Ctrl + S で上書き保存すると、自動でsassタスクが実行されます。
distのcssを見てみましょう。
.example {
width: 100%;
}
.example h1 {
font-size: 2rem;
color: #333;
}自動化されました！便利ですね！
まとめ
このように、Gulpを使うと処理を自動化することができます。
一度導入してしまうと便利すぎて離れられなくなりますね。Web上には便利なパッケージの情報もたくさんあるので、色々と調べてみると良いでしょう。
それでは今日はこのへんで。
