/gulpの開発環境をMacで構築してみる2016.08.28gulpの開発環境をMacで構築してみるTweetPocketWEB関係の開発をしていると、HTMLやCSS・Javascriptを圧縮したり、SCSSをコンパイルしてCSSにしたり、CSSコードに必要なベンダープレフィックスを設定したりと様々なタスクを一つ一つ実行していく手間が出てきます。いったタスクを自動で実行してくれるのがタスクランナーというビルドツールです。タスクが自動化できれば、処理のし忘れを防ぐこともできますし、何より煩雑なタスクを自分の手で実行する必要がなくなりますので、開発の工数短縮につながります。導入しておきましょう。今回は、数あるビルドツールの中でも比較的人気の高い「gulp」の導入を解説していきたいと思います。10.10.5node.js:v6.4.0npm:3.10.31.node.jsをインストールしましょう。gulpはnode.jsで作成されたツールですので、まずnode.jsをインストールする必要があります。node.jsのインストールについては下記の記事を御覧ください。2.gulpのインストールしてみましょうnode.jsをインストールしたら、続いてgulpをグローバルインストールします。gulpでタスクを自動化させるプロジェクトディレクトリを作成します。※このディレクトリ内でWEBサイトを構築していきます。$_次にプロジェクトのnode.js用パッケージを管理するために「package.json」ファイルを作成します。--yesプロジェクトディレクトリ(カレントディレクトリ)にpackage.jsonファイルが作成されます。"ISC"}続いて、gulpをプロジェクトディレクトリにローカルインストールします。上記でgulpのグローバルインストールを実行していますが、ローカルインストールも必要です。ローカルインストールするには下記のコマンドを実行します。gulpなお、–save-devオプションをつけると、package.jsonのdevDependenciesキーにインストールしたパッケージをバージョン付きで書き込まれます。package.jsonを確認すると、devDependenciesキーが追加され、gulpがバージョン付きで追記されているのがわかります。}}なお、上記のコマンドは省略して記載することもできます。gulpでは、gulpがグローバルにもローカルにも正常にインストールされているか確認してみましょう。下記のようにCLIとLocalと2つ表示されていればOKです。3.9.13.gulpを使ってみましょう3-1.gulpfile.jsの作成するgulpを使用するには、まずgulpで実行させるタスクを記述する「gulpfile.js」というファイルが必要です。「gulpfile.js」をプロジェクトディレクトリに作成します。gulpfile.jsそして、gulpfile.jsに次のように記載します。require('gulp');これで準備は完了です。3-2.gulpでSCSSをコンパイルするでは、さっそくgulpでタスクを実行してみましょう。今回はSCSSをコンパイルしてみたいと思います。gulpでSCSSをコンパイルするには、実はgulp本体だけでは実行できません。gulp本体には、「画像の軽量化機能」や「SCSSのコンパイル機能」というのはなく、プラグインを通じて各々の処理が行われます。gulpでタスクを自動化させるためには、自動化させたいタスクによって必要なプラグインをインストールしなければいけないということです。いうことで、SCSSをコンパイルするためのプラグインをインストールする必要があります。今回は「gulp-sass」というプラグインを使用します。インストールしましょう。gulp-sassつぎにgulpでコンパイルするSCSSファイルを用意します。プロジェクトディレクトリであるwebprojectの配下に下記のような階層を作成します。$_次にsassディレクトリ内にscssファイルを作成します。※sassについては公式サイトを御覧ください。}}では、SCSSをgulpでコンパイルするタスクを「gulpfile.js」に記載してみましょう。.pipe(gulp.dest('css/'));});少しコードの解説をしたいと思います。requireでgulpとgulp-sassプライグインを読み込みます。次に、gulp.taskでタスク名と実際に実行させる処理をgulp.task(‘タスク名’,function(){実行させる処理});という風に記述します。続いて、処理される処理の部分のコードについて説明します。gulp.srcで処理対象のファイルを指定します。ちなみに、ファイルは複数選択することが可能で、上記のコードではワイルドカードを利用し、sassフォルダ内のscssファイル全てを指定しています。次に、gulp.destで処理されたファイルの出力先を指定します。最後に、pipeについてですが、pipeを使用すると、前の処理の出力結果を次の処理の入力として利用できます。処理と処理をつなげることができます。※詳しくはこちらを御覧ください。msコンパイルされたCSSファイルを確認してみましょう。}gulpでSCSSをコンパイルすることができました。3-3.watch機能を使ってみる最後に、watch機能について説明します。上記の方法で、SCSSをコンパイルするタスクはできましたが、コードを変更する度にタスクを手動で実行するのは効率的ではありません。ファイルに変更があれば、そのタイミングでタスクが自動で実行できたら便利ですよね。そこで、gulpのwatch機能を使えば、タスクを自動実行することができます。watch機能を利用し、ファイルの変更を監視することで、タスクを自動実行させます。watch機能を「gulpfile.js」に記載してみましょう。.pipe(gulp.dest('css/'));});追加したコードを少し説明します。監視を開始しましょう。sass試しにSCSSファイルを変更してみてください。CSSが書きかわるはずです。