Nightly Pocket Measurement

    tinypng-plugin-webpack-full-featured

    1.2.2 • Public • Published

    Tinypng Plugin for Webpack [Full Featured]

    npm js-standard-style build status Coverage Status

    This is a simple plugin that uses Tinypng to compress images in your project.

    Install

    npm install tinypng-plugin-webpack-full-featured

    Example Usage

    const TinypngPlugin = require('tinypng-plugin-webpack-full-featured');
     
    module.exports = {
        plugins: [
            new TinypngPlugin({
                from: path.resolve(__dirname, '../static/images'),
                extentions: ['png', 'jpeg', 'jpg'],
                silent: false,
                cache: true,
            }),
        ],
    };

    Working with copy-webpack-plugin:

    module.exports = {
        plugins: [
            new TinypngPlugin({
                from: path.resolve(__dirname, '../static/images'),
                extentions: ['png', 'jpeg', 'jpg'],
                silent: false,
                cache: true,
            }),
            new CopyWebpackPlugin([
                {
                    from: path.resolve(__dirname, '../static'),
                    to: path.resolve(__dirname, '../dist/static'),
                    ignore: ['.*'],
                },
            ]),
        ],
    };

    Note the order of the plugins matters. If you want to compress before, the from option should be the original path. But if you want it after, this from option should be the destination path.

    API

    new TinypngPlugin(options)

    options.disable

    type: Boolean default: false

    If we are not in production mode, we may not want to compress images.

    module.exports = {
        plugins: [
            new TinypngPlugin({
                from: path.resolve(__dirname, '../static/images'),
                extentions: ['png', 'jpeg', 'jpg'],
                silent: false,
                cache: true,
                disable: process.env.NODE_ENV !== 'production',
            }),
        ],
    };

    options.from (required)

    type: String default: {your project}

    The directory to compress images. Currently, we only dig 2 levels, which means {your project}/**.png and {your project}/**/**.png.

    options.extentions

    type: Array default: ['png', 'jpeg', 'jpg']

    Passes image type. Types like .gif or .svg is not supported.

    options.silent

    type: Boolean default: false

    Whether we show compressing result or not.

    options.cache

    type: Boolean default: true

    We use filepath and size to distinct images status. If we set it to false, images will always be compressed.

    options.cacheLocation

    type: String default: {your project}/node_modules/tinypng-plugin-webpack-full-featured/dict

    Location we save cache. If we set it to node_modules, team members would compress images again and again. So it is recommended that we set it to somewhere git included.

    FAQ

    Why? I was suprised that there weren't any Tinypng plugins for webpack which fit my request, so I made one!

    Why not use tinypng-webpack-plugin? Because the images need to preceed is not in webpack assets. And it is quite slow.

    Why not use tinypng-loader? Because it is lack of silence option and it cannot proceed images not in webpack assets as well.

    Can you add this new feature? Sure. If the feature make sense, I would add it. And please understand that I need to keep it simple, so not all feature would be proved.

    Inspiration

    Contributing

    • The code is written in ES6 using Javascript Standard Style.
    • Please have PRs be single-purpose and try to stick to the coding style that the plugin uses.
    • Keep new features easily testable.
    • Documentation PRs are more than welcome! I'm really bad at words and things, so any improvement there is always a good thing!

    License

    MIT Copyright (c) Joan Qin

    Install

    npm i tinypng-plugin-webpack-full-featured

    DownloadsWeekly Downloads

    6

    Version

    1.2.2

    License

    MIT

    Unpacked Size

    5.92 MB

    Total Files

    42

    Last publish

    Collaborators

    • jojochilly