どうもシローです。
今回は、 gulpについて色々まとめてみました。
動作環境
| OS | Ubuntus 18.04.2 LTS |
| node --version | v10.16.0 |
| npm --version | 6.9.0 |
| gulp --version | 4.0.2 |
gulpとは
gulpは簡単に言うとJavaScriptで色々なタスクを実行してくれるものです。
それぞれのタスクを順番を決めて実行したり、同時に複数のタスクを実行することも設定可能です。
また、globというファイル監視システムを使うことができて、ファイルの内容が変更されることをトリガーとしてタスクを実行することもできます。
gulpのインストール手順
node, npmが必要です。
僕はnvmを使ってインストールしました。参照(https://github.com/nvm-sh/nvm)
あとはgulpの公式サイトのチュートリアルを道なりに進んでいくと大丈夫だと思います。参照(https://gulpjs.com/docs/en/getting-started/quick-start)
タスク実行
"gulp"というコマンドを実行すると実行したディレクトリ配下に存在する"gulpfile.js"の中身を読み取って、その中身に記述されているタスクを実行してくれます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
$ gulp [22:58:54] Using gulpfile ~/study/node/gulp_test/sample1/my-project/gulpfile.js [22:58:54] Starting 'default'... [22:58:54] Starting 'task1'... [22:58:54] Finished 'task1' after 691 μs [22:58:54] Starting 'task2'... [22:58:54] Starting 'task3'... [22:58:54] Finished 'task2' after 344 μs [22:58:54] Finished 'task3' after 402 μs [22:58:54] Starting 'task4'... [22:58:54] Finished 'task4' after 173 μs [22:58:54] Starting 'task1'... [22:58:54] Starting 'task5'... [22:58:54] Finished 'task1' after 219 μs [22:58:54] Finished 'task5' after 269 μs [22:58:54] Finished 'default' after 4.42 ms |
gulpのメソッド一覧（一部）
gulpで使うメソッドの一覧（よく使われるだろう）です。
| series(task1, task2,...) | タスクを引数の順番通りに実行する |
| parallel(task1, task2,...) | 引数のタスクを同時実行する |
| src(filePath) | パスに該当するファイルの中身をパイプに流す |
| dest(filePath) | パイプから渡された結果を引数のパスに書き込む |
| watch(filePath, task) | 引数1のパスのファイルが変更されたら、引数2のタスクを実行する |
それぞれのサンプルコードです。
gulpのタスクがどのように実行されるかを調べる
"gulp --tasks"というコマンドで調べることができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
gulp --tasks [23:04:12] Tasks for ~/study/node/gulp_test/sample1/my-project/gulpfile.js [23:04:12] └─┬ default [23:04:12] └─┬ <series> [23:04:12] ├── task1 [23:04:12] ├─┬ <parallel> [23:04:12] │ ├── task2 [23:04:12] │ └── task3 [23:04:12] ├── task4 [23:04:12] └─┬ <parallel> [23:04:12] ├── task1 [23:04:12] └── task5 |
おまけ（Sassを自動コンパイル)
最後にSassを自動コンパイルするリポジトリをこっそりとシェアしときますね。(https://github.com/smithshiro/gulp_sass_sample)