ファイルの特徴

• htmlによるコーディング
• src内の情報は静的ページ（dist）に反映される

このコーディングファイルの使い方

まず、以下に書いてある内容を必ずお読みください この中身で分かることは以下のとおりです

• 使用環境
• 使い方および操作方法
• 注意点

使用環境

• Node.js バージョン14系以上
• npm バージョン8以上
• バージョン確認方法：※ターミナル上でコマンドを入力すること
  • node -v
  • npm -v
• コマンドを入力後、数字がでてくれば大丈夫です

使い方および操作方法

1. ターミナルを開く
2. cd _gulpをターミナルに入力（cdと_gulpの間には半角スペース要）
3. npm iをターミナルへ入力
4. ダウンロードが始まります
5. npx gulpでタスクランナーが起動します

- npm i コマンドでダウンロードが始まる仕組み

• package.jsonファイルから情報を参照して必要なパッケージをダウンロードします
• Gulpを動かすのに必要な情報になりますので削除は厳禁

- Gulpの使い方

• npx gulp ないしは gulp でタスクランナー起動
  • コーディング中はずっと動かしたままにすること
• 提出時は npx gulp buildないしはgulp build コマンドでフォルダ内の整理を行うこと（資料動画参考）

コーディング時の操作方法

• srcフォルダ内のみを触る
• srcフォルダ内に入力した情報は自動的にdistフォルダに反映されます
• distフォルダはアップロードするファイルなので編集は厳禁

ファイルの特徴

• スマホファーストおよびパソコンファーストどちらも設定が可能（変数管理）
  • src/sass/global/_breakpoints.scssにある変数をpc or spに設定する（初期値：sp）
  • スマホファーストとパソコンファーストを変数一つで切り替えが可能になっています（資料動画参考）

注意点

• baseフォルダ内は変更を加えないこと
• 納品時（提出時）は_gulpフォルダ内のnode_modulesを削除すること
• 提出時はgulp buildコマンドを入力し、フォルダ内の整理を行うこと

kyun__codeups