• Stars
    star
    479
  • Rank 91,752 (Top 2 %)
  • Language
    JavaScript
  • Created over 11 years ago
  • Updated over 5 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Make ImageOptim, ImageAlpha and JPEGmini part of your automated build process

grunt-imageoptim

The companion Grunt plugin for ImageOptim-CLI, which automates batch optimisation of images with ImageOptim, ImageAlpha and JPEGmini for Mac.

NPM version NPM downloads Dependency Status Follow JamieMason on GitHub Follow fold_left on Twitter

🌩 Installation

npm install grunt-imageoptim --save-dev

🔗 Dependencies

Since this project automates three Mac Applications, you will need them to be installed on your machine for us to be able to reach them.

A local copy of ImageOptim-CLI will be installed, you won't need to install that separately.

⚖️ Configuration

As with all Grunt plugins, grunt-imageoptim is configured using a Gruntfile.js in the root of your project.

Grunt provide a short walkthrough of a sample Gruntfile which explains how they work, but the general structure is this;

module.exports = function(grunt) {
  grunt.initConfig({
    /* your grunt-imageoptim configuration goes here */
  });
  grunt.loadNpmTasks("grunt-imageoptim");
};

Use defaults

Here we want to optimise two directories using default options.

imageoptim: {
  myTask: {
    src: ["www/images", "css/images"];
  }
}

Override defaults

Here we want to optimise two directories using only ImageAlpha and ImageOptim, then close them once we're done.

imageoptim: {
  myTask: {
    options: {
      jpegMini: false,
      imageAlpha: true,
      quitAfter: true
    },
    src: ['www/images', 'css/images']
  }
}

Custom options for each task

Here we have a task for a folder of PNGs and another for JPGs. Since we use ImageAlpha to optimise PNGs but not JPGs and vice versa with JPEGmini, here we toggle their availability between the two tasks.

imageoptim: {
  myPngs: {
    options: {
      jpegMini: false,
      imageAlpha: true,
      quitAfter: true
    },
    src: ['img/png']
  },
  myJpgs: {
    options: {
      jpegMini: true,
      imageAlpha: false,
      quitAfter: true
    },
    src: ['img/jpg']
  }
}

Option inheritance

This example is equivalent to the custom options for each task example, except we're setting some base options then overriding those we want to change within each task.

imageoptim: {
  options: {
    quitAfter: true
  },
  allPngs: {
    options: {
      imageAlpha: true,
      jpegMini: false
    },
    src: ['img/png']
  },
  allJpgs: {
    options: {
      imageAlpha: false,
      jpegMini: true
    },
    src: ['img/jpg']
  }
}

⚖️ Configuration

All options can be either true or false and default to false.

  • quitAfter Whether to exit each application after we're finished optimising your images.
  • jpegMini Whether to process your images using a copy of JPEGmini.app installed on your Mac.
  • imageAlpha Whether to process your images using a copy of ImageAlpha.app installed on your Mac.

🙋🏾‍♀️ Getting Help

More Repositories

1

ImageOptim-CLI

Make optimisation of images part of your automated build process
TypeScript
3,452
star
2

syncpack

Consistent dependency versions in large JavaScript Monorepos.
TypeScript
1,426
star
3

shrinkpack

Fast, resilient, reproducible builds with npm install.
TypeScript
793
star
4

Jasmine-Matchers

Write Beautiful Specs with Custom Matchers for Jest and Jasmine
JavaScript
586
star
5

expect-more

Curried Type Testing library, and Test Matchers for Jest
TypeScript
172
star
6

astexplorer.app

An https://astexplorer.net wrapper which adds module bundling and hot reloading.
TypeScript
120
star
7

karma-benchmark

A Karma plugin to run Benchmark.js over multiple browsers with CI compatible output.
TypeScript
90
star
8

codemods

A collection of transforms for use with JSCodeshift
JavaScript
59
star
9

blurhash-to-css

Convert BlurHashes to CSS Objects using TypeScript, Rust, and WebAssembly.
TypeScript
56
star
10

eslint-plugin-prefer-arrow-functions

Auto-fix plain Functions into Arrow Functions, in all cases where conversion would result in the same behaviour
TypeScript
52
star
11

karma-jasmine-matchers

A Karma plugin to inject Jasmine-Matchers for Jasmine and Jest.
JavaScript
46
star
12

nextjs-typescript-tailwind-critical-css

Next.js 9.3 with TypeScript, tailwindcss, and inlined Critical CSS.
TypeScript
41
star
13

eslint-formatter-git-log

ESLint Formatter featuring Git Author, Date, and Hash
TypeScript
41
star
14

ts-import-types-cli

Autofix TypeScript types to be imported using `import type`
TypeScript
40
star
15

self-help

Interactive Q&A Guides for Web and the Command Line.
TypeScript
37
star
16

image-optimisation-tools-comparison

A Benchmarking Suite for popular Image Optimisation Tools
TypeScript
28
star
17

Unreadable

An intelligent/CSS-aware HTML Minifier and Optimizer
JavaScript
26
star
18

custom-linkedin-cv

LinkedIn profile JSON + AngularJS == Custom Résumé
CSS
23
star
19

add-matchers

Write useful test matchers compatible with Jest and Jasmine.
JavaScript
18
star
20

syncpack-github-action

A GitHub Action to synchronise monorepo dependency versions with syncpack.
14
star
21

karma-nested-reporter

Easy to read test output with nested describe and it blocks
JavaScript
14
star
22

devtools-extension-tab-colours

Adds colours to the tabs in Chrome DevTools.
CSS
11
star
23

glob-bus

249 byte event emitter / pubsub with namespaced wildcards.
TypeScript
10
star
24

phantomjs-test-starter

A boilerplate / starter template for testing PhantomJS ‘Applications’ with Jasmine, Grunt and Istanbul
JavaScript
8
star
25

eslint-plugin-move-files

Move and rename files while keeping imports up to date
TypeScript
8
star
26

logservable

git log as an observable stream of JSON
TypeScript
8
star
27

subclass.js

Inherit, extend, decorate, and override classes and instances.
JavaScript
7
star
28

Jasmine-Matchers-Snippets

Snippets for Jest & Jasmine Matchers.
6
star
29

react-xstate-pull-to-refresh

Created with CodeSandbox
TypeScript
6
star
30

giterator

`git log` as a JavaScript generator
TypeScript
5
star
31

grunt-rewrite

A Grunt plugin to edit & replace file contents.
JavaScript
5
star
32

conventional-recommended-version

Determine the semantic version number of your project
TypeScript
5
star
33

csslib

A customised fork of inuitcss which I use on most projects.
CSS
5
star
34

node-es6-starter

babel, code climate, commitizen, coveralls, easystatic, ghooks, istanbul, jasmine, rollup, travis, xo.
JavaScript
4
star
35

peach.js

A precompiled forEach, unrolled for faster runtime performance.
JavaScript
4
star
36

doei

Experiment: Remove unused CSS/JS using RUM Code Coverage
TypeScript
4
star
37

Tim

Node.js, Express & MongoDB app starter template with multi-language support, user registration and authentication
JavaScript
4
star
38

jest-fail-on-console-reporter

Disallow untested console output produced during tests
TypeScript
2
star
39

treeify

Format an indented text file in the style of the Linux tree command
JavaScript
2
star
40

valueless

Replace values with paths, for use in test fixtures
JavaScript
2
star
41

lastfm-to-itunes

JavaScript
2
star
42

generator-jekyll-inuit

A Jekyll Website with Inuit.css generator for Yeoman
CSS
2
star
43

shrinkpack-examples

Examples of monorepos using shrinkpack to install while offline.
2
star
44

get-time-between

Measure the amount of time during work hours between two dates
TypeScript
2
star
45

is-office-hours

Determine whether a given date is within office hours
TypeScript
2
star
46

Jasmine-Matchers-ES6-Snippets

ES6 Snippets for Jest & Jasmine Matchers.
2
star
47

next-optimized-head

Next.js `<Head/>` which orders elements to improve (perceived) page performance.
TypeScript
2
star
48

commit-release

Commit and tag a conventional changelog release
TypeScript
1
star
49

front-end-engineer-interview-exercise

How do other Developers approach interview exercises?
1
star
50

github-actions-temporary-repo

JavaScript
1
star