gulp-registry-mrhenry
v1.2.0
Published
Mr. Henry's Gulp workflow
Downloads
2
Readme
What is this?
This registry holds Gulp 4 tasks for a Progressive Enhancement-based front-end workflow with the 2018 tools and standards in mind. It is heavily opinionated by the @mrhenry development team.
Installation
First of all, install these third party dependencies.
brew install graphicsmagick
Install the registry through NPM or Yarn:
yarn add gulp gulp-registry-mrhenry --dev
Use it as your Gulp registry in your gulpfile.js
const gulp = require('gulp');
const MrHenry = require('gulp-registry-mrhenry');
const config = require('./gulp/config');
const tasks = new MrHenry(config);
gulp.registry(tasks);
Find an example config file in our Gulp Starter repository.
Usage
Run a one-time build: gulp
Start the watcher gulp watch
Adding custom tasks
Extending the registry with custom tasks is easy:
tasks.set('my-task', myTask());
You can pass two options:
tasks.set('my-task', myTask(), { default: true, watch: 'glob' })
default
(default: true) - should run whengulp
orgulp default
is runwatch
(mixed: string or array of strings) - glob (or array of globs) to watch for changes whengulp watch
is run
Docs
CSS
CSS is being transpiled some PostCSS plugins to a final single CSS files. The processors that the source files are run through are:
postcss-import inlines all @import
statements into a single CSS file.
cssnext provides CSS4 compliance & runs Autoprefixer. Find the docs here.
postcss-nested enables &
behaviour and nested @media
-queries much like SCSS.
A .min.css
version of every .css
file in the source path also gets built (powered by cssnano
).
Favicons
Add a favicon.png
512×512 and a no color, single path, 16×16 favicon.svg
to your gulp/assets/favicons
folder and a variety of sizes for all modern devices will be generated.
There are two options that you can add to config.js
:
backgroundColor
: specify the background color for the non-transparent iconspadding
: the resize ratio to render some padding (a number between 0 and 1)
Having trouble running this task? Make sure graphicsmagick
is installed on your computer.
Fonts
Use only in case of self-hosted fonts.
Fonts are not being modified by the gulp fonts
task. They simply are being copied over from the source path to the destination path.
Ask @pieterbeulque for loading approach, consider Web Font Loader.
Icons
Using an external SVG with <symbol>
definitions. External SVG means no Internet Explorer support. If you want to support icons in IE too, include svg4everybody in your primary scripts.
Images
Images are run through gulp-imagemin
, which is capable of optimizing GIF, JPG, PNG & SVG assets. Try to use SVG as much as possible, and always question if inlining the SVG is not a better option.
Javascript
We are trying out a progressive enhancement approach through Custom Elements v1. Benefits include a 100% compatibility with the resilient approach we base a lot of our stuff on (if the browser doesn't support it, it behaves like a simple div), a clear syntax & an upcoming standard (so future-proof) without locking into any framework.
Running gulp javascript
triggers both an ES6 and Babel task.
The gulp javascript:es6
task uses Rollup to bundle all import
statements and tree-shake dead code.
The gulp javascript:babel
task runs Browserify to create an ES5 compatible bundle with module management etc.
Both tasks also include a minified file (through babel-minify
for the ES6 bundle & uglify
for the ES5 bundle).
This leaves us with four files: app.es6.js
, app.es6.min.js
, app.js
& app.min.js
.
In our website we can do some easy mustard-cutting on Custom Elements support to load the ES6 bundle, or choose for the neccessary polyfills and the ES5 bundle.
<script>
// Mustard Cutting. If we support native Custom Elements (v1)
// we assume decent ES2015 support & load in the Rollup bundle
// Else, we load a fallback & run the transpiled bundle from Babel
if ('customElements' in window) {
document.write('<script src="assets/js/app.es6.js" defer><\/script>');
} else {
if (!('MutationObserver' in window)) {
// Don't even try to polyfill
return;
}
document.write('<script src="assets/js/custom-elements.js" defer><\/script>');
document.write('<script src="assets/js/app.js" defer><\/script>');
}
</script>
This is mandatory because using the Custom Elements native implementation (in e.g. Chrome) needs to be done in an ES6 way (using new
), which is impossible with the ES5 bundle (that does something like FooBar.prototype.constructor.call(this)
).
Roadmap
Fonts
- Figure out an easy way to split a font in a base64-encoded basic subset (a-zA-Z0-9) & full Western font (Chinese plugin for 'reference')
Troubleshooting
Upgrading to Gulp 4 broke things for me!
Re-install Gulp globally, your older projects should still work (using the node_modules installed Gulp 3)
npm rm -g gulp
rm /usr/local/share/man/man1/gulp.1
npm i -g gulp-cli
Node & Yarn setup
When you install Yarn through Homebrew, it also pulls in the latest Node.js version (through Homebrew). This causes some issues when you already run a version of Node.js that has not been installed with Homebrew.
The easiest way I made this work was follow these instructions to uninstall Node.js & then simply run $ brew install yarn
. It sets up everything for you. You will still have to install Gulp globally either through Yarn or NPM.
Other questions
Get in touch with @pieterbeulque.