ティーエスフォートブログ

gulp.jsを使ってWEB制作を高速化させよう【導入編】

お久しぶりです。橋本です。
最近はPS4版の【進撃の巨人】をプレイしているせいか、通勤を壁外調査と勝手に呼ぶようになりました。
もうすぐ原作も80話ということで4月まで楽しみに待っています。
まぁ、そんなことはさておき

今回も【gulp.jsを使ってWEB制作を高速化させよう】ということで以前に書いた記事の続きとなります。
gulp.jsは現在のWEB制作でもかなり人気の高いビルドヘルパーです。是非、導入してみてくださいね。

gulp_logo-1450648879924

 

Node.jsをインストール

こちらのサイトからNode.jsをインストールします。
gulp.jsはNode.jsのStreamAPIを利用したビルドヘルパーですのでNode.jsがないと話になりません。
今回はNode.jsについての説明は行いませんが、詳しく知りたい方は本体の公式サイトを参照してください。

インストールが完了したら
Windowsならコマンドプロンプト、MacならターミナルでNodeのバージョンを確認してください。

node -v

無事にバージョンが表示されたら大丈夫です。

 

npmを準備する

ちなみにnpmとはNode Packaged ModulesはNode.jsのライブラリやパッケージを管理することができるツールを指します。
Windowsならコマンドプロンプト、Macならターミナルでgulpの環境づくりをはじめます。

cd ディレクトリ名/ディレクトリ名

こんな感じでディレクトリの移動をしていきます。Macだとcdの後にフォルダをドロップすれば移動できます。
慣れていないと恐いですが、巨人の恐怖に比べればどうってことありません。

次にnpmを導入します。
Windowsならコマンドプロンプト、Macならターミナルで以下のコマンドを打ち込みます。

npm init

これで準備完了です。

 

gulpを準備する

次にgulpを準備します。Windowsならコマンドプロンプト、Macならターミナルで以下のコマンドを打ち込みます。
注意:Macの方は冒頭に【sudo】といれてください。

npm install gulp –save-dev

ちなみに【–save-dev】をつけることでパッケージを開発用パッケージとしてインストールすることができます。Macの方はパスワードを要求されますのでMacアカウントのパスワードを入力してください。

色々な文章が出て来たら、今回はとりあえず【ENTER】を連打してください。
後に変更は可能です。

 

gulpfile.jsを準備する

gulpfile.jsをpackage.jsonと同じディレクトリに作成し、以下のように記述します。

var gulp = require(“gulp”);

次にSASSをコンパイルするために以下のnpmを準備します。

npm install gulp-sass –save-dev

これでgulpでSASSをコンパイルできます。
が、gulpfile.jsにその指示を書かねばなりません。ということで追記していきます。
まずはvar gulp = require(“gulp”);の下あたりに下記のような記述を行います。

var sass = require(“gulp-sass”);

次はその下の行あたりに下記のような記述をしていきます。

gulp.task(“sass”, function() {
gulp.src(“sass/**/*scss”)
.pipe(sass())
.pipe(gulp.dest(“./css”))
});

このように記述することで、ディレクトリ内の【sassフォルダ】の中にある【.scssファイル】を【cssフォルダ】内にコンパイルすることになります。では、実際コンパイルするにはどうしたらいいでしょうか?
毎回コンパイルするのにコマンドを打ち込むのが面倒なので自動監視させましょう。

 

ファイルを自動監視する

Windowsならコマンドプロンプト、Macならターミナルで以下のコマンドを打ち込みます。

gulp.task(“default”,function() {
gulp.watch(“sass/**/*.scss”,[“sass”]);
});

gulp.taskを【default】とすることでファイルが変更される度に自動でコンパイルされるようになります。

 

gulpを実行する

Windowsならコマンドプロンプト、Macならターミナルで以下のコマンドを打ち込みます。

gulp

このコマンドを入力すればgulpがファイルの監視を始めてくれます。とても便利ですね。
しかし、gulpのようなビルドヘルパーには多くのプラグインがあるのでこれを併用すればもっと便利になります。
詳しくはこちらのサイトを読んでみてください。

いかがでしたでしょうか?
今回はWEB制作で人気なgulpの使い方を記載しました。
皆さんも是非導入して楽しいgulpライフを送って下さいね。

投稿日:2016.03.23
ページ先頭へ