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

@the-events-calendar/product-taskmaster

v3.0.1

Published

This is a collection of The Events Calendar product Gulp tasks

Downloads

701

Readme

Product Taskmaster

This is a collection of The Events Calendar product Gulp tasks

Installing in a plugin

This repository is meant to be installed via npm install. To enable that in a repository, first ensure you are running node 16 and npm 7 (this is necessary to install peer dependencies). Then, run the following command:

npm install --save-dev @the-events-calendar/product-taskmaster@^3.0.0

or add the following to the package.json in the devDependencies section:

"product-taskmaster": "@the-events-calendar/product-taskmaster@^3.0.0",

Browserslist

Browserslist allows us to automatically prefix CSS and provide proper polyfills for the targeted browsers. Recent versions of Browserslist allow users to extend configurations by doing the following in the package.json:

"browserslist": [
	"extends @the-events-calendar/product-taskmaster/config/browserslist.config.js"
]

However, some projects may use older versions of Browserslist which do not allow extending configurations. In this case, a script to sync browserslist configurations can be used to pull the same configuration from Products Taskmaster into the project. You can sync the configurations by adding a script in the package.json:

"scripts": {
	...
	"prebuild": "node node_modules/@the-events-calendar/product-taskmaster/scripts/syncBrowserslistConfig.js",
	...
}

GlotPress

In order to leverage the GlotPress task, the following example info from the-events-calendar should be added into the package.json as well:

"_domainPath": "lang",
"_textDomain": "the-events-calendar",
"_glotPressUrl": "https://translate.wordpress.org",
"_glotPressSlug": "wp-plugins/the-events-calendar/stable",
"_glotPressFileFormat": "%textdomain%-%wp_locale%.%format%",
"_glotPressFormats": [
	"po",
	"mo"
],
"_glotPressFilter": {
	"translation_sets": false,
	"minimum_percentage": 30,
	"waiting_strings": false
},

Gulp tasks

Main tasks

These are the big tasks that you'll most likely be running.

default

The default task is what you get when you run gulp. It compresses the JS and CSS files using the compress-css and compress-js tasks.

gulp

package

This task is used to package our plugins and relies on the package-whitelist.json file containing data and GlotPress properties within package.json.

gulp package --branch <branch-you-want-to-package>

watch

This task watches for changes in CSS and JS files, compresses those files, and then communicates the files to livereload.

gulp watch

This command also takes a --preserve flag to pass the preserve option (see the documentation). By default, the preserve option is set to true. To set to false, do the following:

gulp watch --preserve false

Minor tasks

These tasks are run from within the main tasks, but they can be run on their own!

postcss

This task uses PostCSS to build the .pcss files into CSS files.

gulp postcss

The command also takes a --preserve flag to pass the preserve option (see the documentation). By default, the preserve option is set to true. To set to false, do the following:

gulp postcss --preserve false

compress-css

This task uses gulp-cssnano to compress CSS files and name the files with a .min.css extension.

gulp compress-css

compress-js

This task uses gulp-uglify to compress JS files and name the files with a .min.js extension.

gulp compress-js

glotpress

This task pulls language files from the provided GlotPress URLs in package.json and places them in the lang/ directory.

gulp glotpress

pull

This task pulls and submodule updates the repo using the branch provided by --branch.

gulp pull --branch <branch-you-want-to-pull>

zip

This task packages the files indicated by package-safelist.json into a zip file that it places one directory above the plugin's base directory.

Note: package-whitelist.json has been deprecated if you have one please rename it to package-safelist.json.

gulp zip

stylelint

This task runs stylelint on the pcss files using our stylelint configuration. In the root directory, add in the .stylelintrc file:

{
    "extends": "@the-events-calendar/product-taskmaster/config/stylelint"
}

To run stylelint, you'll need to provide a file path array in the package.json to tell gulp where to look. An example might look like:

"_filePath": {
	"stylelint": [
		"src/resources/postcss/**/*.pcss"
	]
}

eslint

This task runs ESLint on the JavaScript files using our ESLint configurations. Add an .eslintrc file in the working repository and extend one of the configurations. A relative path from the .eslintrc file is required as Product Taskmaster is not a standard ESLint configuration package:

{
    "extends": "./node_modules/@the-events-calendar/product-taskmaster/config/eslint.es6.js"
}

To run ESLint, you'll need to provide a file path array in the package.json to tell gulp where to look. An example might look like:

"_filePath": {
	"eslint": [
		"src/modules/**/*.js",
		"src/resources/**/*.js"
	]
}

If you are extending the eslint.es6.js or eslint.react.js configuration, you must have a babel.config.json file defined in the working repository, as ESLint uses the babel.config.json file to parse the code.

Jest

This task runs Jest on the JavaScript files using our Jest configurations. Add a jest.config.js file in the working repository and extend the jest configuration. Add a displayName and testMatch to tell Jest what to look for:

var sharedConfig = require( '@the-events-calendar/product-taskmaster/config/jest.config.js' );
var pkg = require( './package.json' );

module.exports = {
	...sharedConfig,
	displayName: 'common',
	testMatch: pkg._filePath.jest.map( ( path ) => `<rootDir>/${ path }` ),
};

Add file path array to the package.json to tell Jest what to test. An example might look like:

"_filePath": {
	"jest": [
		"src/modules/**/__tests__/**/*.js"
	]
}

The testMatch can be input manually without relying on package.json. This just keeps all file paths in one place.