gulp scss starter下載gulp scss starter源代碼下載

gulp scss starter

網站數據

1.0.0

下載

Gulp-SCSS啟動器

特點

BEM課
使用BEM結構
使用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-scss-starter.git
轉到下載的彙編文件夾： cd gulp-scss-starter
輸入yarn set version berry
下載必要的依賴項： yarn
要開始工作，請輸入命令： yarn 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預告片
- .bemrc.js -BEM設置
- .eslintrc.json -Eslint設置
- .gitignore禁止跟踪git文件
- .stylelintrc樣式設置
- .stylelintignore禁止跟踪Stylelint文件
- .yarnrc.yml設置紗線
- gulpfile.babel.js墨西哥灣設置
- webpack.config.js webpack設置
- package.json依賴列表
src文件夾 - 開發過程中使用：
- BAM塊： src/blocks
- 字體： src/fonts
- 圖像： src/img
- JS文件： src/js
- 站點頁面： src/views/pages
- SCSS文件： src/styles
- HTML文件： 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 - 通過優化收集一個項目，而無需啟動服務器
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 -fix錯誤在SCSS文件中根據StyleLint設置
yarn run lint:scripts - 檢查JS失敗
yarn run lint:scripts --fix -fix -fix錯誤在JS文件中根據ESLINT設置

使用建議

網站開發的組件方法

每個BEM塊都有自己的文件夾，內部是src/blocks/modules
一個BEM塊的文件夾包含一個HTML文件，一個SCSS文件和一個JS文件（如果塊使用腳本）
- 塊HTML文件被導入src/views/index.html文件（或到所需的block將在哪裡調用的必要頁面文件）
- 塊的SCSS文件被導入src/blocks/modules/_modules.scss文件
- 塊JS文件將導入到src/js/import/modules.js中

帶有BEM塊的文件夾結構的一個示例：

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

為了不手動創建相應的文件夾和文件，在控制台中規定以下命令是足夠的：在src/block/modules yarn run bem-m my-block在src/block/模塊中創建一個bem塊，其中my-block是bem塊的名稱（在創建之後，您需要刪除Bem Block文件的內容）。

項目頁面

項目頁面在src/views/pages文件夾中
- 主頁： src/views/index.html

字體

字體位於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 " > </ use >
</ svg >

從CSS中的精靈更改SVG-ICON的樣式：

 svg use {
    fill : red;
}

在某種程度上，如果無法更改圖標的樣式。這是由於以下事實：從無花果到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庫

所有第三方庫都安裝在node_modules文件夾中
- 要下載它們，請使用yarn add package_name命令（例如， yarn add jquery ）
- 要連接庫JS文件，請在BEM Block JS文件的最初導入它們（即使用腳本的BEM塊），例如：
```
 import $ from "jquery" ;
```
- 要連接庫的樣式文件，請將它們導入src/styles/vendor/_libs.scss文件
- JS文件和圖書館的風格文件不能自行更改