Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

はじめに

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

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}))
});

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

終わりに

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away