見出し画像

作りながら学ぶGulp4！Web制作で使い回せる初期ファイルを作ろう！【回答付きだから安心】

のせっち

※ 当noteは発売から一週間だけ480円で公開していました。現在は値上げしましたが、値上げ後に3万字以上のコンテンツ追加を行っています。
noteをチラ見してみて「思ってたのと違った」「全部知っている内容だった」と感じた場合は、お気軽に返金ボタンを押して下さい。noteの返金方法の解説はこちら

こんにちは！フリーランスエンジニアとして活動しているのせっちと申します。

マークアップエンジニアとして毎日コードを書いており、html/cssコーディングWordPress開発に関わらず、Gulpを必ず使用しています。

毎日触っていてかなり知見が溜まりましたので回答付きの解説noteを作りました。


できるようになること

Gulpを使って以下の処理を行えるようになります。

・Sassのコンパイル(dart-sass対応）
　- ソースマップ作成
　- ベンダープレフィックスの自動付与
　- 順番を自動で整理(アルファベット順など）
　- メディアクエリを一つに纏める。
・ライブリロード
・ローカルサーバー立ち上げ
・pugのコンパイル
・キャッシュバスティング
・javascriptファイルのバンドル&ES5トランスパイル(IE11対応)
(※webpackと連携します）
・画像圧縮 & wepb生成
・使い回し方

当noteを読まれた方の感想はこちら

本noteを買うメリット

Gulpに関しては既に設定記事が沢山あり、僕も解説記事を書いています。
それでもこちらの有料noteを出す理由は下記です。

・質問無制限（質問ルールは下記）
・挫折OK → 完成版をDLできる特典付きなので中身がわかっていなくても使うことができる。
・Web制作に特化
・シンプルでわかりやすい記述
・ワードプレス開発に対応

価格について

1480円
技術書を一冊買うよりも安い値段です。

Gulpに関する書籍はないに等しいです。（情報古い）ここまで詳しい情報は書籍には存在しないと自信を持って言えます。

是非この機会にコーディングの自動化に投資してください。
一回組んでしまえば使い回し可能で、その後のコーディングスピードが劇的に変わります。是非この機会にトライしてみてはいかがでしょうか？

コンテンツ一覧

画像18

思い

GulpはWeb制作において強力なツールですが、設定の難易度は少し高めです。
僕の解説記事でも、「わかりやすい」という評価をいただく一方で、「挫折しました...」という声もありました。
Webpackに比べると設定が容易なGulpですが、

・javascriptの知識
・node.jsの知識
・Gulp特有のお作法

があり、HTML, CSS, jQueryくらいの知識では正直太刀打ちできません。

そこで、既に設定されたファイル群があり、インストールすればすぐ使えるものがあればいいのではないかと考えました。

ただ配るだけでは自分で拡張できないので、これでもかというくらい詳しい解説を付けました。

僕も初めてGulpを使い始めてから2年ほど経ちますが、常に改良を続けています。

正直僕のブログ記事や、他の解説記事で理解できる方にとっては不要かもしません...。

ただし、本noteは僕のGulp知識の全てが集約されていて、最も体系的に、かつ挫折OKな作りにしました！

ブログに書いていない新しい知識も盛り込みましたので興味のある方は是非最後まで読んでいってください！

回答付き特典の価値

本noteの最も付加価値が高い部分で、他の教材と一線を画すところです。

先ほど書いた通り、本noteにはダウンロードすればそのまま使える回答をお付けしています！

解説記事はあっても、

・情報が古い・または間違っていて動かない...
・言っていることがわからない...
・すぐに制作に取り掛からないといけないのでセットアップに時間をかけられない
・詰んでしまった

というケースが多々あります。

僕の教材では、僕が動作確認(Mac)した回答を配布しているので安心です。

回答付きに安心感を感じた方にとってはこのnote、「確実に買い」だと思います。

本noteとの付き合い方（心構えの話）

「これでもかというほど詳しい解説」をします、と言っておきながらこんな事を言うのはよくないかもしれませんが、初心者の方は挫折する可能性が高いです。全てを理解できない可能性が高いです。

それでいいです。最初から全部を理解しようとせずに、まずは動くことを目指してください。

「なぜなのか？」が気になったらこのnoteに戻って来てもう一度解説を見てみていただけたら嬉しいです。

エラーは付きものなので、エラーが出たらまずは自分で原因を調べるようにしてください。環境構築は特に詰みやすいですが、代わりに取ってあげられないので頑張ってください！

どうしてもわからない場合は質問してください⬇︎

質問はGitHub Issuesでお願いします。

2024年1月末をもって質問サポートは終了しました。
質問受付は停止しましたが、issueは閉じずに残しておきます。
質問履歴の中に同じ悩みに遭遇した方がいるかもしれませんので覗いてみてください。

効果的にサポートさせてもらうためにも、以下のGitHub Issuesに書かれていいるルールを守って質問をお願いします。技術的な質問対応は、質問のレベルによって難易度が変わるのでご協力をお願いします。

ルールを著しく無視している質問がある場合は、回答できない場合があるのでご了承くださいm(_ _)m

＊Windowsの方はサポート対象外です。僕がMacユーザーだからです。

とはいえ、Windowsユーザーの方でも問題なく構築できたというご報告が上がっています。

本noteは完成品、途中経過全てDL可能です。

ダウンロードOK！

・「途中まで進めたけど理解できているか不安」
・「間が空いて忘れた」

という方でも安心してご利用いただけます。
ここだけの話ですが、解説をすっ飛ばして、完成品だけ持っていく、、、といことも可能です。

また、章ごとに途中経過をDL可能ですので、途中で置いていかれることもありません！
章ごとの途中経過といっても、（2章以降は）そのまま使うことも可能ですので、「ここまででいいな」と思ったらいつでも止めてOKです。

進め方

本記事の進め方は3通りです。
好きなものを選んでいただいてOKです！

①一緒に手を動かしながら学ぶ！ → Gulpを完全理解してカタマイズ自由自在なムキムキマッチョコース
②まず回答をDLして、解説を見る！ → 時間短縮しつつ、仕組みも理解する細マッチョコース
③完成品をDLしてサクサク使う → ドーピングコース

それではいってみましょう！

更新履歴

2021.06.22 Easy Sassとの競合問題に関する記述を追加
2021.06.23 pugを追加
2021.06.29 cache Bustingを追加
2021.07.03 gulp-sass 5に対応し、sassの解説内容を大幅に更新
2021.07.12 webpackを追加
2021.07.15 使い回し方を追加
2021.09.28 画像圧縮＆webp生成を追加
2021.10.27 Event 'end' に関する記述を追加
2021.11.16 画像圧縮の処理順番を最適化、Webpackの開発モード、本番モードの切り替えについて、jsのエラーについての記述を追加
2022.02.17 cssのminifyに関する記述を追加、h3を追加して記事を読みやすく
2022.09.22 WordPressでそのまま使えるファイル構成をDLできるように
2022.11.28 nodeバージョン、npmパッケージを18.12.1にアップデート

第1章：何はともあれGulpを入れよう！

まずは環境構築をしていきます。

Gulpを使うにはNodeが必要です。Nodeはjavascriptの親戚です。詳しくは色々あるのですが、Gulpを使うために必要なやつ！くらいのふわっとした理解でOKです。

詳しく知りたい方向け⬇️

1-1. nodeをインストールする

node.jsをインストールします。

nodeは下記のバージョンのDLをお願いします。

https://nodejs.org/download/release/v18.12.1/
Macの方は、node-v18.12.1.pkg  をDLします。

最新版を使いたい方は自己責任でm(_ _)m
公式HP: https://nodejs.org/ja/

DLしたファイルをクリックしたら後はポチポチしていけば完了です！

インストールできたら、ターミナルで下記を入力します。

node -v
## v18.12.1と出てくればOK

【注意点】
## で書いているのはコメントアウトなので一緒にコピーしないように

＊環境構築はよく詰まるのでわからないことがあれば質問してください。

1-2. Gulpをインストールしよう！（解説）

まずは、空のフォルダを作ってください。
例）デスクトップに、「gulp-essentials」というフォルダを作成。

そうしたら、ターミナルを開いてgulp-essentialsまで移動してください。

## デスクトップに作成した場合
cd Desktop
## gulp-essentialsへ移動
cd gulp-essentials

cd(スペース) ドラックアンドドロップでも移動可能です。

スクリーンショット 2021-05-11 9.11.17

どんなに深い階層に置いていても一発で移動できて便利なので覚えておきましょう！

スクリーンショット 2021-05-11 9.20.28

vs codeなら、ターミナルを開くだけでgulp-essentialsにいる状態になっています。

ここまで来たらターミナルで下記を入力します。

## package.jsonを作成する
npm init -y

これでpackage.jsonができます。

次にGulpをインストールしていきます。

## Gulpをインストールする
npm i -D gulp

npm i -D PACKAGE_NAMEは npm install PACKAGE_NAME --save-devと同じです。
今後何回も使うので短く書けるこちらを手癖にしましょう。

package.jsonを開くと、devDependenciesにgulpが追加されています。

// package.json
{
 "name": "gulp-essentials",
 "version": "1.0.0",

 // 省略

 "devDependencies": {
   "gulp": "^4.0.2" // gulpが追加されていることを確認
 }
}

これでGulpがインストールできました！

残念ながらこのままではまだ使うことはできませんが、ここからWeb制作に必要なタスクをバンバン入れていきます！

早くも付いていけない...という方、大丈夫です！

「ヤバい...付いていけない」、「今は大丈夫だけどこの先不安かも...」と思った方でも大丈夫です。ここまでの回答をお付けしています。

1-2-2. Gulpをインストールしよう（回答）

ここから先は

46,780字 / 13画像

¥ 1,480

この記事が気に入ったらチップで応援してみませんか？