startit

Mulai

Keterangan

✔ Proyek starter sederhana memungkinkan pengiriman proyek dan/atau:

• Penyebaran halaman GitHub otomatis
• Publikasikan rilis ke GitHub

Ini memberikan contoh proyek yang mengotomatiskan tugas dengan tegukan termasuk:

• Mengkompilasi Sass ke Kode CSS
• Transpiling ES6 ke kode ES5 yang kompatibel dengan peramban silang
• Mengeluarkan Sourcemaps untuk digunakan di browser devtools
• kode linting dan validasi
• Minifying for Production
• secara otomatis menambahkan awalan vendor
• mengoptimalkan gambar
• Menerbitkan font ke web
• Menghasilkan HTML dari templat dan file konten
• aset penanganan dan inlining
• File-reloading langsung di browser saat file sumber berubah
• Menyebarkan ke halaman GitHub

Persyaratan

Proyek ini memiliki beberapa permintaan yang perlu Anda temui untuk mengkompilasinya.

• Node.js
• Benang
• Meneguk

Instalasi

Untuk mulai menggunakan proyek, Anda perlu mengkloningnya ke PC Anda dengan perintah git, ganti [your-project] dengan nama proyek Anda:

git clone https://github.com/adorade/startit.git [your-project]

Arahkan ke folder:

 cd [your-project]

Instal dependensi:

yarn install

Perhatikan bahwa versi modul telah diperbaiki untuk menjamin kompatibilitas. Jalankan yarn outdated dan perbarui package.json seperlunya.

Cara menggunakan

Untuk mulai menggunakannya, satu -satunya hal yang perlu Anda lakukan adalah membuka proyek pada editor kode pilihan dan kode Anda. Untuk mengkompilasi dan melakukan pratinjau langsung semua perubahan Anda, Anda memiliki beberapa perintah yang akan membantu Anda. Berikut adalah daftar perintah yang harus Anda ketahui.

Setiap perintah harus dieksekusi pada direktori root proyek menggunakan perintah Gulp seperti gulp cleaner atau gulp build :

Tugas	Keterangan
pembersih	Hapus semua file yang dikompilasi
linter	Gaya serat, skrip, dan file pesek
gaya	Mengkompilasi gaya sass
skrip	Kompilasi file JavaScript
font	Salin font
statika	Salin file statis
gambar	Mengoptimalkan gambar
halaman	Kompilasi template pug
melayani	Mulai server dan perhatikan perubahan apa pun
membangun	Membangun proyek
dev	Kompilasi dan perhatikan perubahan
menyebarkan	Menerapkan file ke halaman GitHub
melepaskan	Publikasikan rilis ke GitHub
bawaan	Tugas Gulp Default
cek	Periksa konfigurasi tegukan
membantu	Cetak pesan bantuan

Jalankan gulp --tasks untuk melihat semua tugas tegukan yang tersedia.

Jika Anda sedang dalam pengembangan, perintah gulp dev adalah pilihan terbaik untuk Anda. Buka folder proyek di konsol dan jalankan gulp dev , itu akan menyusun proyek dan memulai server yang akan menyegarkan setiap kali Anda mengubah sesuatu dalam kode.
Gulp akan mengawasi perubahan dan akan memberi tahu Anda cara mengakses proyek dari URL lokal dan publik.
Setiap browser yang menunjuk ke URL itu akan disegarkan secara otomatis. Sebagai fitur tambahan untuk tujuan pengujian, setiap interaksi pada satu browser akan tercermin pada yang lain. Cobalah di telepon, tablet, dan PC secara bersamaan.

Struktur

Proyek ini memiliki struktur yang sangat sederhana dan fleksibel. Jika tempat default untuk file atau direktori apa pun perlu dipindahkan, pastikan untuk memperbarui ke posisi baru pada file tool/util/config.js .

├── dist - > All the compiled files will be placed here (Production)
├── logs - > Logs files
├── src  - > Source files for the project
│   ├── es6     - > Scripts
│   ├── fonts   - > Fonts
│   ├── images  - > Images
│   ├── scss    - > Sass
│   ├── static  - > Favicons...
│   ├── vendors - > Vendors folder for all the dependencies
│   └── views   - > Templates directory for Pug files
├── test - > Tests Files
├── tmp  - > All the compiled files will be placed here (Development)
├── tools     - > Project tools and configuration
│   ├── build - > files for build
│   ├── tasks - > tasks files for gulp
│   └── util  - > config and options for project
├── package.json - > NodeJS configuration file
├── gulpfile.esm.js - > Gulp tasks
├── README.md         - > README
└── ... config files for packages

Semua file dalam folder dist dan tmp akan dihasilkan secara otomatis oleh berbagai tugas ketika proyek dikompilasi. Pastikan untuk tidak memodifikasi file apa pun secara manual di folder ini karena perubahan akan diganti pada proses kompilasi.

Konfigurasi

Proyek ini memiliki beberapa opsi konfigurasi yang bagus untuk memenuhi semua yang Anda butuhkan. Untuk mengonfigurasi, Anda perlu mengedit file berikut dan mengubah nilai apa pun yang Anda butuhkan:

• tool/util/banner.js - Banner untuk Script and Styles Files
• tool/util/config.js - Konfigurasi Proyek
• tool/util/options.js - Opsi untuk plugin

Setelah setiap perubahan yang Anda buat, periksa dengan gulp checks apakah semuanya beres dan tidak ada kesalahan.
Setiap aspek konfigurasi ini dijelaskan dalam file sehingga Anda tahu opsi.

Membangun pengembangan

Jalankan dalam mode pengembangan live-reloading:

yarn run start
# or
gulp
# or
gulp dev

Arahkan ke http://localhost:1234/ atau URL External jika mengakses dari perangkat lain.

Temukan daftar lengkap tugas:

gulp -T
# or
gulp -T --tasks-depth 0

Membangun produksi

Atur NODE_ENV ke production sehingga tugas tegukan menghasilkan kode akhir, yaitu file minifikasi, dan nonaktifkan pembuatan Sourcemap.

yarn run build
# or
gulp build --production

Setel NODE_ENV ke production secara manual tergantung pada OS Anda:

Linux/Mac OS:

NODE_ENV=production
gulp build

(atau inline NODE_ENV=production gulp build )

Windows PowerShell:

 $ env: NODE_ENV = " production "
gulp build

Baris Perintah Windows Legacy:

 set NODE_ENV = production
gulp build

Menyebarkan ke halaman GitHub

Untuk secara otomatis menggunakan proyek Anda ke halaman GitHub dan membuatnya tersedia di https://[your-username].github.io/[your-project-name] Gunakan:

yarn run deploy
# or
gulp build --production && gulp deploy

Publikasikan rilis ke GitHub

Untuk menerbitkan rilis ke Github Use:

yarn run release
# or
gulp release

LISENSI

Proyek ini dilisensikan di bawah lisensi MIT