この記事の趣旨
gulp使えるようになってほしいという神様の言葉をいただき、gulp用のコマンドだけ覚えて、神様からもらったgulpfileを大事に使ってきたんですけど、それじゃいけないな、と思ったので調べながらメモをしていく。
その1です。
全体を通しての最終的なgulpfileの目標
- pugをhtmlにコンパイル
- sassをmin化したcssにコンパイル
- es6をmin化したjsにコンパイル
- 上記いずれかのコンパイル後にブラウザをリロードして反映
- 神様のgulpfileを見ずに作る
1つ目から4つ目までは神様にいただいた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
というわけで、また次回
次回は一気に2ステップ駆け上がります。
目次
- gulpfileを自分で書きたい その1←ココ
- gulpfileを自分で書きたい その2
- gulpfileを自分で書きたい その3
- gulpfileを自分で書きたい その4
- gulpfileを自分で書きたい その5
categories
tags
Update log
公開:2019/2/13@9:46