Skip to content
This repository was archived by the owner on May 22, 2024. It is now read-only.

Commit ead69a3

Browse files
MarcusCemesMarcusCemes
authored
feat: add webpack loader (#14)
Adds an implementation of a webpack loader, supporting simple and manifest type exports.
1 parent 94958d2 commit ead69a3

17 files changed

+1147
-1
lines changed

‎packages/webpack-loader/CHANGELOG.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# Changelog
2+
3+
All notable changes to this project will be documented in this file.
4+
5+
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
6+
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
7+
8+
## [Unreleased]
9+
10+
## [1.0.0] - 2020-08-30
11+
12+
First release of the @rib/webpack package
13+
14+
### Added
15+
16+
- An implementation of a webpack loader for IPP
17+
- Supports simple exports and manifest exports

‎packages/webpack-loader/LICENSE

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2020 Marcus Cemes
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎packages/webpack-loader/README.md

Lines changed: 177 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,177 @@
1+
<br />
2+
<div align="center">
3+
4+
<a href="https://github.com/MarcusCemes/image-processing-pipeline">
5+
<img src="https://ipp.vercel.app/img/logo.svg" alt="Logo" width="80" height="80">
6+
</a>
7+
<h3 align="center">Image Processing Pipeline</h3>
8+
9+
<div align="center">
10+
<br />
11+
<span align="center">An image build orchestrator for the modern web</span>
12+
<br />
13+
<a href="https://ipp.vercel.app" align="center"><strong>Website »</strong></a>
14+
<br /><br />
15+
<span align="center">
16+
<a href="https://github.com/MarcusCemes/image-processing-pipeline/issues">Report Bug</a>
17+
·
18+
<a href="https://github.com/MarcusCemes/image-processing-pipeline/issues">Request Feature</a>
19+
</span>
20+
<br /><br />
21+
</div>
22+
23+
[![npm][badge-npm]][link-npm]&nbsp;&nbsp;
24+
[![Code coverage][badge-coverage]][link-coverage]&nbsp;&nbsp;
25+
[![Node.js][badge-node]][link-node]&nbsp;&nbsp;
26+
[![Typescript][badge-typescript]][link-typescript]&nbsp;&nbsp;
27+
![Make the web lighter][badge-lighter]
28+
29+
</div>
30+
31+
> **Image Processing Pipeline** is a platform-agnostic modular collection of packages that aims to glue together various image libraries into and configurable automated pipeline.
32+
33+
### Philosophy
34+
35+
Images make your websites pop, but they are also the largest asset that you serve to your client. Correctly optimising images provides a much better experience, by not wasting your visitors' bandwidth, battery and making the navigation of your website smoother.
36+
37+
At its highest level, Image Processing Pipeline is a command line tool that helps you **automate** your website's image build process in a **non-destructive** way, with **speed** and **quality** in mind. At a lower level, it is a modular set of functions that can be integrated into any existing backend service.
38+
39+
### How it works
40+
41+
Image Processing Pipeline is built on top of three key concepts:
42+
43+
#### 🌴 Pipeline
44+
45+
At the heart is a user-defined **pipeline**. A pipeline is a collection of **pipes** that can be assembled in any tree-like pattern, along with any additional options and an optional **save key** that will mark the pipe's output for export.
46+
47+
#### 🔨 Pipe
48+
49+
Pipes are **simple asynchronous** functions that take a **source** image and output any number of **formats**. Pipes can apply any transformation to the source image, such as resizing, compressing or converting the image.
50+
51+
#### 🔖 Metadata
52+
53+
Every image is accompanied by a **metadata** object, which is a collection of key-value pairs that describe the image. Pipes may modify an image's metadata object, which can later be used to customise the output filename or to create an image **manifest** file.
54+
55+
### Features
56+
57+
- ⚡ **Fast** - Uses the amazing libvips image processing library
58+
- 🔥 **Parallel** - Scales to any amount of available cores
59+
- 💎 **Lanczos3** - Quality-first image down-scaling algorithm
60+
- 📦 **Works out of the box** - Uses a sane default configuration
61+
- 🌍 **Universal** - Designed to works anywhere without lock-in
62+
- ✂️ **Cross-platform** - Tested on Windows, macOS and Linux
63+
- 😊 **Friendly** - an easy to use CLI experience
64+
65+
## Getting started
66+
67+
### Prerequisites
68+
69+
- Node.js v10.8 or higher
70+
- npm
71+
72+
### Installation
73+
74+
> It is recommended to install IPP as a dependency of your project, this is just an example to quickly try it out
75+
76+
To give IPP a go on the command line, you will need to install the CLI package:
77+
78+
```bash
79+
$ npm i -g @ipp/cli
80+
```
81+
82+
This will add IPP to your path. Find a folder of images, and give it a go:
83+
84+
```bash
85+
$ ipp -i folder/with/images -o output/folder
86+
```
87+
88+
### Configuration
89+
90+
In order to get the most out of IPP you need to set up a configuration file with all of your persistent values. This can be in your `package.json`, or in a file named `.ipprc`, `.ipprc.yml` or `.ipprc.json`.
91+
92+
Then all you need to do is run `ipp` from the terminal!
93+
94+
<sub>.ipprc.yml</sub>
95+
96+
```yaml
97+
# These will be the folders that will get processed,
98+
# relative to the current working directory
99+
input: folder/with/images
100+
output: folder/with/images
101+
102+
# Remove this part to disable manifest generation
103+
manifest:
104+
source:
105+
p: path
106+
x: "hash:8"
107+
format:
108+
w: width
109+
h: height
110+
f: format
111+
p: path
112+
x: "hash:8"
113+
114+
# Here is where you customise the pipeline
115+
# This is what the default pipeline looks like
116+
pipeline:
117+
- pipe: resize
118+
options:
119+
breakpoints:
120+
- name: sm
121+
resizeOptions:
122+
width: 480
123+
- name: md
124+
resizeOptions:
125+
width: 720
126+
- name: lg
127+
resizeOptions:
128+
width: 1920
129+
- name: xl
130+
resizeOptions:
131+
width: 3840
132+
save: "[name]-[breakpoint][ext]"
133+
then:
134+
- pipe: convert
135+
options:
136+
format: webp
137+
save: "[name]-[breakpoint][ext]"
138+
```
139+
140+
### Ready for more?
141+
142+
Check out the [website][link-website] for complete documentation on how to use Image Processing Pipeline.
143+
144+
## Contributing
145+
146+
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
147+
148+
1. Fork the Project
149+
2. Create your Feature Branch (`git checkout -b feat/AmazingFeature`)
150+
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
151+
4. Push to the Branch (`git push origin feat/AmazingFeature`)
152+
5. Open a Pull Request
153+
154+
## License
155+
156+
Distributed under the MIT License. See `LICENSE` for more information.
157+
158+
<div align="center">
159+
<br />
160+
<sub>Built with ❤︎ by Marcus Cemes</sub>
161+
</div>
162+
163+
<!-- BADGES -->
164+
165+
[badge-npm]: https://img.shields.io/badge/npm-CB3837.svg?style=for-the-badge&logo=npm
166+
[badge-node]: https://img.shields.io/badge/Node.js--339933.svg?style=for-the-badge&logo=node.js
167+
[badge-typescript]: https://img.shields.io/badge/Typescript--0074D9.svg?style=for-the-badge&logo=typescript
168+
[badge-lighter]: https://img.shields.io/badge/Make_the_web-lighter-7FDBFF.svg?style=for-the-badge
169+
[badge-coverage]: https://img.shields.io/codecov/c/github/MarcusCemes/image-processing-pipeline?style=for-the-badge
170+
171+
<!-- LINKS -->
172+
173+
[link-npm]: https://www.npmjs.com/org/ipp
174+
[link-node]: https://nodejs.org
175+
[link-typescript]: https://www.typescriptlang.org
176+
[link-coverage]: https://codecov.io/gh/MarcusCemes/image-processing-pipeline
177+
[link-website]: https://ipp.vercel.app

0 commit comments

Comments
 (0)