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

mj-gulp-workflow

v2.3.4

Published

A fork of https://github.com/zephir/zephir-gulp-workflow with added sourcemaps and other things.

Downloads

46

Readme

A fork of zephir/zephir-gulp-workflow with added sourcemaps and other things.

differences to zephir-gulp-workflow:

changed functionality

  • sourcemaps
  • broswerify
  • pngquant
  • gulp cleanup for file removal (sourcemaps)
  • gulp-notify
  • favicons
  • a lot of configuration has defaults
  • jsand es6 are the same task, but can have different configurations (e.g. babel or no-babel)

conventions

  • config files are located at the root of your package.json and are called gulp-config.js (not compileConfig.js as with zephir-gulp-workflow)
  • sourcemaps are enabled for dev env by default
  • pxToRem is removed
  • es6 via babel and browserify are enabled for a specific task and source folder per default (babel-preset-env + browserstring)
  • added imagemin options

Installation

  1. Create a package.json in your project >> npm init
  2. Install dependencies >> npm i --save-dev gulp mj-gulp-workflow
  3. Create a new gulpfile.js and add the content you find below
require('mj-gulp-workflow')(require('gulp'));

First run

run gulp to create a gulp-config.js, configure to taste.

Configuration

tasks in combinedTasks are run in sequence, so if you want parallel execution you would have to put them in another array inside combinedTasks, e.g.:

combinedTasks: {
	dist: ["es6", "js", "images", "svg", "css", "copy", "clean"], // runs sequential
	default: [["dist", "watch"]], // runs parallel
},

a lot of configurable stuff has defaults, that can be overwritten. These defaults are not in the gulp-config to keep it clean. They can still be readded and overwrite the defaults. The defaults are:

css: {
	scss: {
		config: {
			outputStyle: 'compressed' 				}
	},

	sourcemaps: {
		enabled: 'dev'
	},

	autoprefixer: {
		enabled: true,
		config: {
			browserlist: ['> 0.1%']
		}
	},

	cleanCss: {
		enabled: true,
		config: {
			compatibility: 'ie8'
		}
	}
},
js: {
	sourcemaps: {
		enabled: 'dev'
	},
	browserify: {
		enabled: true
	},

	babeljs: {
		enabled: true,
		config: {
			minified: true,
			presets: [
				[
					'@babel/preset-env',
					{
						targets: {
							browsers: ['> 0.1%']
						}
					}
				]
			]
		}
	}
},
images: {
	imagemin: {
		enabled: true,
		config: [
			imagemin.gifsicle(),
			imagemin.jpegtran({ progressive: true }),
			imagemin.optipng({ optimizationLevel: 5 }),
			imagemin.svgo({ plugins: [{ removeViewBox: true }] })
		],
		additional: false
	}
},

svg: {
	svgmin: {
		enabled: true,
		config: {}
	}
}

The favicons-task has no defaults. Configuration looks like this:

favicons: {
	enabled: true,
	themeColor: '#cafe23',
	iconsPath: './',
	appName: 'FoobarBaz'
},

Usage

Run gulp dist --env dist for distribution, otherwise just gulp.

Dev

Dev server: npm run testd

Build with npm run babel-dist

Run tests witch npm test

Run test http server with npm run testd => http://localhost:8080, then look at the console.


@todo:

  • fix sourcemaps using babel and browserify
  • reintroduce a way to mark gulp-config.js files as outdated and show instructional messages after an update
  • patch vulnerabilities brought by gulp-imagemin, rfg-api and cli-real-favicon by updating or replacing these dependencies

changelog

2.3.4

  • Updated dependencies

2.3.1 - 2.3.3

  • Updated dependencies
  • npm audit fix

2.2.1

  • created defaults for a lot of configuration to shrink down gulp-config.js

2.1.4

  • Updated dependencies

2.1.2–2.1.3

  • Updated dependencies + fix pngquant – thank you @hoffmannclaus!

2.1.0–2.1.1

  • Added jsConcattask for easier vendor file concatenation

2.0.7–2.0.8

  • Dependency updates, vulnerabilities and a small improvement to gif optimization

2.0.6

  • Dependency updates, dependency updates and more dependency updates!
  • As of now, everything is up to date and npm audit "found 0 vulnerabilities" 🎉

2.0.4–2.0.5

  • add gulp-touch to modify dist files' mtime. See this issue over at gulpjs/gulp.

2.0.3

  • fix an issue with non-existing source files and gulp.src()
  • improved testing

2.0.2

  • Port the watch task to gulp 4 *Whoopsie Daisies*

2.0.0–2.0.1

  • Updated to gulp 4
  • Remove unnecessary dependencies
  • Patch many vulnerabilities

1.6.0

  • update and clean up dependencies, including some major versions

1.5.0

  • updated dependencies including major versions

1.4.2

  • Fix installation issues

1.4.0–1.4.1

  • Added favicon task using realfavicongenerator.net's CLI module

1.3.3

  • updated dependencies including major versions

1.3.2

  • updated dependencies

1.3.1

  • fixed bug that made gulp process crash on first run

1.3.0

  • move babel-transformation for es6 files to own source/task combo
  • cleanup task is now clean

1.2.5

  • improved task defaults, dev and dist as --env options, defaults to dev.
  • updated dependencies

1.2.4

  • remove config version check
  • fix cleanup task for paths outside gulp directory
  • fix babel when gulp task is in subdirectory
  • add browserify (optional)

1.2.3

  • add tests for copy and cleanup tasks
  • code refactoring
  • renamed compileConfig.js and defaultConfig.js
  • remove pxToRem task

1.2.2

  • merge changelog into README.md
  • fix default config

1.2.1

  • Fix run-sequence and cleanup task
  • Filter junk files in task inclusion by glob and remove output dir before running gulp test

1.2.0

  • added cleanup task for file removal (sourcemaps)
  • added gulp-notify for errors
  • replaced native gulp.watch with gulp-watch for better error handling

1.1.1

  • cleanup, refactoring and overall code quality

1.1.0

  • Moved testing to jest
  • Run tests with npm test (run gulp dist first!)