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

備忘録_gulp再入門

More than 1 year has passed since last update.

なんとなくの部分を文書化して知識整理

前提

下記の2つが入っていること
- Node
- npm

gulpに関して

gulpはビルドシステムランナー(タスクランナーとやってることは同じイメージ)。

gulpはファイルを「ストリーム」として扱いながら処理を実行することができ、
タスクの対象となるファイルに対して、.pipe()で次の処理に結果を渡す。
※jqueryのようなイメージ

また、pipe()で処理を繋ぐ際に、処理の間でI/Oが起きず時間のロストがない。

全体的に各タスクが何をしているのかも把握しやすいのもメリット。

基本的なgulpインストール

公式を参照
https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md

// グローバルにインストール
$ npm install --global gulp-cli

// 別にこれでもいい
$ npm i -g gulp-cli

// バージョン確認
$ gulp -v

個人的には-gでグローバルにインストールせずにパスを通す。
以下手順
http://qiita.com/y_sekitoba/items/78d3ac5e928de438e582

実際にgulp設定する

  1. 対象ディレクトリへ移動

  2. 対象ディレクトリで下記コマンドを実行し「package.json」を作成

// -yオプションをどっちでもいい
$ npm init -y

// これでもいい
$ npm i -y
  1. 「devDependencies」に「gulp」パッケージを記述するために下記コマンドを実行
$ npm install --save-dev gulp

// これでもいい
$ npm i -D gulp

※開発に使用するパッケージなので「--save-dev」オプションで「devDependencies」に記述

  1. 対象ディレクトリに「gulpfile.js」を作成※「package.json」と同じ階層

  2. 「gulpfile.js」に対して必要な設定を記述

  3. 対象ディレクトリで下記コマンドを実行することで「gulp」を起動できる

$ gulp

gulpfile.jsの記述に関して

gulpfile.js
// まずはじめに読み込ませたいプラグインを記述
var gulp = require('gulp');
var 変数名 = require('プラグイン名');
var 変数名 = require('プラグイン名');

// 下のgulpは変数
gulp.task('タスク名_1', function(){
    gulp.src('対象となるファイルまでのパス')
    // .pipeを利用して利用したいプラグインをつないでいくイメージ
    .pipe(対象プラグインの変数名※プラグインによっては設定が必要)
    .pipe(対象プラグインの変数名※プラグインによっては設定が必要)

    // コンパイルだどによりファイルが出力される場合は出力先を記述
    .pipe(gulp.dest('出力先のパス'));
});

// taskは複数記述することが可能
gulp.task('タスク名_2', function(){
    gulp.src('対象となるファイルまでのパス')
    // .pipeを利用して利用したいプラグインをつないでいくイメージ
    .pipe(対象プラグインの変数名※プラグインによっては設定が必要)
    .pipe(対象プラグインの変数名※プラグインによっては設定が必要)

    // コンパイルだどによりファイルが出力される場合は出力先を記述
    .pipe(gulp.dest('出力先のパス'));
});


// defaultタスクの設定※ターミナルでgulpと叩くことで実行されるタスク
gulp.task('default', function(){
    // watchタスク(変更の監視)の設定
    gulp.watch("監視対象ファイルのパス", ["実行させたいタスク名"]);
    gulp.watch("監視対象ファイルのパス", ["実行させたいタスク名"]);
});


gulp.src()のパスの設定方法

パスの指定に関して「MiniMatchパターン」で第1引数に指定する。
※MiniMatchパターン : node.jsで使用されている「path match」用のライブラリ

参考にさせていただいたサイト
http://motemen.hatenablog.com/entry/2014/07/15/minimatch-cheat-sheet

パス設定サンプル

// 指定したディレクトリの中にあるファイルを指定
gulp.src('src/sass/*.scss')

// 指定したディレクトリの中にあるファイルを指定(指定ディレクトリの中にあるディレクトリも含む)
gulp.src('sass/**/*.scss')

// パスを複数指定も可能※!で除外もできる
gulp.src(['sass/**/.scss','!sass/test/**/*.scss'])

gulpのタスクの依存関係

gulpfile.jsのタスクは非同期で実行される。
なので、Aタスクの実行後にBタスクを実行したい場合などは、
タスクの依存関係(タスクの記述順など)に注意する。

複雑な依存に関しての対応策

実行順序を制御するプラグイン「run-sequence」を導入。

// sample_1
gulp.task('testTask', function() {
  runSequence(
    'task_1',
    'task_2'
  );
});

// sample_2
gulp.task('testTask', function() {
    runSequence(
      'task_1',

      // 特定のタスクを並列に実行したい時は下記のように記述(時間の効率化)
      ['task_2a', 'task_2b'],
      'task_3'
    );
});

さらに設定を細かくしたい場合は、下記のページを参考にさせていただいた。
http://qiita.com/naokitomita/items/d18135b69d917b0d08e4

gulpのv4.0

gulpのv4.0からは「run-sequence」プラグインを導入しなくても、
gulpのAPIで実行順序の制御が可能になるらしい。

※現状の最新はv3.9.1 / 2016年12月現在

便利なプラグインたち

※後々調整しながら追記予定

  • browser-sync : ブラウザ系
  • gulp-plumber : エラー処理に関して
  • gulp-sass : scssのコンパイル
  • gulp-autoprefixer : コンパイルのタイミングでプレフィックスを付与
  • gulp.spritesmith : スプライト画像作成
  • gulp-ftp : ftpのアップロードをコマンドで実施
  • gulp-sftp : sftpの
  • gulp-load-tasks : タスクの読み込み支援
  • gulp-uglify : ファイルの圧縮※公開用とか
  • gulp-if : 条件分岐させる
  • gulp-copy : コピーができる
  • gulp-csslint : cssのlint
  • gulp-eslint : jsのlint
  • gulp-html5-int : htmlのlint
  • gulp-cached : 変更があったファイルのみ処理を実行
  • gulp-remember : キャッシュしたストリームを取り出す
  • gulp-using : タスクが処理しているファイル名を表示
y_sekitoba
異業種からweb業界へ転職。 基本的に備忘録がメインです。
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
No 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
ユーザーは見つかりませんでした