gulpfileを自分で書きたいその１

← older

gulpfileを自分で書きたいその１

newer →

この記事の趣旨

gulp使えるようになってほしいという神様の言葉をいただき、gulp用のコマンドだけ覚えて、神様からもらったgulpfileを大事に使ってきたんですけど、それじゃいけないな、と思ったので調べながらメモをしていく。

その１です。

全体を通しての最終的なgulpfileの目標

pugをhtmlにコンパイル
sassをmin化したcssにコンパイル
es6をmin化したjsにコンパイル
上記いずれかのコンパイル後にブラウザをリロードして反映
神様のgulpfileを見ずに作る

１つ目から４つ目までは神様にいただいたgulpfileでできていたので、最低限の目標。

そして、今回の目標

実際にgulpfileを書く前にgulpの勉強。

そして、そこから目標到達に向けてやることを切り分ける。

そもそもこのレベル

説明はあったはずなのだが、gulpは「なんか自動化してくれるやつ」という認識。watchとかあって監視してくれるとか、プラグインがいっぱいあっていい！みたいな。

あと、npmね、あれは「なんかnodeのプラグインをいろいろできるやつ」という認識。init,installとかするんだよね。そんでnodistでバージョン管理する。

このくらい書けばどのくらいこのへんが苦手かわかってもらえるだろうか。いやー、フロントエンドエンジニア界隈に希望を与えちゃう存在だと思いますよ。こんなんでも案件こなせるって。

じゃあとりあえずプロジェクトを作成

メモを取り始める前にやったこと。

npm init -y
npm i -D gulp
touch gulpfile.js

とりあえずgulpだけインストール。

ちなみに

コマンドgulpでできるって紹介されていてできないときはnpx gulpするのですが、この違いは前者がグローバルインストールしているときのコマンドで、後者はローカルという理解をしているがあっているのかはわからない…。

タスクの作成

ではさっそくgulpfileでタスクをランするためのなんやかんやを書いていくぞー！おー！

【参考】Gulp

gulpの注意点

タスクをランするための注意点をメモ。既知のこともとりあえず書いていく。

タスクはエクスポートによってコマンドで実行できるようになること
内部タスクを処理する順番の指定のseries()（直列）とparallel()（並列）があること
src()でファイルの読み込み、dest()で書き出しができること
.pipe()で処理を連結できること
ファイル名にはワイルドカードが使えること
gulp用のプラグインがあること
watch()でファイルの監視ができること
監視し続けるため、watch()は同期タスクにしないこと

ちょっと待って

とはいえ、確か神様のファイルは100行くらいあったので、一気に書くのは無理。

目標を何段階かにわけたい。

それぞれのファイルを監視して、変更があればログを出す。
ブラウザシンク
コンパイルしないファイルはコピー
各種コンパイル

こんなもんかな…？

なお、ファイル構成は下記の通り。
root ┣dest ┃┗assets ┃　┣css ┃　┣img ┃　┗js ┣src ┃┗assets ┃　┣css ┃　┣img ┃　┗js ┗package.jsonやgulpfile.js

というわけで、また次回

次回は一気に２ステップ駆け上がります。

gulpfileを自分で書きたいその１ ― https://kihara.coresv.com/2019/02/13/213/ ― I log.