search
LoginSignup
4

More than 1 year has passed since last update.

posted at

updated at

【Gulper】全てのフロントエンドエンジニアに捧ぐ最強環境フレームワーク

はじめに

この記事では、gulpのタスク管理フレームワークGulperのQiita版ドキュメントです。インストール方法、設定方法、拡張方法などを解説していきます。

まずは試してみたい!という方はクイックスタートまたはインストールからご覧ください。

また参考になりましたら、LGTMやGitHubスターTwitterフォローをお願いします!!今後の励みになります!

Gulperとは

gulp.jsで作られたタスク管理フレームワークです。

公式ドキュメントは、GitHubにあります。githubを優先的に更新しているため、Qiitaの情報が古い可能性があります。最新の情報についてはドキュメントをご覧下さい。

特徴

1. 用意されているタスクが豊富

Gulperはデフォルトで多くのモジュールを用意しており、それらを組み合わせることで様々なタスクを作ることができます。例えば、「Sassのコンパイル監視」や「FTPアップロード」などがあります。

- タスク一覧

2. 拡張性が高い

Gulperでは独自のコマンドルールを設けています。これによって、処理内容に合わせて階層構造を構成するだけで簡単にタスクを作成できます。詳しくは拡張方法をご覧ください。

3. 起動速度が速い

通常、gulpfile.js単体でタスクを作成する場合、全てのパッケージ(すなわち必要のないパッケージも含む)を実行時にロードしてしまいます。
タスクの個数が少ない場合はまだ大きな問題とはなりませんが、タスクを増やしていくと簡単な処理でも起動に多くの時間がかかってしまいます。
これはとてもストレスフルなことです。

ここでGulperの登場です。Gulperでは必要なパッケージのみをロードします。
これによって、起動速度はタスクの個数に依存せず、非常にストレスフリーな開発を体験することができます。

github

質問や要望、バグ報告などは全てgithubよりお願い致します。

クイックスタート

以下のコマンドをコピーしお好きなディレクトリで実行してください。
($記号以降がコマンドです)
ブラウザが起動しWelcome to Gulper!と表示されたら成功です。

※gulperディレクトリが作成されます。

$ git clone https://github.com/yuuumbk/gulper.git && cd gulper && npm run start && gulp

インストール

前提

nodeとnpmが使える必要があります。以下のコマンドを実行し、それぞれバージョンが表示されればインストールされています。

$ node -v
v14.16.0
$ npm -v
7.16.0

作業ディレクトリの作成

初めにターミナルを開きます。作業ディレクトリを作成したいディレクトリに移動したら、お好みの名前で作業ディレクトリを作成しその中へ移動しましょう。
なお、今回ではgulperという名前のディレクトリで作業していきます。

$ mkdir gulper
$ cd gulper

※以下のコマンドは全て、gulperディレクトリで実行してください。

ファイルのダウンロードまたは作成

gitを使える方

gitを使える方は、以下のコマンドのいずれかを実行して必要ファイル一式をダウンロードしてください。末尾のコロンを忘れると余分なディレクトリが作成されてしまうので注意してください。

$ git clone git@github.com:yuuumbk/gulper.git .
#または
$ git clone https://github.com/yuuumbk/gulper.git .

それ以外の方

githubからzipをダウンロード

こちらのgithubにアクセスして、緑色のCodeボタンをクリックしてください。
次に、Download ZIPからzipをダウンロードします。
ダウンロードされたら展開し、展開されたフォルダを作業ディレクトリの作成で作成した作業ディレクトリのある場所へ移動させます。
そして、先ほど作成した作業ディレクトリを削除し、代わりに今移動してきたフォルダを作業ディレクトリと同じ名前へリネームします。

npmパッケージのインストール

npmパッケージをインストールし、設定ファイルを生成します。

$ npm run start

これにて、環境構築は完了です!試しに、以下のコマンドを実行してみましょう。

ブラウザが起動してWelcome to Gulper!と表示されていれば成功です。おめでとうございます。

$ gulp

この状態でsrcディレクトリにhtmlファイルやsassファイルを作成すると最適化されたものがdistディレクトリ配下に生成されます。

停止する際は、Ctrl+Cを押してください。

使い方

簡単な使い方を紹介します。

1. srcディレクトリを編集

srcディレクトリを以下の構成で作成してください。このディレクトリは実際に作業をする作業ディレクトリとなります。
なお、この構成は変更できます。変更する場合は設定を参照してください。

.
└── src
    ├── assets # # HTMLファイル以外
    │   ├── css/ # CSSファイル
    │   ├── img/ # 画像
    │   ├── js/ # JavaScriptファイル
    │   └── sass/ # Sassファイル
    ├── ejs/ # ejsファイル
    ├── pug/ # Pugファイル
    └── index.html # HTMLファイルはsrcディレクトリ直下

2. 設定

設定についてはconfig/gulp.jsonで一元管理されています。設定を参考に設定してください。
特にFTP関係のタスクを実行場合は必ず設定を行なってください。

3. タスク実行

最後にタスクを実行するためのコマンドを実行します。基本的には以下に挙げられたもののみで問題ありません。
「Sassコンパイルだけしたい」等の細かいタスクに関しては、コマンドを参照してください。

gulp または gulp default

コーディングを監視し、ブラウザでライブ表示します。以下で紹介しているgulp cleangulp watchの機能を併せ持ちます。
自動で最適化し、ライブ確認をしたい場合はこちらがおすすめです。

gulp watch

コーディングを監視します。
ブラウザでのライブ表示をさせず、リアルタイムで最適化したという場合はこちらがおすすめです。

gulp watch:browser

コーディングを監視し、ブラウザでライブ表示します。上のgulpとの違いは、distディレクトリを初期化するかどうかです。
gulp watch系コマンドは基本この初期化を伴いません。

gulp build

srcディレクトリの内容を最適化したものをdsitディレクトリへ反映させます。
リアルタイムではなく、手動で最適化したい場合はこちらがおすすめです。

gulp clean

distディレクトリのsrcディレクトリの内容で初期化します。

srcディレクトリのファイルを削除してもdistディレクトリには反映されないため、納品前にはこのタスクを実行することを推奨しています。

なお、画像数が多い場合は処理に時間がかかるため、その場合は次のコマンドをおすすめします。

gulp clean:exc:img

clean except imagesの意です。
画像以外のファイルを初期化します。

gulp clean:prod

clean productionの意です。
圧縮などの納品用に最適化をしたものをdistディレクトリに格納します。

ディレクトリ構成

デフォルトの構成は以下のようになっています。

.
├── dist
│   ├── assets
│   │   ├── css/
│   │   └── js/
│   └── index.html
├── src
│   ├── assets
│   │   ├── css/
│   │   ├── img/
│   │   ├── js/
│   │   └── sass/
│   ├── ejs/
│   ├── pug/
│   └── index.html
├── gulpfile.js/
├── config
│   ├── gulp.example.json
│   └── gulp.json
├── package-lock.json
├── package.json
├── .gitignore
├── LICENSE
└── README.md

gulpfile.jsディレクトリの中身は以下から見ることができます。


gulpfile.jsディレクトリ
.
└── gulpfile.js
    ├── lib
    │   ├── getFormattedDate.js
    │   ├── getModule.js
    │   └── getTask.js
    ├── index.js
    ├── modules
    │   ├── browser
    │   │   ├── init.js
    │   │   └── reload.js
    │   ├── build
    │   │   ├── css.js
    │   │   ├── ejs.js
    │   │   ├── html.js
    │   │   ├── img.js
    │   │   ├── js.js
    │   │   ├── pug.js
    │   │   ├── sass.js
    │   │   └── sitemap.js
    │   ├── css
    │   │   ├── expand.js
    │   │   └── min.js
    │   ├── del
    │   │   ├── css.js
    │   │   ├── html.js
    │   │   ├── img.js
    │   │   ├── js.js
    │   │   └── map.js
    │   ├── ftp
    │   │   └── index.js
    │   ├── html
    │   ├── img
    │   ├── js
    │   │   ├── bundle.js
    │   │   ├── expand.js
    │   │   └── min.js
    │   ├── pug
    │   ├── sass
    │   │   ├── compact.js
    │   │   ├── expand.js
    │   │   ├── min.js
    │   │   └── nest.js
    │   └── watch
    │       ├── css.js
    │       ├── ejs.js
    │       ├── ftp.js
    │       ├── html.js
    │       ├── img.js
    │       ├── js.js
    │       ├── pug.js
    │       ├── reload
    │       │   ├── css.js
    │       │   ├── dest.js
    │       │   ├── ejs.js
    │       │   ├── ftp.js
    │       │   ├── html.js
    │       │   ├── img.js
    │       │   ├── js.js
    │       │   ├── pug.js
    │       │   └── sass.js
    │       └── sass.js
    └── tasks
        ├── browser
        │   ├── index.js
        │   └── reload.js
        ├── build
        │   ├── css.js
        │   ├── ejs.js
        │   ├── html.js
        │   ├── img.js
        │   ├── index.js
        │   ├── js.js
        │   ├── pug.js
        │   ├── sass.js
        │   └── sitemap.js
        ├── clean
        │   ├── css.js
        │   ├── ejs.js
        │   ├── exc
        │   │   └── img.js
        │   ├── html.js
        │   ├── img.js
        │   ├── index.js
        │   ├── js.js
        │   ├── prod.js
        │   ├── pug.js
        │   └── sass.js
        ├── css
        │   ├── expand.js
        │   └── min.js
        ├── default
        │   └── index.js
        ├── del
        │   ├── css.js
        │   ├── html.js
        │   ├── img.js
        │   ├── index.js
        │   ├── js.js
        │   └── map.js
        ├── ftp
        │   └── index.js
        ├── html
        ├── img
        ├── js
        │   ├── bundle.js
        │   ├── expand.js
        │   └── min.js
        ├── sass
        │   ├── compact.js
        │   ├── expand.js
        │   ├── min.js
        │   └── nest.js
        └── watch
            ├── browser
            │   ├── css.js
            │   ├── dest.js
            │   ├── ejs.js
            │   ├── ftp.js
            │   ├── html.js
            │   ├── img.js
            │   ├── index.js
            │   ├── js.js
            │   ├── pug.js
            │   └── sass.js
            ├── css.js
            ├── dest.js
            ├── ejs.js
            ├── ftp.js
            ├── html.js
            ├── img.js
            ├── index.js
            ├── js.js
            ├── pug.js
            └── sass.js


大まかな流れは、srcディレクトリでコーディングし、distディレクトリに処理後のファイルをビルドするという形です。

distディレクトリは納品・配布用としてそのまま使うことができます。
Gulper.png

src/

HTMLファイルやSassファイルなどを置いて開発するディレクトリです。gulp watchなどの監視タスクを実行することで、この中で変更した内容が自動的に最適化され、distディレクトリに反映されます。

dist/

src内のファイルを最適化されたものが格納されます。納品・配布用としてそのまま使うことができます。

基本的にこのディレクトリは直接編集するべきではありません。思わぬ誤作動を生み、ファイルが削除されてしまう可能性があります。

gulpfile.js/

Gulperのvendorフォルダです。

名前 役割
index.js コマンドで指定されたタスクに関連する処理のみを実行します。関連しないファイルは読み込まれないため、起動速度がモジュール数に依存しません。
modules/ 全てのモジュールが格納されています。モジュールを拡張する際はこちらで作業してください。
tasks/ 全てのタスクが格納されています。タスクを拡張する際はこちらで作業してください。

- モジュールとは
- タスクとは

config/

設定関連のフォルダです。ディレクトリ構成やFTPホストなどの全ての設定をこちらで行います。詳しくは設定を参照ください。

コマンド

コマンドによってタスクを実行することができます。

コマンド記法

コマンド記法は以下の2種類です。

パス型

スラッシュを用いたコマンド記法です。

gulp watch/browser/sass

といったようにディレクトリ構成をそのままにタスクを実行できます。

コロン型

スラッシュの代わりにコロンを用いても動作します。

gulp watch:browser:sass

モジュール

モジュールとは

モジュールとは処理単位のことです。プラグインなどを用いて独自の処理を定義します。
例としては「Sassをコンパイルする」や「ファイルを圧縮する」などが挙げられます。

これらのモジュールは全てgulpfile.js/modules/ディレクトリに格納されています。

一覧

カラムのモジュール名は全てgulpfile.js/modules/からのパスとなっています。これは、Gulperのコマンドルールに則っています。

ビルド系

モジュール名 処理内容
build/html HTMLファイルをdistファイルへ出力します。
build/pug Pugファイルをコンパイルしてdistディレクトリへ出力します。
build/ejs ejsファイルをコンパイルしてdistディレクトリへ出力します。
build/css CSSファイルを設定に応じて通常圧縮のどちらかの形式でdistファイルへ出力します。
build/sass SASSファイルを設定に応じて通常圧縮ネストコンパクトのいずれかの形式でコンパイルしdistディレクトリへ出力します。
build/js JavaScriptファイルを設定に応じて通常圧縮のどちらかの形式でdistファイルへ出力します。
build/img 画像ファイルを圧縮し、distファイルへ出力します。
build/sitemap サイトマップを生成し、distファイルへ出力します。

ウォッチ系

監視+ビルド系の処理が主となります。
ウォッチリロード系は、変更時にブラウザリロードが自動で行われるため、ブラウザでのライブ表示タスクで重宝されます。

モジュール名 処理内容
watch/html HTMLファイルを監視し、リアルタイムでdistディレクトリへ反映します。
watch/pug Pugファイルを監視し、リアルタイムでdistディレクトリへ反映します。
watch/ejs ejsファイルを監視し、リアルタイムでdistディレクトリへ反映します。
watch/css CSSファイルを監視し、リアルタイムでdistディレクトリへ反映します。
watch/sass Sassファイルを監視し、リアルタイムでdistディレクトリへ反映します。
watch/js JavaScriptファイルを監視し、リアルタイムでdistディレクトリへ反映します。
watch/img 画像ファイルを監視し、リアルタイムでdistディレクトリへ反映します。
watch/ftp srcディレクトリ下の全てのファイルを監視し、FTPアップロードを自動で行います。
watch/reload/html watch/htmlに加え、ブラウザリロードを行います。
watch/reload/pug watch/pugに加え、ブラウザリロードを行います。
watch/reload/ejs watch/ejsに加え、ブラウザリロードを行います。
watch/reload/css watch/cssに加え、ブラウザリロードを行います。
watch/reload/sass watch/sassに加え、ブラウザリロードを行います。
watch/reload/js watch/jsに加え、ブラウザリロードを行います。
watch/reload/img watch/imgに加え、ブラウザリロードを行います。
watch/reload/ftp watch/ftpに加え、ブラウザリロードを行います。
watch/reload/dest distディレクトリの変更を監視し、ブラウザリロードを行います。

デリート系

distディレクトリ下の対象ファイルを削除します。

モジュール名 処理内容
del/html HTMLファイルを削除します。
del/css CSSファイルを削除します。
del/js JavaScriptファイルを削除します。
del/img 画像ファイルを削除します。
del/map CSS・JavaScript・サイトのマップファイルを削除します。

 その他

モジュール名 処理内容
browser/init ブラウザを初期化し、新しく立ち上げます。
browser/reload ブラウザをリロードします。
css/expand CSSファイルを通常形式でdistディレクトリへ出力します。
css/min CSSファイルを圧縮形式でdistディレクトリへ出力します。
sass/expand Sassファイルを通常形式でdistディレクトリへ出力します。
sass/min Sassファイルを圧縮形式でdistディレクトリへ出力します。
sass/nest Sassファイルをネスト形式でdistディレクトリへ出力します。
sass/compact Sassファイルをコンパクト形式でdistディレクトリへ出力します。
js/expand JavaScriptファイルを通常形式でdistディレクトリへ出力します。
js/min JavaScriptファイルを圧縮形式でdistディレクトリへ出力します。
js/bundle 複数のJavaScriptファイルを一つにまとめたバンドルファイルをdistディレクトリへ出力します。
ftp/index FTPアップロードを行います。

タスク

タスクとは

タスクとは、モジュールを組み合わせた一連の処理のことです。組み合わせによって様々なタスクを作ることができます。
また、タスク名はそのままコマンドとして実行することができます。詳しくはコマンドを参照してください。
さらに、タスクを用いてタスクを作ることも可能です。詳しくは拡張方法を参照してください。

モジュールとの違い

モジュールは処理単位であり、それ自体がタスクとして扱われるわけではありません。仮にタスクがモジュール単体を使用し、処理内容がモジュールと全く同じ場合でも、実際に実行されるのはタスクとしての処理であり、モジュールはその処理の部品の一つに過ぎません。

数学的に表すと、モジュール ⊂ タスクとなります。

モジュールはタスクで用いられて初めて威力を発揮するのです。

一覧

カラムのタスク名は全てgulpfile.js/tasks/からのパスとなっています。これは、Gulperのコマンドルールに則っています。

デフォルト

タスク名 処理内容
gulp コーディングを監視し、ブラウザでライブ表示します。以下で紹介しているgulp cleangulp watchの機能を併せ持ちます。
gulp default 同上

ビルド系

タスク名 処理内容
build/index 以下の全てのファイルをdistディレクトリへ出力します。
build/html HTMLファイルをdistディレクトリへ出力します。
build/pug Pugファイルをコンパイルしてdistディレクトリへ出力します。
build/ejs ejsファイルをコンパイルしてdistディレクトリへ出力します。
build/css CSSファイルを設定に応じて通常圧縮のどちらかの形式でdistファイルへ出力します。
build/sass SASSファイルを設定に応じて通常圧縮ネストコンパクトのいずれかの形式でコンパイルしdistディレクトリへ出力します。
build/js JavaScriptファイルを設定に応じて通常圧縮のどちらかの形式でdistファイルへ出力します。
build/img 画像ファイルを圧縮し、distファイルへ出力します。
build/sitemap サイトマップを生成し、distファイルへ出力します。

ウォッチ系

ウォッチブラウザ系は、ブラウザをライブ表示することで、リアルタイムで変更を確認できます。
一方で通常のウォッチ系ではブラウザを起動しないため、軽量で作業をすることができます。

タスク名 処理内容
watch/index 以下の全てのファイルを監視し、リアルタイムでdistディレクトリへ反映します。
watch/html HTMLファイルを監視し、リアルタイムでdistディレクトリへ反映します。
watch/pug Pugファイルを監視し、リアルタイムでdistディレクトリへ反映します。
watch/ejs ejsファイルを監視し、リアルタイムでdistディレクトリへ反映します。
watch/css CSSファイルを監視し、リアルタイムでdistディレクトリへ反映します。
watch/sass Sassファイルを監視し、リアルタイムでdistディレクトリへ反映します。
watch/js JavaScriptファイルを監視し、リアルタイムでdistディレクトリへ反映します。
watch/img 画像ファイルを監視し、リアルタイムでdistディレクトリへ反映します。
watch/ftp srcディレクトリ下の全てのファイルを監視し、FTPアップロードを自動で行います。
watch/dest distディレクトリを監視し、リアルタイムでdistディレクトリへ反映します。
watch/browser/html HTMLファイルを監視し、ブラウザでライブ表示します。
watch/browser/pug Pugファイルを監視し、ブラウザでライブ表示します。
watch/browser/ejs ejsファイルを監視し、ブラウザでライブ表示します。
watch/browser/css CSSファイルを監視し、ブラウザでライブ表示します。
watch/browser/sass Sassファイルを監視し、ブラウザでライブ表示します。
watch/browser/js JavaScriptファイルを監視し、ブラウザでライブ表示します。
watch/browser/img 画像ファイルを監視し、ブラウザでライブ表示します。
watch/browser/ftp watch/ftpに加え、ブラウザでライブ表示します。
watch/browser/dest distディレクトリを監視し、ブラウザでライブ表示します。

デリート系

distディレクトリ下の対象ファイルを削除します。

タスク名 処理内容
del/index 以下の全てのファイルを削除します。
del/html HTMLファイルを削除します。
del/css CSSファイルを削除します。
del/js JavaScriptファイルを削除します。
del/img 画像ファイルを削除します。
del/map CSS・JavaScript・サイトのマップファイルを削除します。

クリーン系

distディレクトリのファイルをsrcディレクトリの内容で初期化・再構成します。
srcディレクトリのファイルを削除しただけでは、distディレクトリのファイルは自動的に削除されないため、納品前にこのタスクを使用することをおすすめします。

タスク名 処理内容
clean/index 以下の全てのファイルを再構成します。
clean/html HTMLファイルを再構成します。
clean/pug Pugファイルを再構成します。
clean/ejs ejsファイルを再構成します。
clean/css CSSファイルを再構成します。
clean/sass Sassファイルを再構成します。
clean/js JavaScriptファイルを再構成します。
clean/img 画像ファイルを再構成します。
clean/prod CSS・JavaScriptファイルを納品用に圧縮し、全てのファイルを再構成します。
clean/exc/img 画像ファイルを除くすべてのファイルを再構成します。

その他

モジュール名 処理内容
browser/init ブラウザを初期化し、新しく立ち上げます。
browser/reload ブラウザをリロードします。
css/expand CSSファイルを通常形式でdistディレクトリへ出力します。
css/min CSSファイルを圧縮形式でdistディレクトリへ出力します。
sass/expand Sassファイルを通常形式でdistディレクトリへ出力します。
sass/min Sassファイルを圧縮形式でdistディレクトリへ出力します。
sass/nest Sassファイルをネスト形式でdistディレクトリへ出力します。
sass/compact Sassファイルをコンパクト形式でdistディレクトリへ出力します。
js/expand JavaScriptファイルを通常形式でdistディレクトリへ出力します。
js/min JavaScriptファイルを圧縮形式でdistディレクトリへ出力します。
js/bundle 複数のJavaScriptファイルを一つにまとめたバンドルファイルをdistディレクトリへ出力します。
ftp/index FTPアップロードを行います。

設定

{
  "paths": { 
    "root": "./dist", # destディレクトリのルート
    "siteUrl": "https://example.com", # サイトURL(サイトマップタスクで必須)
    "html": { # HTML
      "src": "./src/**/*.{html,htm}", #監視対象ファイル
      "dest": "./dist", # 出力先ディレクトリ
      "index": "index.html" # インデックスファイル
    },
    "pug": { #Pug
      "src": "./src/pug/**/*.pug", # 監視対象ファイル
      "dest": "./dist" # 出力先ディレクトリ
    },
    "ejs": { #ejs
      "src": "./src/ejs/**/*.ejs", # 監視対象ファイル 
      "srcBuild": [ # 実際に出力するファイル
        "./src/ejs/**/*.ejs",  
        "!./src/ejs/**/_*.ejs" # "_"から始まるファイルは出力しない
      ],
      "dest": "./dist" # 出力先ディレクトリ
    },
    "sass": {
      "src": "./src/assets/sass/**/*.scss", # 監視対象ファイル
      "dest": { # 出力先ディレクトリ
        "expand": "./dist/assets/css", # 通常ファイル
        "compress": "./dist/assets/css", # 圧縮ファイル
        "nest": "./dist/assets/css", # ネストファイル
        "compact": "./dist/assets/css" # コンパクトファイル
      }
    },
    "css": {
      "src": "./src/assets/css/**/*.css", # 監視対象ファイル
      "dest": { # 出力先ディレクトリ
        "expand": "./dist/assets/css", # 通常ファイル
        "compress": "./dist/assets/css" # 圧縮ファイル
      }
    },
    "js": {
      "src": "./src/assets/js/**/*.js", # 監視対象ファイル
      "dest": { # 出力先ディレクトリ
        "expand": "./dist/assets/js", # 通常ファイル
        "compress": "./dist/assets/js" # 圧縮ファイル
      }
    },
    "img": {
      "src": "./src/assets/img/**/*.{jpg,JPG,jpeg,JPEG,png,PNG,gif,GIF,svg,SVG}", # 監視対象ファイル
      "dest": "./dist/assets/img" # 出力先ディレクトリ
    },
    "browser": {
      "src": "./src/**", # 監視対象ファイル
      "dest": "./dist/**" # 出力先ディレクトリ
    },
    "delMap": [ # 削除対象マップファイル
      "./dist/**/*.css.map", 
      "./dist/**/*.js.map",
      "./dist/sitemap.xml"
    ]
  },
  "ftp": {
    "host": "FTP_HOST", # サーバーホスト名
    "user": "", # サーバーユーザー名
    "password": "", # サーバーパスワード
    "remoteRoot": "/public_html", # サーバールートディレクトリ
    "localRoot": "./dist", # ローカルルートディレクトリ(destディレクトリ)
    "include": [ # 対象ファイル
      "*"
    ],
    "exclude": [ # 除外ファイル
      "*.css.map",
      "*.scripts.map"
    ],
    "deleteRemote": false, # アップロードの都度サーバーのファイルを削除するかどうか
    "forcePasv": true, # パッシブモードを強制する
    "sftp": false, # SFTPまたはFTP
    "debounceDelay": 10000 # アップロード間隔
  },
  "overrideBrowserslist": [ # CSSオートプレフィックス
    "last 2 versions",
    "> 2%"
  ],
  "pug": { 
    "pretty": true # コンパイル時に改行とインデントを挿入する。
  },
  "ejs": {
    "ext": ".html" # 出力ファイル拡張子
  },
  "sass": {
    "outputStyle": { # 出力スタイル
      "expand": false, # 通常
      "compress": true, # 圧縮
      "nest": false, # ネスト
      "compact": false # コンパクト
    }
  },
  "css": {
    "outputStyle": { # 出力スタイル
      "expand": false, # 通常
      "compress": true # 圧縮
    }
  },
  "js": {
    "outputStyle": { # 出力スタイル
      "expand": false, # 通常
      "compress": true # 圧縮
    },
    "bundle": {
      "name": "bundle.js", # バンドルファイル名
      "src": [ # バンドル対象ファイル
        "./dist/assets/js/**/*.js"
      ],
      "dest": "./dist/assets/js" # 出力先ディレクトリ
    }
  },
  "propertySort": "smacss", # CSSプロパティソート: samcss, alphabetically, concentric-css
  "sourcemaps": { # ソースマップ拡張子
    "sass": ".",
    "css": ".",
    "js": "."
  },
  "suffix": {
    "ejs": ".html",
    "sass": {
      "expand": "", # 通常
      "compress": ".min", # 圧縮
      "nest": "", # ネスト
      "compact": "" # コンパクト
    },
    "css": {
      "expand": "", # 通常
      "compress": ".min" # 圧縮
    },
    "js": {
      "expand": "", # 通常
      "compress": ".min" # 圧縮
    }
  },
  "map": { # バップファイルを生成するかどうか
    "sass": true,
    "css": true,
    "js": true
  },
  "imagemin": {
    "pngquant": { # PNG
      "quality": { # 圧縮度
        "min": 0.6,
        "max": 0.8
      },
      "mozjpeg": { # JPG
        "quality": 80 # 圧縮度
      }
    }
  },
  "browser": {
    "port": 3000, # ブラウザポート
    "reloadThrottle": 3000, # リロード間隔
    "reloadOnRestart": true 
  }
}

拡張方法

現在製作中です。今しばらくお待ちください。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
4