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文件和图书馆的风格文件不能自行更改