はじめてのgulpでの環境づくり

18055 ワード
Node.js フロントエンド gulp JavaScript npm JavaScript テキストリンク

はじめに

本当ははじめてじゃないんですが、久しぶりにいじったら忘れていたので勉強しなおしました。

gulpとは

gulp.js(公式サイト)
node.jsベースのビルドシステムヘルパー。
様々な作業を自動化してくれる（例えばファイルの圧縮とか、Sassのコンパイルとかとか）。
gulpfile.jsというファイルを作って操作して行きます。

この記事の目標

必要な機能をつけた環境を、gulpでスムーズに作成できるようになる。

バージョン

node.js 6.10.1
npm 5.0.3

フォルダ構成

test-gulp
  |-css
  |-sass
     |-style.scss
  |-js
  |-index.html

手順

前準備

ディレクトリ移動
今回使うディレクトリに移動します。

$ cd test-gulp

npmの初期化とpackage.jsonの作成
下のコマンドを打つと名前などいろいろなことを聞かれます。答え終えると、ディレクトリにpackage.jsonが作成されます。

$ npm init
package.json
{
  "name": "test-gulp",
  "version": "1.0.0",
  "description": "gulpの練習",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

gulp.jsの導入

--save-devはpackage.json の devDependencies に追加され、--saveだとpackage.json の dependenciesに追加され、他の人がnpm installした時にすべてインストールされます。

$ npm install gulp --save-dev

上のコマンドを打った後にpackage.jsonを確認するとdevDependenciesの中にgulpが増えているのがわかります。

package.json
{
  "name": "test-gulp",
  "version": "1.0.0",
  "description": "gulpの練習",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "gulp": "gulp"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1"
  }
}

gulpfile.jsの導入(gulpの設定)

ここからgulpfileを作成して、設定を行います。gulpfile.jsはpackage.jsonと同じディレクトリにおきます。

$ touch gulpfile.js

gulpfile.jsを作成したら、中でgulpを呼び出すコードを記入します。

gulpfile.js
var gulp = require("gulp");

これでgulpが使えるようになりました。

gulpにタスクの導入

ここからは必要なプラグインをgulpに導入していく作業です。その時その時に必要なものを入れて行きましょう。今回はgulp-sassというSassのコンパイルプラグインをいれてみます。
gulp-sass - npm

プラグインのインストール

インストールをして、package.jsonに追加されたかを確認します。

$ npm install gulp-sass --save-dev
package.json
{
  "name": "test-gulp",
  "version": "1.0.0",
  "description": "gulpの練習",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "gulp": "gulp"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-sass": "^4.0.1" 
  }
}

タスクの追加

インストールできたことが確認できたら、gulpfile.jsに呼び込んでタスクを登録します。

gulpfile.js
var gulp = require("gulp");
var sass = require("gulp-sass");

gulp.task("sass",function(){
    gulp.src("sass/**/*.scss")
    .pipe(sass({outputStyle: 'expanded'}))
    .pipe(gulp.dest("./css"))
})

gulp.task("タスク名",function(){})…タスクの登録を行います。
gulp.src("")…呼ぶファイルを設定します。今回の記述はsassフォルダに入っているscssで終わるファイルを全て呼ぶように設定しています。他の場所のファイルを呼び込みたいときは書き方を変えます。minimatchという書き方だそうです。
pipe()…srcで取得したファイルに行う処理を書きます。
sass()…コンパイルの実行をします。outputStyleで吐き出すcssのスタイルを設定できます。
gulp.dest()…出力したい場所を書きます。今回はcssフォルダに吐き出したいので上の記述にします。

コンパイルの実行

gulpの設定ができたので、タスクの実行を行います

$ gulp sass

成功すれば、cssフォルダにsassファイルから作られたcssファイルができているはずです。

使いそうなプラグイン

ファイルの監視

ファイルの変更を監視して、変更された時に自動的にタスクを実行してくれるものです。
インストールは必要なく、以下のコードをgulpfile.jsに追加します。

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

watch(['監視するファイル'],['実行したいタスク名'])
タスク名をdefaultにするとコマンドにタスク名を入れる必要がなくなり便利です。
よく使うものに設定しましょう。

自動リロード"browser-sync"

タスクが実行された後、更新ボタンを押さずにブラウザを更新することができます。

$ npm install browser-sync --save-dev

タスクの後にpipe（）でbrowser.reloadを追加してあげます。

var browser = require("browser-sync");

gulp.task("server", function() {
    browser({
        server: {
            baseDir: "./"
        }
    });
});

gulp.task("sass", function() {
    gulp.src("sass/**/*.scss")
    .pipe(sass({outputStyle: 'expanded'}))
    .pipe(gulp.dest("./css"))
    .pipe(browser.reload({stream:true}))
});

エラー時のストップ防止 "gulp-plumber"

上の自動リロードは便利ですが、一度エラーがでると監視状態が解除されてしまします。
毎回タスクを実行しなおすのはめんどくさいので、エラー時にも監視を解除しないように設定してあげます。

$ npm install gulp-plumber --save-dev

タスクの前にpipeでplumber()を実行してあげればok。

var plumber = require("gulp-plumber");

gulp.task("sass", function() {
    gulp.src("sass/**/*.scss")
    .pipe(plumber())
    .pipe(sass({outputStyle: 'expanded'}))
    .pipe(gulp.dest("./css"))
    .pipe(browser.reload({stream:true}))
});

これでエラーメッセージはでても監視のストップはされなくなりました。

終わりに

ここにあげたプラグイン以外にもたくさんの便利なものたくさんあります。
ぜひ自分にとって最高の環境を作ってみてください。

意図(Intent)説明2:アンドロイド使用意図(Intent)データを転送し、結果を返す