npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

proxma

v0.2.10

Published

A little CLI that uses gulp and browsersync to inject files on to a proxied site with live reloading and style injecting

Downloads

6

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Maintainers

corintycorinty

Keywords

clilocal-devproxygulpscss

Readme

Proxma

A tool that helps making tying new things on a page easier. This CLI uses gulp to process scss, css, and js files. At the moment there is no way to customize the gulpfile (should be coming later). Once the files are processed and put into a dist folder the CLI starts up an instance of BrowserSync and uses that to proxy the site you want to make local non permanent adjustments.

Note: While this tool makes use of the words proxy and inject. Nothing is actually sent back to the sites server. Everything is done localy. Think overrides in chrome or making adjustments to the css in inspector.

Install/Usage

npm i -d proxma

or

npm i -g proxma
  1. Once the package has been installed locally or globally you can run it
    proxma
  2. On first run it will look for the .proxmarc settings file. If it doesn't find one it will set one up for you as well as some starting folders.
  3. If the settings file is in place just run the same proxma command and it will run gulp and then start the local server.
  4. Everytime you add new files to src the proxma will restart and load your new files. There is no need to refresh the browser becuase BrowserSync will reconnect.

Note: In order for things to work you must stay on the localhost proxy sometimes when you click a link that is not relative it will take you to the real domain and not the proxied one. The none proxied page will not have the files added.

Adding Files

Proxma looks for CSS, SCSS, and JS files in the src folder. It will run gulp on those files and put them in the dist folder.

.proxmarc Options

  • proxy: The url string of the page you want to proxy
  • replaceFiles: An array of strings of files that you want to replace. They must be relative to the domain that you are proxing and they can't include the domain itself.
    • Example: "/YouTubeSlider/CSS/thumb-carousel.css"
  • externalFiles: WIP - Ability to files from a CDN or from another local server
  • injectAtBottom: A boolean that controls where the browsersync scripts get added and where the files get added. Default: true