Bring up a terminal and type node --version.
Node should respond with a version at or above 0.10.x.
If you require Node, go to nodejs.org and click on the big green Install button.
Bring up a terminal and type gulp --version.
If Gulp is installed it should return a version number at or above 3.9.x.
If you need to install/upgrade Gulp, open up a terminal and type in the following:
$ npm install --global gulpThis will install Gulp globally. Depending on your user account, you may need to configure your system to install packages globally without administrative privileges.
Next, install the local dependencies the repo requires:
$ npm install$ gulp serveThis outputs an IP address you can use to locally test and another that can be used on devices
connected to your network.
serve does not use service worker
caching, so your site will stop being available when the web server stops running.
$ gulpBuild and optimize the current project, ready for deployment.
$ gulp serve:distIt is important to note a difference between the serve and serve:dist tasks.
serveuses a no-opservice-worker.jsand cannot run offline.serve:distuses theworkbox-generated output and can run offline.
The serve task runs on port 3000 and serve:dist runs on port 3001.
The main purpose is to ensure that different service workers will not impact each other's environment.
Using the workbox-generated output makes it very difficult to quickly test local changes which is not ideal for a development server environment.
This repo supports generating a PDF of the book by doing a local checkout, installing our dependencies and then running:
$ gulp generate-pdfThis generates a PDF using the Chrome team's Puppeteer project.
If doing this involves too many steps and you would like to just use a browser's "Print to PDF" feature, that is also supported. First, load up the book on https://images.guide, scroll down to ensure all images are lazy-loaded in and then safely print to PDF as per any other web page.
This repo uses a very simplistic templating setup. app/partials/book.md is converted from markdown into HTML and
injected into a primary book template in app/index.html. I use gulp-md-template to achieve this.
The vast majority of images in the book are hosted on my Cloudinary account. If a PR wishes to improve or add any
additional graphics, feel free to assume you can use app/images/ to temporarily add them directly. I will take care
of appending commits that host any graphics back to Cloudinary as needed. Alternatively, just ping me on a PR and I can
usually get back with a Cloudinary-hosted URL for the graphic you want to add.
The initial version of this book takes a very barebones approach to syntax highlighting. That said, better highlighting using a lightweight library like Prism would be a welcome contribution to the project. We would want to load it in a way that doesn't impact the critical-path performance of the page.
I'd love your help improving this book. If interested in contributing a pull request, please:
- Make sure your PR has a valid title and description.
- Your PR updates only touch the parts of the repo it needs to. In most cases this will be
app/partials/book.md.
If updating an opinion or recommendation in the book, please help us by providing data to back the change. This helps equip us with tools to make the best call on such updates.
If interested in translating this book, please file an issue and we can chat. Translations may be something we can cater for as part of the existing repo or something better handled as a fork. By coordinating with us, we'll have the best chance to serve readers in a way that keeps all versions of the book as synchronized as possible.
The content in this book is being ported over to Web Fundamentals. We'll be turning it into a new chapter on automating image optimization, splitting the content here into different pages. In the mean time, we're going to keep Essential Image Optimization a one-page format.
Except as otherwise noted, the content of this book is licensed under the Creative Commons Attribution-NonCommercial-NoDerivs 2.0 Generic (CC BY-NC-ND 2.0) license, and code samples are licensed under the Apache 2.0 License. Copyright Google, 2017.