恵比寿のWebサイト制作・Webデザインチームのブログ。Webデザインやコーディング、SEO対策まで幅広く手掛けています。

恵比寿のデザイン制作チームのブログです。

Webデザイン、
Web制作、
SEO対策の
ご依頼・ご相談

Contact

【Gulp入門】Gulpを使って色々な処理を自動化する方法(Windows)

投稿日:2018-03-13 更新日:

npm-gulp

一時期ほどではないでしょうが、今でも多くの人が使っているであろうGulp。これを使えば、Web制作における面倒な作業を自動化することができます。

一例を挙げると、

  • CSSにベンダープレフィックスを付ける
  • CSSを圧縮する
  • ソースを保存した後ブラウザをリロードして表示を確認
  • 複数のファイルを結合する

このような作業はGulpで自動化することができます。

あくまでこれは一例で、Gulpには様々なパッケージが存在し、タスクを効率化することができます。

Gulpの導入方法

Gulpを利用するためには、Node.jsをインストールする必要があります。Node.jsのインストール方法はこの記事を参考にしてください。

[あとでリンク貼る]

Node.jsをインストールすると、npmというパッケージマネージャが使えます。

試しにnpmコマンドを打ってみましょう。コマンドプロンプトを立ち上げて以下を入力して下さい。

npm -v

これでnpmのバージョンが出力されて、npmが使えることが確認できます。

そして以下のコマンドでGulpをインストールします。

npm install -g gulp

プロジェクトでGulpを利用する

コマンドプロンプトでプロジェクトのフォルダに移動します。

フォルダの移動の仕方が分からない人は、こちらの記事を参考にしてください。

[あとでリンク貼る]

今回はローカルホスト(xampp→htdocsフォルダ)に「example」フォルダを作って、その中で作業をしてみます。

フォルダを移動したら、package.jsonを作成するためのコマンドを実行します。既にpackage.jsonを自前で用意している場合は不要です。

npm init

色々と尋ねられますが、後で変更できるので全部未入力のままEnterを押して進んで大丈夫です。

init

これでpackage.jsonが生成されました。

次に、使いたいパッケージをインストールしていきます。

パッケージのインストールは以下のコマンドを実行します。

npm install パッケージ名 --save-dev

–save-dev というのは、package.jsonにパッケージ名とバージョンを記録するためのオプションです。

まずはGulpをインストールします。

npm install gulp --save-dev

Enterで実行して、しばらく待ってください。

このコマンドを実行すると、「node_modules」というフォルダが生成されます。「node_modules」の中に、gulpに必要なファイルがインストールされます。その中には「gulp」というフォルダがあります。これでインストール完了です。

同時に、package.jsonにも以下のような記述が追加されます。

"devDependencies": {
  "gulp": "^3.9.1",
}

devDependenciesに記述されたパッケージは、以下のコマンドで一括インストールすることができます。

npm install

別のプロジェクトでGulpを使う時、再度一つ一つインストールせずに、package.jsonを使いまわして一括インストールするとスムーズになります。

次は、「gulp-sass」というパッケージをインストールします。これはsass(sacss)ファイルをCSSに変換するためのパッケージです。

npm install gulp-sass --save-dev

インストールされたら自動的にpackage.jsonに以下のような記述が追加されているはずです。

"devDependencies": {
  "gulp": "^3.9.1",
  "gulp-sass": "^3.1.0"
}

お次は、実際にGulpを使ってみましょう。

gulpfile.jsを書く

パッケージをインストールできたら、そのパッケージを使えるようにするためにgulpfile.jsを作成して、その中に処理を書きます。

コマンドプロンプトで、

type nul > gulpfile.js

と打って実行するとファイルを作成することができます。良く使うコマンドなので覚えておくと便利です。

例として、以下の画像のようなフォルダ構成でGulpを使ってみます。

folder2

srcフォルダは開発を行うためのファイルを入れる場所です。

distフォルダは実際にWebサイトを表示するためのファイルを入れる場所です。

gulpを使ってsrcフォルダのScss(Sass)ファイルを、Webで表示できるようにCSSに変換してdistフォルダの中に出力します。

Sass(Scss)ファイルをCSSファイルにコンパイル

src – sassフォルダにあるstyle.scssファイルをコンパイルする処理を実際に行ってみましょう。

試しに、style.scssに以下のような記述をしてみましょう。

.example {
  width: 100%;
  h1 {
    font-size: 2rem;
  }
}

編集ができたら、次はgulpfile.jsに記述します。

const gulp = require('gulp');
const sass = require('gulp-sass');

// sassという名前のタスクを作成
gulp.task('sass', function(){
  gulp.src('./src/sass/*.scss') // 元データの場所
    .pipe(sass({outputStyle: 'expanded'}))
    .pipe(gulp.dest('./dist/css/')); // 出力先の場所
});

outputStyle: ‘expanded’ というのは出力後のコードを一般的な書き方に整形してくれるオプションです。

gulp sass

というコマンドでsassというタスクが実行されます。

sass

画像のような表示が出て、処理が行われます。

では、問題なく出力されたかdist→cssにあるstyle.cssの中身を見てみましょう。

.example {
  width: 100%;
}

.example h1 {
  font-size: 2rem;
}

問題なく出力されました。

処理を自動化する

コードを書くたびにgulp sassコマンドを実行するのは手間がかかり非効率です。

scssファイルを上書き保存したら自動的にgulp sassが実行されるようにします。

const gulp = require('gulp');
const sass = require('gulp-sass');

// sassという名前のタスクを作成
gulp.task('sass', function(){
  gulp.src('./src/sass/*.scss') // 元データの場所
    .pipe(sass({outputStyle: 'expanded'}))
    .pipe(gulp.dest('./dist/css/')); // 出力先の場所
});

// srcフォルダ内のファイルが保存されたら自動でsassを実行
gulp.task('watch', function(){
  gulp.watch('./src/**/*', ['sass']);
});

// gulpコマンドを実行するだけでまとめて実行
gulp.task('default', ['sass', 'watch']);

以下の部分がファイルの保存を監視するためのタスクです。

gulp.watchはgulpに元々実装されている機能なので、追加でパッケージをインストールする必要はありません。

上のコードを細かく説明しておきます。

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

‘./src/**/*’のアスタリスク(*)は全てのファイルを対象にするという意味で、アスタリスク2つ(**)が全てのフォルダを対象にするという意味になります。

つまり、src内にある全てのフォルダを監視対象にするということです。

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

‘default’というタスクは、コマンドプロンプト上で「gulp」コマンドを実行するだけで走ります。

つまり、

gulp

を実行すればsassをcssにする処理が行われ、同時にsrcフォルダの監視が始まるのです。

実行すると、以下の様に表示されます。

gulp

watchが走ると監視状態になります。

試しに以下のようにscssファイルを編集してみます。

.example {
  width: 100%;
  h1 {
    font-size: 2rem;
    color: #333;
  }
}

Ctrl + S で上書き保存すると、自動でsassタスクが実行されます。

distのcssを見てみましょう。

.example {
  width: 100%;
}

.example h1 {
  font-size: 2rem;
  color: #333;
}

自動化されました!便利ですね!

まとめ

このように、Gulpを使うと処理を自動化することができます。

一度導入してしまうと便利すぎて離れられなくなりますね。Web上には便利なパッケージの情報もたくさんあるので、色々と調べてみると良いでしょう。

それでは今日はこのへんで。

Related Entries

この記事を書いた人

TAC

TAC

Webデザイナー、フロントエンドエンジニア。 Webデザイン、HTML/CSS、JavaScript、PHP、SEOが専門です。