[gulp v4 サンプルコード付き] 色々まとめ

どうもシローです。

今回は、 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“の中身を読み取って、その中身に記述されているタスクを実行してくれます。

 

 

gulpのメソッド一覧(一部)

gulpで使うメソッドの一覧(よく使われるだろう)です。

series(task1, task2,…) タスクを引数の順番通りに実行する
parallel(task1, task2,…) 引数のタスクを同時実行する
src(filePath) パスに該当するファイルの中身をパイプに流す
dest(filePath) パイプから渡された結果を引数のパスに書き込む
watch(filePath, task) 引数1のパスのファイルが変更されたら、引数2のタスクを実行する

それぞれのサンプルコードです。

gulpのタスクがどのように実行されるかを調べる

gulp –tasks“というコマンドで調べることができます。

 

おまけ(Sassを自動コンパイル)

最後にSassを自動コンパイルするリポジトリをこっそりとシェアしときますね。(https://github.com/smithshiro/gulp_sass_sample)


タグ:

[gulp v4 サンプルコード付き] 色々まとめ

どうもシローです。

今回は、 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“の中身を読み取って、その中身に記述されているタスクを実行してくれます。

 

 

gulpのメソッド一覧(一部)

gulpで使うメソッドの一覧(よく使われるだろう)です。

series(task1, task2,…) タスクを引数の順番通りに実行する
parallel(task1, task2,…) 引数のタスクを同時実行する
src(filePath) パスに該当するファイルの中身をパイプに流す
dest(filePath) パイプから渡された結果を引数のパスに書き込む
watch(filePath, task) 引数1のパスのファイルが変更されたら、引数2のタスクを実行する

それぞれのサンプルコードです。

gulpのタスクがどのように実行されるかを調べる

gulp –tasks“というコマンドで調べることができます。

 

おまけ(Sassを自動コンパイル)

最後にSassを自動コンパイルするリポジトリをこっそりとシェアしときますね。(https://github.com/smithshiro/gulp_sass_sample)