gulp scss starter
1.0.0
npm i -g yarnnpm i -g gulpnpm i -g bem-tools-coregit clone https://github.com/andreyalexeich/gulp-scss-starter.gitを使用してアセンブリをダウンロードしますcd gulp-scss-starterに移動しますyarn set version berryを入力しますyarnyarn run dev （開発モード）yarn run buildコマンド（アセンブリモード）を入力しますすべてを正しく行った場合は、ローカルサーバーを使用してブラウザを開く必要があります。アセンブリモードには、プロジェクトの最適化：イメージ圧縮、CSSのマイニング、およびサーバーにダウンロードするためのJSファイル。
gulp-scss-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フォルダー - 開発中に使用：src/blockssrc/fontssrc/imgsrc/jssrc/views/pagessrc/stylessrc/viewssrc/.htaccessdistフォルダーは、開発用にローカルサーバーが起動されるフォルダーです（ yarn run dev起動するとき）gulp-tasksフォルダー-Aフォルダーは、Gulpタスクを備えていますyarn run lint:styles -SCSSファイルを確認してください。 VSCODEの場合、プラグインをインストールする必要があります。 WebstormまたはPhpstormの場合、 Languages & Frameworks - Style Sheets - Stylelintyarn run devプロジェクト開発のためのサーバーを起動するyarn run build -Serverを起動せずに最適化でプロジェクトを収集するyarn run build:views -HTMLファイルを収集します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 lint:styles --fix -Fix STYLELINTの設定に従ってSCSSファイルのフィックスエラーyarn run lint:scripts -JS失敗を確認しますyarn run lint:scripts --fix -ESLINT設定に従ってJSファイルのフィックスエラーsrc/blocks/modules内に独自のフォルダーがありますsrc/views/index.htmlファイル（またはブロックが呼び出される場所から必要なページファイルにインポートされます）src/blocks/modules/_modules.scssファイルにインポートされますsrc/js/import/modules.jsにインポートされますBEMブロックを備えたフォルダーの構造の例：
blocks
├── modules
│ ├──header
│ │ ├── header.html
│ │ ├── header.js
│ │ ├── header.scss
対応するフォルダーとファイルを手動で作成しないために、コンソールで次のコマンドを処方するだけで十分です： yarn run bem-m my-block src/block/modulesでBEMブロックを作成します。MY my-block BEMブロックの名前です（作成後、BEMブロックファイルの内容を削除する必要があります）。
src/views/pagesフォルダーにありますsrc/views/index.htmlsrc/fontsフォルダーにあります.woff形式と.woff2を使用しますsrc/styles/base/_fonts.scssファイルに接続されていますsrc/imgフォルダーにあります.webp形式に自動的に変換されます。使用に関する詳細情報はこちらsrc/img/faviconフォルダーにあり、少なくとも1024px x 1024pxのサイズを持っている必要がありますスプライトを作成するには.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 " > </ use >
</ svg >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 > node_modulesフォルダーにインストールされていますyarn add package_name （たとえば、 yarn add jquery ） import $ from "jquery" ;src/styles/vendor/_libs.scssファイルにインポートしますこのアセンブリを使用してください。
バグについて教えてください、星を置いて、ビールのために私に電報トンになりますか？
すべての質問については、電報に書いてください
