tamakipedia

フロントエンドエンジニア。Typescriptもう特訓中です。一日の振り返りや学んだことをちょっとずつ吐いています。

gulp を入れるコードメモ

本日初めて、gulpを入れたのでメモメモ。

沢山の方の記事を参考にさせてもらい、なんとかタスクを走らせることまではできました。

 

 

 

---   gulp とは

node.jsを使ったタスク自動化ツールのことで、そういうツールのことをタスクランナーと呼ぶそうです。

・sassのファイルを自動でcssに変換したい!

・es6のファイルをどのブラウザでも対応できる表記に直して欲しい!

・ベンダープレフィックがどれに必要なのかわかんない!

という時に活躍してくれます。さらにファイルに変更が加わった時点でタスクを走らせることができるので、使いこなせれば便利です。

 

 

 

---   gulp をインストールしてタスクを作ってみる

では早速実際にgulpを走らせてみしょう。

 

プロジェクト内のsrcというファイルに格納していきます

mkdir src

 

node_modulesが作成されます

npm init -y 

 

gulp本体とプラグインをインストール

npm install -D gulp gulp-sass

 

タスクを書いて

 

f:id:okinawanpizza:20191231003501p:plain

 

ガルプをnpxで走らせます。

npx gulp watch-sass

 

タスクの確認は

gulp --tasks

 

 

 

--- メモ

node_modules = node.jsのモジュール(gulpなど)が入っています

package.json = node.jsの設定や関連してるもののバージョンが記載されています。

gulpfile.js = gulpの設定内容が記載されています。