frontend starter

Template Proyek

Karena pengembangan web tidak perlu menyebalkan.

Templat proyek adalah cara untuk membangun situs statis dengan cepat. Dengan satu perintah, bangun halaman statis menggunakan Webpack, Gulp, Stallebars.js, dan SCSS.

[ES6]

Fitur

• Instal proyek hanya dalam tiga perintah (lihat "Mengembangkan" di bawah).
• Gunakan stang. JS untuk menjaga HTML kami terorganisir ke dalam templat dan parsial.
• Gunakan SCS untuk menjaga CSS kami terorganisir menjadi komponen logis.
• Gunakan Browsersync untuk secara otomatis meluncurkan versi pengembangan situs web kami, memuat ulang halaman setiap kali kami mengubah HTML, dan menyuntikkan perubahan pada CSS, JavaScript, dan gambar dengan perlu dimuat ulang.
• Gunakan HTML Minifier, dan optimalkan masing -masing HTML, CSS, JavaScript, dan gambar kami.

Semua dengan satu perintah dari terminal:

yarn start

Pengaturan

npm install -g gulp  # May require `sudo` 

Berkembang

yarn install            # One time
gulp serve

Pengingat

Jika Anda ingin menggunakan repo ini untuk proyek Anda berikutnya, pastikan untuk membuat perubahan berikut:

1. Edit data.yml , mengisi metadata HTML yang terkait dengan situs Anda.
2. Edit package.json Menyediakan name , version , description , license , dan repository.url .
3. Hapus folder .git , sehingga Anda mulai dari sejarah komit baru.
4. Edit README.md ke preferensi Anda.

Perintah tegukan

Tinjauan perintah Gulp tersedia:

gulp build

Membangun situs ke direktori dist . Ini termasuk:

• SCSS, Sourcemaps dan Autoprefixing
• JS Uglifikasi
• Setang ke html

gulp build:optimized

Ini digunakan untuk mendistribusikan versi situs yang dioptimalkan (untuk penyebaran). Itu termasuk semuanya dari gulp build serta:

• Minifikasi SCSS
• CSS / JS Inline-Sourcing

gulp watch

Menonton perubahan dalam file lokal dan membangun kembali bagian -bagian dari situs yang diperlukan, ke dalam direktori dist .

gulp serve

Menjalankan gulp watch di latar belakang, dan menyajikan direktori dist di localhost:3000 dengan pemuatan ulang otomatis menggunakan Browsersync.

Struktur

├── webpack.config.dev.js   # Controls javascript and css bundling
├── Gulpfile.js             # Controls Gulp, used for building the website
├── README.md               # This file
├── data.yml                # Metadata associated with the site.
├── dist/                   # Gulp builds the static site into this directory
├── package.json            # Dependencies
└── src/                    # All source code
    ├── assets/ 
        ├── css/            # Stylesheets
        ├── font/           # Font files
        ├── img/            # Images and SVGs
        ├── js/             # Javascript libraries and scripts
    ├── views/     
        ├── partials/       # Handlebars HTML partials that are included / extended
        └── templates/      # Handlebars HTML files, one per page on the site.