mamimumemo.

ほぼ自分用。

gulpで作る開発環境(Sassコンパイル、Webサーバー立ち上げ)

現状わたしがgulpで作っている開発環境についてまとめてみました。まだまだ分かっていないことが多いので本当に最低限ですが、gulpってそうなんだ〜みたいなことが少しでも伝わればと思います。

本稿では、gulpのインストールからタスクの作成、実行までの手順とコードを掲載しています。

作業ディレクトリに移動する

今回はgulptestというディレクトリで作業していきます。

cd gulptest

ディレクトリ構成はこんな感じ。

gulptest
┣━━ sass
┃    ┗━━ test.scss
┗━━ index.html

package.jsonを作成する

次に、作業ディレクトリ内にpackage.jsonを作成します。
(npmコマンドを使うためにはNode.jsのインストールが必要です)

npm init

いくつか質問されるので、いい感じに答えていきます。
わたしは面倒なのでnpm init -yと叩きます。設定を変更したくなったら、その都度package.jsonをいじってあげればモーマンタイ。

{
  "name": "gulptest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

package.jsonができました。


gulp.jsをインストールする

gulpはグローバルとローカルにインストールします。
ローカルにインストールされたgulpを実行するために、グローバルにもインストールしておく必要があるみたいです。

 // グローバルインストール
sudo npm install -g gulp

 // ローカルインストール
sudo npm install --save-dev gulp

ローカルインストールを完了した時点でpackage.jsonを見てみると、インストールしたgulpの情報が追記されます。

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

作業ディレクトリ内にnode_modulesっていうディレクトリも増えてますね。


gulpfile.jsを作成する

gulpのインストールができたら、作業ディレクトリ内にgulpfile.jsというファイルを作成します。

touch gulpfile.js

gulpfile.jsには、gulpで実行したいタスクを書いていきます。
今回は

これらをぱぱっとやってくれる環境を作ります。


プラグインをインストールする

gulpのプラグインであるgulp-sassをインストールします。

sudo npm install --save-dev gulp-sass

ついでに、コンパイル時にベンダープレフィックスを自動補完してくれるgulp-autoprefixerも入れちゃいましょう。

sudo npm install --save-dev gulp-autoprefixer

最後に、Webサーバーを立ち上げるために必要なgulp-webserverをインストールします。

sudo npm install --save-dev gulp-webserver

package.jsonを見てみると、

{
  "name": "gulptest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^4.0.0",
    "gulp-sass": "^3.1.0",
    "gulp-webserver": "^0.9.1"
  }
}

増えてますね。


gulpfile.jsにタスクを記述する

とりあえずgulpとプラグインを使えるようにするために、以下のように記述します。

var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
var sass = require('gulp-sass');
var webserver = require('gulp-webserver');

これが書けたら、ここからはタスク作り。

gulp.task('タスク名', function(){
    実行する処理;
});

こんな風に書いていくんですね。
まずはscssファイルをコンパイルしてくれるタスクから。

gulp.task('sass', function(){
    gulp.src('./sass/test.scss') // コンパイル元のscssファイルを指定
        .pipe(sass({ outputStyle: 'expanded' })) // 出力フォーマットを指定してコンパイル
        .pipe(autoprefixer()) // ベンダープレフィックス補完
        .pipe(gulp.dest('./css/')); // コンパイル後のcssファイルの出力先を指定
});

さっそく、sass/test.scssコンパイルするためにsassタスクを実行します。

gulp sass

gulptest内にcss/test.cssが生成されました。コンパイル成功です。やったね!

/* コンパイル元: sass/test.scss */
.hoge {
    color: red;
    .fuga {
        display: flex;
    }
}
/* コンパイル後: css/test.css */
.hoge {
  color: red;
}

.hoge .fuga {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

次に、scssファイルに変更があれば都度コンパイルしてくれるよう監視してもらいます。

gulp.task('watch', function(){
    gulp.watch('./sass/**/*.scss', ['sass']); // ('監視するファイルのパターン', ['実行するタスク名'])
});

これで自動コンパイル機能のできあがりです。
1度だけコンパイルしたいならgulp sassを、変更がある度に自動でコンパイルしたいならgulp watchを叩くんですね。

この時点では、scssファイルを誤りがある状態で保存すると監視状態を解除してしまいます。ですが、gulp-plumberというプラグインがあればエラー状態でも監視を続けてくれるので、タスクを実行し直すのが面倒という方はぜひインストールしてみてください。

次に、開発用Webサーバーを立ち上げるためのタスクを追加します。

gulp.task('webserver', function(){
    gulp.src('./') // 公開する静的ファイルを配置したディレクトリを指定
        .pipe(webserver({
        host: '0.0.0.0',
        port: 8888,
        livereload: true // ファイル変更時に自動でブラウザを再読み込みする
    }));
});

webserverタスク実行後、http://0.0.0.0:8888へアクセスすると作業ディレクトリ直下のindex.htmlが表示されます。
host: '0.0.0.0'とすることで、同じWi-Fi環境下であれば別ホストからもアクセスできることがわかりました。ライブリロード機能もお仕事してます。(必要なければfalseにしてください)
ローカルホストからのみアクセスするのであればhost: 'localhost'でも大丈夫です。

最後に、これらのタスクを一気に実行するタスクを用意します。
タスク名をdefaultにすることで、コマンドgulpだけで実行できるようになります。よく使うタスクを入れておくといいかもしれないですね。

gulp.task('default', ['watch', 'webserver']); // 'タスク名', ['実行するタスク名']

これで環境構築はおしまいです。お疲れさまでした!


ここまでの手順でできたpackage.jsonとgulpfile.jsがこちら。

// package.json

{
  "name": "gulptest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^4.0.0",
    "gulp-plumber": "^1.1.0",
    "gulp-sass": "^3.1.0",
    "gulp-webserver": "^0.9.1"
  }
}
// gulpfile.js

var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
var plumber = require('gulp-plumber');
var sass = require('gulp-sass');
var webserver = require('gulp-webserver');

gulp.task('sass', function(){
    gulp.src('./sass/test.scss')
        .pipe(plumber())
        .pipe(sass({ outputStyle: 'expanded' }))
        .pipe(autoprefixer())
        .pipe(gulp.dest('./css/'));
});

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

gulp.task('webserver', function(){
    gulp.src('./')
        .pipe(webserver({
        host: '0.0.0.0',
        port: 8888,
        livereload: true
    }));
});

gulp.task('default', ['watch', 'webserver']);

今回は、gulpやそのプラグインを1つずつインストールしてきましたが、package.jsonに記載されたパッケージはnpm installというコマンドを実行することで一気にインストールされます。package.jsonとgulpfile.jsがあれば、他の作業ディレクトリでも簡単に開発環境を作ることができるので、ぜひ使い回してみてください。
また、gulpには他にもありがたい系プラグインがたくさんあるようなので、調べてみるといいかもしれませんね。

それではよいgulp生活を◎


参考リンク