# 様々な作業を自動化するgulpの基礎と導入方法 URL: https://webrandum.net/gulp-install/ 公開日: 2019-01-18 更新日: 2019-01-18 カテゴリー: コーディング タグ: gulp 出典: Webrandum（著者: サイトウ マサカズ） 今回は様々な作業を自動化するビルドシステム「gulp(ガルプ)」の基礎と導入方法について書いていきます。 ## 必要な前知識 gulpはNode.jsをベースにしたビルドシステムヘルパー（様々な作業を自動化してくれるツール）です。 「様々な作業って具体的に何してくれるの？」という事ですが、以下のような面倒な事をコマンド1つで出来るようになります。 - Sassのコンパイル - ファイルの圧縮 - ベンダープリフィックスの自働付与 - 画像の圧縮 必要な知識や、インストールしておくべきものは以下の通りですが、一応初心者の方でも勉強しながら進めていけるように丁寧に書いていくつもりではあります。 - 知識 最低限のコマンドライン（ターミナル）の操作 - 最低限のJavaScriptの知識 - インストールしておくべきもの Node.js インストールにはNode.jsが必要になりますので、まだインストールしていない方は[過去に記事](https://webrandum.net/nodebrew-install/)にしてまとめているので、そちらを参考にしてインストールを行ってください。 [mac環境にnodebrew経由でNode.jsをインストールしてバージョンを管理する方法](https://webrandum.net/nodebrew-install) また、執筆時点（2019年1月現在）でのgulpのバージョンは4.0.0なので、その前提で進めていきます。 ## gulpのインストール ### インストール前の準備 まずはgulpをインストールしたいディレクトリに移動します。sampleの部分にはディレクトリのパスが入ります。 ``` $ cd sample ``` 余談ですが、パスのコピーはFinderで目的のフォルダを右クリック→Optionを押しながら「名前を変更」をクリックするとパス名をコピーできます。 ![パスのコピー](https://webrandum.net/mskz/wp-content/uploads/2019/01/image_1.png) 次に下記のコマンドを入力します。名前やバージョン等色々質問されますが、何も入力せずEnterを押していきます。 ``` $ npm init ``` ![gulp インストール](https://webrandum.net/mskz/wp-content/uploads/2019/01/image_2-1.png) gulpはNode.jsに付属されているnpmというパッケージマネージャーを使用してインストールするのですが、これはそのnpm設定ファイルを作成するためのコマンドです。 すべて答え終えると、ディレクトリに「package.json」というファイルが作成されていると思います。ちなみに今の質問をすべてスキップしてとりあえずpackage.jsonを作成するnpm init -yというコマンドもあります。 今後は特に自分で記述しない場合はこちらを使うようにしましょう。 ### gulpのインストール package.jsonが作成できたら、いよいよgulpのインストールです。 下記のコマンドを入力してgulpをインストールします。「–save-dev」というオプションが付いていますが、これはpackage.jsonのdevDependenciesに追加するための記述です。 ``` $ npm install gulp --save-dev ``` コマンドを打つと「node_module」というフォルダと「package-lock.json」というファイルが作成され、中に大量のフォルダが格納されているかと思います。また、package.jsonを見てみると、devDependenciesの中にgulpが記述されています。 現在sampleフォルダには「node_modules」「package-lock.json」「package.json」が入っている状態ですね。 ![格納されているファイル](https://webrandum.net/mskz/wp-content/uploads/2019/01/image_3.png) これでgulpのインストールは完了です。 ## gulpのタスク作成 ### gulpfile.jsの作成 さて、gulpのインストールは完了しましたが、これだけでは動きません。 次にgulpの設定をしてあげる必要があります。 gulpの設定は全て「gulpfile.js」というファイルに記述していきますので、package.jsonと同じ階層にgulpfile.jsを作成します。 そしてここから先は下記の手順でgulpの設定を行っていきます。 1. 行いたいタスクに合ったプラグインのインストール 2. gulpfile.jsでプラグインを呼び出しタスクの設定 3. gulp（タスク）の実行 今回は「Sassをコンパイルする」というタスクを設定してみましょう。 ### プラグインのインストール Sassをコンパイルするには「gulp-sass」というプラグインが使えますので、下記コマンドでインストールしましょう。 ``` $ npm install gulp-sass --save-dev ``` ### gulpfile.jsでタスクの設定 プラグインのインストールが出来たら、gulpfile.jsにプラグインを呼び出し、タスクの設定を行います。 ``` gulpfile.jsconst gulp = require("gulp"); const sass = require("gulp-sass"); gulp.task("default",function(){ gulp.src("scss/*.scss") .pipe(sass({outputStyle: 'expanded'})) .pipe(gulp.dest("./css")) }) ``` コードの解説を行うと、それぞれ下記のようになります。 const 定数名 = require(“プラグイン名”);でgulpやプラグインの呼び出して定数に代入しています。 gulp.task(“タスク名”,function(){タスクの内容})でタスクの登録が可能です。 ちなみにタスク名を「default」にしておくと、デフォルトのタスクとして登録され、タスク名を指定しなくてもgulpの実行してくれるようになります。 gulp.src(“呼び出すファイルパス”)で呼び出すファイルを設定します。今回はscssフォルダに入っている.scssファイルをコンパイルします。 後は見慣れない「.pipe」ですが、これは複数の処理を連結させる役割があります。 ## gulpの実行 さて、設定が出来たのでgulpを実行してみましょう。 まずはコンパイルするのに必要な「scss」フォルダと、その中に「style.scss」を用意します。 あとはターミナルで下記コマンドを実行します。 ``` npx gulp ``` npxはnpm v5.2から使えるコマンドで、簡単にnpmパッケージの実行が出来るコマンドです（古いnode.jsでは動かないので最新のバージョンにしておきましょう）。 実行してコンパイルが完了したら「css」フォルダと、その中にコンパイルされた「style.css」が生成されているはずです。