You heard about Kirby and want to use it on your next project? You want to harness the power of Gulp? Then THIS is for you!
Here's my personal (thus opinionated) Gulp+Kirby boilerplate, starring:
Although it's good practice to set up an environment closely resembling your production server (eg Vagrant, Docker, MAMP / XAMPP or Valet), feel free to use PHP's built-in development server or have a quick glance with php -S localhost:4000 kirby/router.php
. If you want to integrate Gulp/Kirby StarterKit with a virtualized workflow, be sure to checkout Vagrant/Kirby or Docker/Kirby for a straightforward development experience.
Psst! Need the Kirby 2 version? Over here.
This boilerplate provides a solid starting point that you can build upon:
Workflow:
Table of Contents
In order to keep everything neat, each task resides in its own file under tasks/
.
Pre-installed Kirby plugins:
Make sure Node.js is installed on your system, then clone this repository and install its dependencies via NPM:
# Composer
composer create-project s1syphos/gulp-kirby-starter-kit your-project
# Git
git clone https://github.com/S1SYPHOS/Gulp-Kirby-Starter-Kit.git your-project
# Installing dependencies
cd your-project && npm install
Now just type npm start
and code away! If you want to build for production, use npm run build
.
Tweaking the asset pipeline is pretty easy, as config.js
comes with sensible defaults and extensive comments. Everything you need to know may be found there - otherwise open an issue and let me know!
By default, this boilerplate uses PHP's built-in server. If you are using a local development server (as recommended above), just set server.enable
to false
and replace the default browsersync:proxy
.
Rules for linting styles and scripts are excluded from this pattern and located in package.json
which provides a certain flexibility:
I prefer linting my files while editing them, which is supported by all major text editors such as GitHub's Atom, Microsoft's Visual Studio Code, Sublime Text (and even Adobe's Brackets) through plugins).
There are several ways to load the configuration object for both stylelint and ESLint. As for now, they reside inside package.json
.
For cache busting via Kirby's built-in helper functions css()
and js()
and bnomei's feature-rich fingerprint plugin (plus filename hash, see build/site/config/config.php
), just follow the next steps:
If you're using Apache as your webserver and you are using a custom .htaccess
(this should get you going) for improved capabilities, add the following lines right after RewriteBase
:
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.+)\.([0-9]{10})\.(js|css)$ $1.$3 [L]
If you're using NGINX as your webserver, add the following lines to your virtual host setup:
location /assets {
if (!-e $request_filename) {
rewrite "^/(.+)\.([0-9]{10})\.(js|css)$" /$1.$3 break;
}
}
A critical CSS approach can be achieved by simply replacing this PHP snippet ..
if (option('environment', 'development') === 'production') {
echo Bnomei\Fingerprint::css('/assets/styles/main.min.css', ['integrity' => true]);
} else {
echo css('assets/styles/main.css');
}
.. with this one:
if (option('environment', 'development') === 'production') {
// Critical
$criticalPath = '/assets/styles/critical.css';
$critical = (new Asset($kirby->root('assets') . $criticalPath))->read();
echo '<style>' . $critical . '</style>';
// Non-Critical
$cssPath = '/assets/styles/main.min.css';
echo Bnomei\Fingerprint::css($cssPath, [
'integrity' => true,
'media' => 'print',
'onload' => 'this.media="all"',
]);
echo '<noscript>' . Bnomei\Fingerprint::css($cssPath, ['integrity' => true]) . '</noscript>';
} else {
echo css('assets/styles/main.css');
}
When running npm run build
, this generated critical CSS, loads it first and then non-critical CSS asynchronously.
Note: If you are using CSP headers, see this issue for more information.
After generating favicons, insert this in your <head>
:
<!-- Favicons -->
<link rel="shortcut icon" href="<?= url('favicon.ico') ?>">
<?php snippet('favicons') ?>
If you already have font files (or at least one), that's great. Otherwise, there's FontSquirrel's webfont generator (including subsetting, file conversion, CSS generation and much more).
If Google Fonts are what you want, then this might be helpful.
After learning about webfont strategies, you might want to subset your fonts, but rather than doing it manually (uploading, configuring, downloading, ..), let the machine handle it for you: This boilerplate supports font subsetting via glyphhanger
when building for production. In order to use this feature, you have to install pyftsubset
via pip first:
pip install fonttools
This goes beautifully with preloading - simply insert this in your <head>
:
<!-- Fonts -->
<link rel="preload" href="/assets/fonts/my-font.subset.woff2" as="font" type="font/woff2" crossorigin>
For modern SVG icons, there are great sources out there, such as:
WIP
Note: Before publishing your project, be sure to check your .gitignore
file!
I'd like to thank everybody that's making great software - you people are awesome. Also I'm always thankful for feedback and bug reports :)
gulp-scss-starter �� Особенности именование классов по БЭМ используется БЭМ-структура используется препроцессор SCSS используется транспайлер Babel для поддержки современного JavaScript (ES6) в браузе
gulp-pug-starter �� Особенности именование классов по БЭМ используется БЭМ-структура используются препроцессоры Pug и SCSS используется транспайлер Babel для поддержки современного JavaScript (ES6) в
�� Gulp Webpack Starter Gulp Webpack Starter - fast and simple web development toolkit.It uses Gulp task runner and Webpack bundler.The starter perfectly fits building static HTML templatesor speeding
Universal React-Flux-Gulp Boilerplate We don't always choose universal React, Flux and Gulp – but when we do, we clone this. Core react react-router fluxible express Build tools gulp sass babel browse
WordPress Gulp and Webpack starter theme Under the hood ES6 for JavaScript (transpiling with Babel and linting with ESLint) SASS preprocessor for CSS with SASS Guidelines Bootstrap 5 as CSS framework
Kirby CMS 是一个易用、易安装和设置的非常灵活的 CMS 系统,无需数据库支持,使用文件系统存储。支持 Markdown 语法、模板和插件。 License: Free to try. $30 per website. Server Language: PHP Database: No. File-based CMS. Self-Hosted: Yes Support Plugins/Ex