gulp pug starterダウンロードgulp pug starterソースコードダウンロード

gulp pug starter

ウェブサイトデータ

1.0.0

ダウンロード

Gulp-Pug-Starter

特異性

BEMクラス
BEM構造が使用されます
PUGおよびSCSSトランジェントが使用されます
Babel Transpowerは、ブラウザで最新のJavaScript（ES6）をサポートするために使用されます
Webpackは、JavaScriptモジュールの組み立てに使用されます
ハードコードが使用されます
エラーのコードチェックは委員会の前で使用されます

インストール

nodejsをインストールします
グローバルにインストール：
- 糸： npm i -g yarn
- Gulp： npm i -g gulp
- BEMツール： npm i -g bem-tools-core
git： git clone https://github.com/andreyalexeich/gulp-pug-starter.gitを使用してアセンブリをダウンロードします
ダウンロードしたアセンブリフォルダー： cd gulp-pug-starterに移動します
yarn set version berryを入力します
必要な依存関係をダウンロード： yarn
作業を開始するには、コマンドを入力してください： yarn run dev （開発モード）
プロジェクトを収集するには、 yarn run buildコマンド（アセンブリモード）を入力します

すべてを正しく行った場合は、ローカルサーバーを使用してブラウザを開く必要があります。アセンブリモードには、プロジェクトの最適化：イメージ圧縮、CSSのマイニング、およびサーバーにダウンロードするためのJSファイル。

ファイル構造

 gulp-pug-starter
├── dist
├── gulp-tasks
├── src
│   ├── blocks
│   ├── fonts
│   ├── img
│   ├── js
│   ├── styles
│   ├── views
│   └── .htaccess
├── gulpfile.babel.js
├── webpack.config.js
├── package.json
├── .yarnrc.yml
├── .babelrc.js
├── .bemrc.js
├── .eslintrc.json
├── .stylelintrc
├── .stylelintignore
└── .gitignore

フォルダーのルート：
- .babelrc.js -babel settings
- .bemrc.js -BEM設定
- .eslintrc.json eslint設定
- .gitignore gitファイルの追跡の禁止
- .stylelintrc -stylelint設定
- .stylelintignore -StyleLintファイルの追跡の禁止
- .yarnrc.yml糸の設定
- gulpfile.babel.jsガルプ設定
- webpack.config.js -webpack設定
- package.json依存関係のリスト
srcフォルダー - 開発中に使用：
- BEMブロックとコンポーネント： src/blocks
- フォント： src/fonts
- 画像： src/img
- JSファイル： src/js
- サイトページ： src/views/pages
- SCSSファイル： src/styles
- オフィスパグファイル： src/views
- GZIP設定を備えたApache Webサーバー構成ファイル： src/.htaccess
distフォルダーは、開発用にローカルサーバーが起動されるフォルダーです（ yarn run dev起動するとき）
gulp-tasksフォルダー-Aフォルダーは、Gulpタスクを備えています

⌨⌨両チーム

yarn run lint:styles -SCSSファイルを確認してください。 VSCODEの場合、プラグインをインストールする必要があります。 WebStormまたはPHPStormの場合、 Languages & Frameworks - Style Sheets - Stylelint （ファイルの保存中にエラーは自動的に修正されます）
yarn run devプロジェクト開発のためのサーバーを起動する
yarn run build -Serverを起動せずに最適化でプロジェクトを収集する
yarn run build:views - パグファイルをコンパイルします
yarn run build:styles -SCSSファイルをコンパイルします
yarn run build:scripts -JS失敗を収集します
yarn run build:images - 画像を収集します
yarn run build:webp画像を.webp形式に調整する
yarn run build:sprites - 芽を集めます
yarn run build:fonts - フォントを収集します
yarn run build:favicons -Favikonkiを収集します
yarn run build:gzip -Apache構成を収集します
yarn run bem-m -ADD BEMブロック
yarn run bem-cコンポーネントを追加します
yarn run lint:styles --fix -Fix STYLELINTの設定に従ってSCSSファイルのフィックスエラー
yarn run lint:scripts -JS失敗を確認します
yarn run lint:scripts --fix -ESLINT設定に従ってJSファイルのフィックスエラー

使用に関する推奨事項

ウェブサイト開発へのコンポーネントアプローチ

各BEMブロックにはsrc/blocks/modules内に独自のフォルダーがあります
1つのBEMブロックのフォルダーには、1つのPUGファイル、1つのSCSSファイル、1つのJSファイルが含まれています（ブロックがスクリプトを使用する場合）
- ブロックパグファイルはsrc/views/index.pugファイル（またはブロックが呼び出される必要なページファイル）にインポートされます。
- ブロックのscss-fileはsrc/blocks/modules/_modules.scssファイルにインポートされます
- ブロックJSファイルはsrc/js/import/modules.jsにインポートされます

BEMブロックを備えたフォルダーの構造の例：

 blocks
├── modules
│   ├── header
│   │   ├── header.pug
│   │   ├── header.js
│   │   ├── header.scss

対応するフォルダーとファイルを手動で作成しないために、コンソールで次のコマンドを規定するだけで十分です。

yarn run bem-m my-block - src/block/modules （メインBEMブロック用）でBEMブロックを作成します。ここで、 my-block BEMブロックの名前です（作成後、BAMブロックJSファイルのコンテンツを削除する必要があります）。
yarn run bem-с my-component src/blocks/components （コンポーネント用）でコンポーネントを作成します。ここで、 my-componentコンポーネントの名前です（作成後、BEMコンポーネントJSファイルのコンテンツを削除する必要があります）。

コンポーネント

コンポーネント（たとえば、アイコン、ボタン）は、不純物を使用してPUGで発行されます
各コンポーネントにはsrc/blocks/components内に独自のフォルダーがあります
1つのコンポーネントのフォルダーには、1つのPUGファイル、1つのSCSSファイル、1つのJSファイルが含まれています（コンポーネントがスクリプトを使用する場合）
- コンポーネントパグファイルはsrc/views/index.pugにインポートされます（またはコンポーネントが呼び出される場所から必要なページファイルに）
- コンポーネントSCSSファイルは、 src/blocks/components/_components.scssファイルにインポートされます
- コンポーネントJSファイルはsrc/js/import/components.jsファイルにインポートされます

プロジェクトのページ

プロジェクトページはsrc/views/pagesフォルダーにあります
- 各ページ（メインのページを含む）がsrc/views/layouts/default.pugを継承します。Pugテンプレートテンプレート
- メインページ： src/views/index.pug

フォント

フォントはsrc/fontsフォルダーにあります
- .woff形式と.woff2を使用します
- フォントはsrc/styles/base/_fonts.scssファイルに接続されています
- このサービスを使用してローカルフォントを調整できます

画像

画像はsrc/imgフォルダーにあります
- 画像は.webp形式に自動的に変換されます。使用に関する詳細情報はこちら
- Favikonokの生成の画像はsrc/img/faviconフォルダーにあり、少なくとも1024px x 1024pxのサイズを持っている必要があります

SVG

スプライトを作成するには.svgイメージはsrc/img/spritesフォルダーにある必要があります。たとえば、 icon-1.svg 、 icon-2.svg 、 icon-3.svgファイルがあり、 icon-2.svgに連絡する必要があります。これを行うには、HTMLでuseタグを使用する必要があります。

svg
    use ( xlink:href = "img/sprites/sprite.svg#logo" )

CSSのスプライトからSVG-Iconsのスタイルを変更します。

 svg use {
    fill : red;
}

アイコンのスタイルを変更できない状況があります。これは、FigmaからSVGへのエクスポートの場合、追加のコードが追加されているためです。例えば：

 < svg width =" 18 " height =" 19 " viewBox =" 0 0 18 19 " fill =" none " xmlns =" http://www.w3.org/2000/svg " >
  < path d =" M4.90918 4.04542L13.091 9.54088L4.90918 14.9545L4.90918 4.04542Z " fill =" #1B1B1D " />
</ svg >

fill="none"およびfill="#1B1B1D"を削除する必要があります。このようになるはずです：

 < svg width =" 18 " height =" 19 " viewBox =" 0 0 18 19 " xmlns =" http://www.w3.org/2000/svg " >
  < path d =" M4.90918 4.04542L13.091 9.54088L4.90918 14.9545L4.90918 4.04542Z " />
</ svg >

Forterライブラリ

すべての第3パーティライブラリはnode_modulesフォルダーにインストールされています
- それらをダウンロードするには、 yarn add package_nameコマンドを使用します
- ライブラリJSファイルを接続するには、BEMブロックJSファイルの最初にインポートします（つまり、スクリプトを使用するBEMブロック）。
```
 import $ from "jquery" ;
```
- ライブラリのスタイリングファイルを接続するには、 src/styles/vendor/_libs.scssファイルにインポートします
- JSファイルとライブラリの文体ファイルは自分で変更できません