Giter Club home page Giter Club logo

kyun-codeups's Introduction

ファイルの特徴

  • 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's People

Contributors

kyun2022 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.