frontend starter

Projektvorlage

Weil die Webentwicklung kein Schmerz sein muss.

Die Projektvorlage ist der Weg, um statische Websites schnell zu erstellen. Erstellen Sie mit einem Befehl eine statische Seite mit Webpack, Gulp, Lenkers.js und SCSS.

[ES6]

Merkmale

• Installieren Sie das Projekt in nur drei Befehlen (siehe "Entwickeln" unten).
• Verwenden Sie Lenker, um unsere HTML in Vorlagen und Teilungen zu organisieren.
• Verwenden Sie SCSS, um unsere CSS in logischen Komponenten organisiert zu halten.
• Verwenden Sie BrowserSync, um eine Entwicklungsversion unserer Website automatisch zu starten, die Seite nach dem Ändern der HTML neu zu laden und Änderungen an CSS, JavaScript und Bilder mit dem Nachladen zu injizieren.
• Verwenden Sie den HTML -Minifier und optimieren Sie unsere HTML, CSS, JavaScript bzw. Bilder.

Alle mit einem Befehl aus dem Terminal:

yarn start

Aufstellen

npm install -g gulp  # May require `sudo` 

Entwicklung

yarn install            # One time
gulp serve

Erinnerungen

Wenn Sie dieses Repo für Ihr nächstes Projekt verwenden möchten, stellen Sie sicher, dass Sie die folgenden Änderungen vornehmen:

1. Bearbeiten Sie data.yml und füllen Sie die mit Ihrer Website zugeordneten HTML -Metadaten aus.
2. package.json bearbeiten.json angibt einen name , version , description , license und repository.url .
3. Entfernen Sie den Ordner .git , damit Sie von einer frischen Festschaffungsgeschichte beginnen.
4. Bearbeiten Sie README.md zu Ihrer Präferenz.

Gulp -Befehle

Ein Überblick über Gulp -Befehle verfügbar:

gulp build

Baut den Standort in das dist -Verzeichnis auf. Dies beinhaltet:

• SCSS, Sourcemaps und Autoprefixing
• JS Hässlichkeit
• Lenker zu HTML

gulp build:optimized

Dies wird zum Verteilen einer optimierten Version der Website (zur Bereitstellung) verwendet. Es enthält alles von gulp build sowie:

• SCSS -Minifikation
• CSS / JS Inline-Sourcing

gulp watch

Beobachten Sie Änderungen in lokalen Dateien und bauen Sie Teile der Website nach Bedarf in das dist -Verzeichnis um.

gulp serve

Fährt gulp watch im Hintergrund aus und dient dem dist -Verzeichnis bei localhost:3000 mit automatischem Nachladen mithilfe von 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.