Unduh gulp scss starter - Unduh Kode Sumber gulp scss starter

gulp scss starter

Data situs web

1.0.0

Unduh

GULP-SCSS-STARTER

Kekhasan

Kelas BEM
Struktur BEM digunakan
Preprosesor SCSS digunakan
Transpower Babel digunakan untuk mendukung JavaScript modern (ES6) di browser
Webpack digunakan untuk merakit modul JavaScript
Kode keras digunakan
Kode Pemeriksaan untuk Kesalahan digunakan di depan komite

Instalasi

Instal Nodejs
Instal secara global:
- Benang: npm i -g yarn
- Gulp: npm i -g gulp
- Alat BEM: npm i -g bem-tools-core
Unduh perakitan menggunakan git: git clone https://github.com/andreyalexeich/gulp-scss-starter.git
Pergi ke folder perakitan yang diunduh: cd gulp-scss-starter
Masukkan yarn set version berry
Unduh dependensi yang diperlukan: yarn
Untuk mulai bekerja, masukkan perintah: yarn run dev (mode pengembangan)
Untuk mengumpulkan proyek, masukkan perintah yarn run build (Mode Perakitan)

Jika Anda melakukan semuanya dengan benar, Anda harus membuka browser dengan server lokal. Mode perakitan melibatkan optimalisasi proyek: kompresi gambar, minifikasi file CSS dan JS untuk diunduh ke server.

Struktur file

 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

Akar folder:
- .babelrc.js - Pengaturan Babel
- .bemrc.js - Pengaturan BEM
- .eslintrc.json - Pengaturan Eslint
- .gitignore - larangan melacak file git
- .stylelintrc - Pengaturan Stylelint
- .stylelintignore - Larangan untuk melacak file stylelint
- .yarnrc.yml - pengaturan benang
- gulpfile.babel.js - Pengaturan Gulp
- webpack.config.js - Pengaturan Webpack
- package.json - Daftar dependensi
Folder src - Digunakan Selama Pengembangan:
- Blok BAM: src/blocks
- Font: src/fonts
- Gambar: src/img
- File JS: src/js
- Halaman Situs: src/views/pages
- File SCSS: src/styles
- File HTML: src/views
- File konfigurasi server web apache dengan pengaturan gzip: src/.htaccess
dist Folder adalah folder dari mana server lokal diluncurkan untuk pengembangan (saat memulai yarn run dev )
Folder gulp-tasks -a folder dengan tugas gulp

⌨️ Tim

yarn run lint:styles - Periksa file SCSS. Untuk vScode, Anda perlu menginstal plugin. Untuk Webstorm atau PhPStorm, Anda perlu mengaktifkan Stylelint dalam Languages & Frameworks - Style Sheets - Stylelint
yarn run dev - Memulai server untuk pengembangan proyek
yarn run build - Kumpulkan proyek dengan optimasi tanpa memulai server
yarn run build:views - Kumpulkan file HTML
yarn run build:styles - Kompilasi file SCSS
yarn run build:scripts - Kumpulkan JS Failes
yarn run build:images - Kumpulkan Gambar
yarn run build:webp - Untuk menyesuaikan gambar ke format .webp
yarn run build:sprites - Kumpulkan kecambah
yarn run build:fonts - Kumpulkan Font
yarn run build:favicons - Kumpulkan Favikonki
yarn run build:gzip - Kumpulkan Konfigurasi Apache
yarn run bem-m -Add Bem Block
yarn run lint:styles --fix -Fix Kesalahan dalam File SCSS Menurut Pengaturan Stylelint
yarn run lint:scripts - Periksa JS Gagal
yarn run lint:scripts --fix -Fix Kesalahan dalam File JS Menurut Pengaturan Eslint

Rekomendasi untuk digunakan

Pendekatan Komponen untuk Pengembangan Situs Web

Setiap blok BEM memiliki foldernya sendiri di dalam src/blocks/modules
Folder dari satu blok BEM berisi satu file HTML, satu file SCSS dan satu file JS (jika blok menggunakan skrip)
- File blok html diimpor ke file src/views/index.html (atau ke file halaman yang diperlukan dari mana blok akan dipanggil)
- SCSS-File dari blok diimpor ke dalam file src/blocks/modules/_modules.scss
- File blok js diimpor ke src/js/import/modules.js

Contoh struktur folder dengan blok BEM:

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

Agar tidak secara manual membuat folder dan file yang sesuai, itu cukup untuk meresepkan perintah berikut dalam konsol: yarn run bem-m my-block -untuk membuat blok BEM di src/block/modules , di mana my-block adalah nama blok BEM (setelah pembuatan Anda perlu menghapus konten file blok BEM).

Halaman proyek

Halaman proyek ada di folder src/views/pages
- Halaman Utama: src/views/index.html

Font

Font ada di folder src/fonts
- Gunakan format .woff dan .woff2
- Font terhubung ke file src/styles/base/_fonts.scss
- Anda dapat menyesuaikan font lokal menggunakan layanan ini

Gambar

Gambar ada di folder src/img
- Gambar secara otomatis dikonversi menjadi format .webp . Informasi terperinci tentang penggunaan di sini
- Gambar untuk generasi favikonok harus berada di folder src/img/favicon dan memiliki ukuran setidaknya 1024px x 1024px

SVG

Untuk membuat sprite .svg Gambar .svg harus ada di folder src/img/sprites . Misalnya, kami memiliki file icon-1.svg , icon-2.svg dan icon-3.svg , dan kami harus menghubungi icon-2.svg . Untuk melakukan ini, di HTML Anda perlu menggunakan tag <use> :

 < svg >
    < use xlink:href =" img/sprites/sprite.svg#logo " > </ use >
</ svg >

Ubah gaya SVG-Icons dari Sprite di CSS:

 svg use {
    fill : red;
}

Ada situasi ketika gaya ikon tidak dapat diubah. Ini karena fakta bahwa ketika mengekspor dari Figma ke SVG, kode tambahan ditambahkan. Misalnya:

 < 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 >

Perlu untuk menghapus fill="none" dan fill="#1B1B1D" . Seharusnya ternyata seperti ini:

 < 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 >

Perpustakaan Forter

Semua pustaka -ketiga diinstal di folder node_modules
- Untuk mendownloadnya, gunakan perintah yarn add package_name (misalnya, yarn add jquery )
- Untuk menghubungkan file JS Pustaka, impor di awal file BEM Block JS (yaitu, blok BEM yang menggunakan skrip), misalnya:
```
 import $ from "jquery" ;
```
- Untuk menghubungkan file styling perpustakaan, impor ke file src/styles/vendor/_libs.scss
- File JS dan file gaya perpustakaan tidak dapat diubah sendiri