Gulp4によるコーディング - 環境設定編 - WEBサイト制作のElectric Fruits

お問い合せ／ご依頼ご相談はこちらから→

CREATOR BLOG

Gulp4によるコーディング – 環境設定編

Gulp4による快適コーディング環境その1

Gulpによるコーディング環境を整える下準備 – node.jsのインストール

GulpをつかうにはNode.jsを作業環境にインストールします。

Macの場合は、homebrewでのインストール管理が有名です。
Linux系では、nodebrewもしくは、直接yumやapt-getコマンドでインストールとなります。

nodebrewを使う場合の手順

このnodebrewはとても管理がしやすくておすすめです。
Macでも直接もしくは、homebrew経由でインストールして使うことができます。

Windowsの方はこちらでは説明を省きますがNodelistが有名です。

Mac場合の準備

Homebrewのインンストール

//ターミナルで実行
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

ちなみにhomebrewのアップデートは以下のコマンドで行います。

$ brew update

homebrew経由でnodebrewをインストール

$ brew install nodebrew

Linuxの場合の準備

・CentOSの場合
まずはパッケージをアップデートしておく

$ yum update -y

・Debian/Ubuntuの場合
curlがインストールされていないケースもあるので、まずはcurlをインストール

apt-get install curl -y

nodebrewのインストールと設定(Mac・Linux共通)

$ curl -L git.io/nodebrew | perl - setup

インストール後に以下のようなメッセージが表示されます。

========================================
Export a path to nodebrew:

export PATH=$HOME/.nodebrew/current/bin:$PATH 
========================================

パスを通さないと使いづらいので、パスを通すように設定します

$ vi ~/.bashrc

——— 以下の行を追加
# Nodebrew
export PATH=$HOME/.nodebrew/current/bin:$PATH
— :wqで保存終了

.bashrcを再読み込み

source ~/.bashre

これでnodebrewのインストールが完了です。

Node.jsのインストールと設定

現在インストールできる、リモート側のNodeのバージョンリスト一覧表示

$ nodebrew ls-remote

安定バージョンのnodejsのインストールします。
単なるinstallよりinstall-binaryの方がコンパイル済みのものをとってくるので早いのでおすすめ

$ nodebrew install-binary stable

特定バージョンの場合は以下のようになります。

$ nodebrew install-binary v10.15.0

インストールされているパッケージのバージョン確認します。

$ nodebrew ls

インストールしたバージョンを使うように設定します。

$ nodebrew use v11.15.0

Gulpを作業環境にインストールする

まずは作業環境にてnpmの初期化をします。

//作業環境に移動
$ cd /project_directory/

//npmを初期化
$npm init -y

package.jsonファイルが作られます。
package.jsonにrepositoryのエラーが出ないように以下の記述を追加します。

  "name": "www",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "private": true, //←これ

次にgulpモジュールをインストールします。

$ npm istall —save-dev gulp

Linuxの場合、darwin関係の警告が出る場合があります。
これは、macOSのシステム用のオプションの警告です。
Linuxには必要のないオプションなので気にしなくても良いのですが、気になる場合は、

$ npm istall --save-dev --no-optional gulp

とすると良いです。

ターミナルでgulpのパスが通っていない場合があります。
その時は

$ npm link gulp

とタイプして通します。

その他のモジュールもインストールしていきます。

$ npm install —save-dev gulp-sass

gulpfile.jsの設定

gulpfile.jsファイルでgulpやその他のモジュールの動作設定を行なっていきます。
Gulpは、3から4になり書き方がだいぶ変わってきています。
その辺りを少しまとめて見ました。

Version 4で変わったこと

  • タスクなどの関数を実行する際にコールバックが必要になったこと
  • task関数が非推奨になっことまだ使えます
  • series関数（直列実行/同期） と parallel関数（並列実行/非同期）という関数が加わったこと
  • exportsによるタスクの登録（パブリックタスクとプライベートタスク）
  • パッケージはグローバルではなく各プロジェクトごとにインストールするように

となります。
その他にもVer.3からは大きく変わっていることが多数ありますが、とりあえず上記のポイントを押させておくと良いと思います。

タスクなどの関数を実行する際にコールバックが必要になったこと

こちらは、実行関数の最後にコールバック関数を実行すればOKです。

参考URL
https://gulpjs.com/docs/en/getting-started/creating-tasks

例えば、Scssのコンパイルなどは、以下のような形で書くことができます。

/*ファイルのpath設定*/
const paths = { 'scss':'./src/scss/',//Sassファイルの格納ディレクトリ }

const compileScss = (cb) => { // 
    src(paths.scss + '**/*.scss')//SCSSファイル
        .pipe(//sassコンパイルの設定
            sass({
                outputStyle: 'expanded'
            })
                .on('error', sass.logError)
        )
        .pipe(dest(paths.css));//CSSの書き出しディレクトリ
    cb(); // CallBack実行
}

task関数が非推奨になっこと（まだ使えますが）

タスクの登録は、gulp.taskを使わずに、exportsで登録する形になります。

例）

 exports.default = series(
    browser_sync //定義した関数
  );
 exports.image_min = series(image_min);

また、watchの登録の仕方も変わります。

/*gulp.watchとseriesを変数にて定義*/
const {watch, series} = require('gulp'),
sass = require('gulp-sass');

/*ファイルのpath設定*/
const paths = {
    'scss':'./src/scss/',//Sassファイルの格納ディレクトリ
}

const compileScss = (cd) => {
src(paths.scss + '**/*.scss')
.pipe(sassGlob())
.pipe(//sassコンパイルの設定
sass({
outputStyle: 'expanded',//通常のCSSスタイルの書き出し
})
.on('error', sass.logError)
)
.pipe(dest(paths.css));//CSSの書き出しディレクトリ
cd();
}

const watchScss = watch(paths.scss + '**/*.scss', { usePolling: true }, compileScss)

series関数（直列実行/同期） と parallel関数（並列実行/非同期）という関数が加わったこと

処理を順番にする場合と、並列に同時に実行する場合など設定ができます。

Seriesの例）

const { series } = require('gulp');

const uglify_es = (cb) => {
  // body omitted
  cb();
}

const image_min = (cb) => {
  // body omitted
  cb();
}
exports.build = series(uglify_es, image_min);

Parallelの例）

const { parallel } = require('gulp');

const javascript = (cb) => {
  // body omitted
  cb();
}

const css = (cb) => {
  // body omitted
  cb();
}

exports.build = parallel(javascript, css);

exportsによるタスクの登録（パブリックタスクとプライベートタスク）

exportsを使ってタスクを登録します。
以前は

gulp.task('default',〜）

としてデフォルトのタスクを追加していましたが、これからは、

exports.default = series(関数名）;

と設定をします。

次回はGulpでコーディングする際におすすめのパッケージやgulpfile.jsの具体的な書き方例などを書いていきます。

    ▲ PAGE TOP