imagemin-app

├── .editorconfig ├── .gitattributes ├── .gitignore ├── .stylelintignore ├── .travis.yml ├── Makefile ├── index.css ├── index.html ├── index.js ├── license ├── main.js ├── media ├── atom.icns ├── icon.ai ├── icon.png ├── icon.svg └── screenshot.png ├── package-lock.json ├── package.json └── readme.md /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = tab 5 | end_of_line = lf 6 | charset = utf-8 7 | trim_trailing_whitespace = true 8 | insert_final_newline = true 9 | 10 | [*.yml] 11 | indent_style = space 12 | indent_size = 2 13 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto eol=lf 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | yarn.lock 3 | /build 4 | /components 5 | -------------------------------------------------------------------------------- /.stylelintignore: -------------------------------------------------------------------------------- 1 | /components 2 | /build 3 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - '10' 4 | -------------------------------------------------------------------------------- /Makefile: -------------------------------------------------------------------------------- 1 | clean-css = ./node_modules/.bin/cleancss 2 | duo = ./node_modules/.bin/duo 3 | myth = ./node_modules/.bin/myth 4 | uglify = ./node_modules/.bin/uglifyjs 5 | 6 | # 7 | # Default task 8 | # 9 | 10 | default: build 11 | 12 | # 13 | # Tasks 14 | # 15 | 16 | app: node_modules 17 | @$(MAKE) build 18 | @atom . 19 | 20 | # 21 | # Targets 22 | # 23 | 24 | build: node_modules index.html 25 | @mkdir -p build 26 | @$(MAKE) build/index.js 27 | @$(MAKE) build/index.css 28 | 29 | build/index.js: node_modules index.js 30 | @$(duo) index.js | $(uglify) > build/index.js 31 | 32 | build/index.css: node_modules index.css 33 | @$(duo) index.css | $(myth) | $(clean-css) > build/index.css 34 | 35 | node_modules: package.json 36 | @npm install 37 | @touch node_modules 38 | 39 | # 40 | # Phony targets 41 | # 42 | 43 | .PHONY: app 44 | -------------------------------------------------------------------------------- /index.css: -------------------------------------------------------------------------------- 1 | @import 'necolas/normalize.css:normalize.css'; 2 | @import 'suitcss/base:lib/base.css'; 3 | 4 | :root { 5 | --base-font: 16px/1.5 sans-serif; 6 | } 7 | 8 | html, 9 | body { 10 | height: 100%; 11 | } 12 | 13 | html { 14 | color: rgba(255, 255, 255, 0.8); 15 | background-image: linear-gradient(to bottom, #563d7c 0, #6f5499 100%); 16 | } 17 | 18 | #drop-anywhere { 19 | position: fixed; 20 | top: 0; 21 | right: 0; 22 | bottom: 0; 23 | left: 0; 24 | } 25 | 26 | #drop-anywhere::before { 27 | position: fixed; 28 | top: 50%; 29 | left: 50%; 30 | width: 250px; 31 | height: 250px; 32 | margin: -130px 0 0 -125px; 33 | border: 3px dashed rgba(255, 255, 255, 0.5); 34 | border-radius: 15px; 35 | transition: 0.25s ease-in-out; 36 | content: ''; 37 | } 38 | 39 | #drop-anywhere.show::before { 40 | border-color: rgba(255, 255, 255, 0.85); 41 | } 42 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | imagemin-app 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | /* global node */ 2 | 'use strict'; 3 | 4 | const drop = require('component/drop-anywhere'); 5 | 6 | const each = node('each-async'); 7 | const fs = node('fs'); 8 | const imagemin = node('imagemin'); 9 | const path = node('path'); 10 | const Spinner = require('component/spinner'); 11 | 12 | const imageminGifsicle = node('imagemin-gifsicle'); 13 | const imageminJpegtran = node('imagemin-jpegtran'); 14 | const imageminOptipng = node('imagemin-optipng'); 15 | const imageminPngquant = node('imagemin-pngquant'); 16 | const imageminSvgo = node('imagemin-svgo'); 17 | 18 | /** 19 | * Minify images 20 | * 21 | * @param {Object} file 22 | * @param {Function} cb 23 | * @api private 24 | */ 25 | 26 | function minify(file, cb) { 27 | fs.readFile(file.path, (err, buf) => { 28 | if (err) { 29 | cb(err); 30 | return; 31 | } 32 | imagemin([file.path], path.join(path.dirname(file.path), 'build'), { 33 | plugins: [ 34 | imageminGifsicle(), 35 | imageminJpegtran(), 36 | imageminOptipng(), 37 | imageminPngquant(), 38 | imageminSvgo() 39 | ] 40 | }).then(file => { 41 | cb(null, Object.assign(file, {original: buf})); 42 | }).catch(error => { 43 | cb(error); 44 | }); 45 | }); 46 | } 47 | 48 | /** 49 | * Create spinner 50 | * 51 | * @api private 52 | */ 53 | 54 | function spin() { 55 | let w = document.body.offsetWidth; 56 | let h = document.body.offsetHeight; 57 | const s = new Spinner() 58 | .size(w / 4) 59 | .light(); 60 | 61 | s.el.style.position = 'absolute'; 62 | s.el.style.top = `${(h / 2) - ((w / 4) / 2)}px`; 63 | s.el.style.left = `${(w / 2) - ((w / 4) / 2)}px`; 64 | 65 | spin.remove = () => { 66 | document.body.removeChild(s.el); 67 | }; 68 | 69 | window.addEventListener('resize', () => { 70 | w = document.body.offsetWidth; 71 | h = document.body.offsetHeight; 72 | }); 73 | 74 | document.body.appendChild(s.el); 75 | 76 | return s; 77 | } 78 | 79 | /** 80 | * Toggle display 81 | * 82 | * @param {Element} el 83 | * @api private 84 | */ 85 | 86 | function toggle(el) { 87 | el = document.querySelector(el); 88 | 89 | if (el.style.display === 'none') { 90 | el.style.display = 'block'; 91 | return; 92 | } 93 | 94 | el.style.display = 'none'; 95 | } 96 | 97 | /** 98 | * Run 99 | */ 100 | 101 | drop(e => { 102 | let files = []; 103 | 104 | toggle('#drop-anywhere'); 105 | spin(); 106 | 107 | each(e.items, (item, i, done) => { 108 | minify(item, (err, file) => { 109 | if (err) { 110 | done(err); 111 | return; 112 | } 113 | 114 | files.push(file); 115 | done(); 116 | }); 117 | }, err => { 118 | if (err) { 119 | console.error(err); 120 | return; 121 | } 122 | 123 | toggle('#drop-anywhere'); 124 | spin.remove(); 125 | 126 | files = []; 127 | }); 128 | }); 129 | -------------------------------------------------------------------------------- /license: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) Imagemin 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 10 | -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const {app, BrowserWindow} = require('electron'); 4 | 5 | /** 6 | * Keep a global reference of the window object, if you don't, the window will 7 | * be closed automatically when the javascript object is GCed 8 | */ 9 | 10 | let win = null; 11 | 12 | /** 13 | * Quit when all windows are closed 14 | */ 15 | 16 | app.on('window-all-closed', () => { 17 | if (process.platform !== 'darwin') { 18 | app.quit(); 19 | } 20 | }); 21 | 22 | /** 23 | * On ready 24 | */ 25 | 26 | app.on('ready', () => { 27 | win = new BrowserWindow({ 28 | icon: './media/icon.png' 29 | }); 30 | 31 | win.setSize(475, 400); 32 | win.center(); 33 | win.loadFile('index.html'); 34 | win.webContents.on('did-finish-load', () => { 35 | win.setTitle('Imagemin ' + app.getVersion()); 36 | }); 37 | // Win.toggleDevTools(); 38 | 39 | win.on('closed', () => { 40 | win = null; 41 | }); 42 | }); 43 | -------------------------------------------------------------------------------- /media/atom.icns: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imagemin/imagemin-app/d6cd407c216edf85ee456b6e71cdb7ac45bf9510/media/atom.icns -------------------------------------------------------------------------------- /media/icon.ai: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imagemin/imagemin-app/d6cd407c216edf85ee456b6e71cdb7ac45bf9510/media/icon.ai -------------------------------------------------------------------------------- /media/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imagemin/imagemin-app/d6cd407c216edf85ee456b6e71cdb7ac45bf9510/media/icon.png -------------------------------------------------------------------------------- /media/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /media/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imagemin/imagemin-app/d6cd407c216edf85ee456b6e71cdb7ac45bf9510/media/screenshot.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "imagemin-app", 3 | "private": true, 4 | "version": "0.1.0", 5 | "description": "Imagemin as an macOS, Linux, and Windows app", 6 | "scripts": { 7 | "start": "npm run app && electron .", 8 | "app": "npm run build", 9 | "lint": "xo && stylelint --fix '**/*.css'", 10 | "test": "npm run lint", 11 | "build-index-js": "duo index.js && terser build/index.js -o build/index.js", 12 | "build-index-css": "duo index.css && myth build/index.css build/index.css && cleancss build/index.css -o build/index.css", 13 | "build": "rimraf build && mkdir build && npm run build-index-js && npm run build-index-css", 14 | "node_modules": "npm install" 15 | }, 16 | "license": "MIT", 17 | "main": "main.js", 18 | "devDependencies": { 19 | "clean-css": "^4.2.1", 20 | "clean-css-cli": "^4.2.1", 21 | "duo": "^0.15.7", 22 | "each-async": "^1.1.1", 23 | "electron": "^4.0.0", 24 | "imagemin": "^6.0.0", 25 | "imagemin-gifsicle": "^6.0.1", 26 | "imagemin-jpegtran": "^6.0.0", 27 | "imagemin-optipng": "^6.0.0", 28 | "imagemin-pngquant": "^6.0.0", 29 | "imagemin-svgo": "^7.0.0", 30 | "myth6": "^1.5.0", 31 | "rimraf": "^2.6.2", 32 | "stylelint": "^9.9.0", 33 | "stylelint-config-standard": "^18.2.0", 34 | "stylelint-config-xo": "^0.12.0", 35 | "terser": "^3.13.1", 36 | "xo": "^0.23.0" 37 | }, 38 | "xo": { 39 | "envs": [ 40 | "node", 41 | "browser" 42 | ], 43 | "rules": { 44 | "import/no-unresolved": "off" 45 | } 46 | }, 47 | "stylelint": { 48 | "extends": "stylelint-config-xo" 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | #

2 | 3 | > [Imagemin](https://github.com/imagemin/imagemin) as an macOS, Linux, and Windows app 4 | 5 | 6 | ## Install 7 | 8 | Install using a binary: 9 | 10 | * [macOS binary](https://github.com/imagemin/imagemin-app/releases/download/0.1.0/imagemin-app-v0.1.0-darwin.zip) 11 | * [Linux binary](https://github.com/imagemin/imagemin-app/releases/download/0.1.0/imagemin-app-v0.1.0-linux.zip) 12 | * [Windows binary](https://github.com/imagemin/imagemin-app/releases/download/0.1.0/imagemin-app-v0.1.0-win32.zip) 13 | 14 | Or run it manually: 15 | 16 | ``` 17 | $ npm start 18 | ``` 19 | 20 | 21 | ## Related 22 | 23 | - [imagemin-cli](https://github.com/imagemin/imagemin-cli) 24 | - [gulp-imagemin](https://github.com/sindresorhus/gulp-imagemin) 25 | 26 | 27 | ## License 28 | 29 | MIT © [Imagemin](https://github.com/imagemin) 30 | --------------------------------------------------------------------------------