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

ct-build-process

v5.4.14

Published

That's a set of configs and scripts built on top of `gulp` and `webpack` that help us deliver the awesome [Blocksy](http://creativethemes.com/blocksy) theme.

Downloads

333

Readme

Synopsis

That's a set of configs and scripts built on top of gulp and webpack that help us deliver the awesome Blocksy theme.

Code Example

Example gulpfile.js

const gulp = require('gulp')
const buildProcess = require('ct-build-process')

const data = require('./package.json')

var options = {
	entries: [
		{
			entry: './static/js/main.js',
			output: {
				path: './static/bundle/',
			},
		},
	],

	sassFiles: [
		{
			input: 'static/sass/style.scss',
			output: 'static/bundle',
			header: buildProcess.headerFor(false, data),
		},
	],

	browserSyncEnabled: true,

	sassWatch: ['assets/*/sass/**/*.scss'],

	toClean: ['static/bundle/'],
}

buildProcess.registerTasks(gulp, options)

Motivation

We wanted a clean way of building assets in a consistent manner across many repositories. That's the best thing we were able to come up with.

Installation

npm install --save-dev ct-build-process

Then build your own gulpfile.js on top of our module. Read the code if you need more details about the various config flags we have here.

API Reference

Every task here respects NODE_ENV=production in its own way. Minification, source maps, watching - all of this is present just in development.

There are two types of packages:

  1. wordpress_theme
  2. unyson_extension

Webpack tasks

  • gulp webpack - one time build. Doesn't watch if you set NODE_ENV=production

SASS tasks

  • gulp sass - one time build
  • gulp sass:watch - gulp sass with watcher

Bump version

Some tasks that will look at your package type and replace the current version with the bumped one. Very convenient.

  1. wordpress_theme - will look in: bower.json, package.json, style.css
  2. unyson_extension - will look in package.json and manifest.php
  • gulp bump:major
  • gulp bump:minor
  • gulp bump:patch or gulp bump

Uses node-semver.

Create build

There are some specific tasks for creating and publishing new releases of WordPress themes and Unyson extensions. This tasks will respect options.packageType option.

The build:create_release tasks depends strongly on github-release package. You should go ahead and install it and make it available in your $PATH variable, otherwise you won't be able to benefit from this task. Also, GITHUB_TOKEN should be exported by your shell login script (like bashrc or zshrc).

export GITHUB_TOKEN=YOUR_GITHUB_TOKEN
  • gulp build:remove_tmp - will remove build_tmp directory in your package

  • gulp build:copy_files - will copy files to your build dir, with respect of your .gitignore.

  • gulp build:delete_files_from_build - delete options.filesToDeleteFromBuild

  • gulp build:prepare_production_zip

  • gulp build - a combination of the four above

  • gulp build:create_release

  • gulp build:publish - a combination of build and build:create_release

Other tasks

  • gulp clean - will clean all the files. Respects options.toClean also
  • gulp build - gulp clean; gulp webpack; gulp sass
  • gulp dev - gulp build; gulp sass:watch
  • NODE_ENV=production gulp build - reliable way of building assets for production
  • NODE_ENV_GETTEXT=true gulp build - build & extract I18N strings

Stripe Code

  • gulp build:strip_code - Will stripe code that's between a pair of comments matched by regex. You have to specify a list of files to look into. Comments and list of files is configurable.

Options

  • packageType - unyson_extension | wordpress_theme

  • currentVersion - current package version used by gulp bump

  • entries - Multiple entries for webpack-multi-compiler. They have some syntactic sugar like

  • webpackIncludePaths

  • webpackExternals

  • webpackResolveAliases

  • webpackPlugins

  • webpackAdditionalModules

  • sassFiles - array of objects that specify input and output for sass compiler

  • sassIncludePaths

  • browserSyncEnabled

  • browserSyncInitOptions

  • watchFilesAndReload - list of files for browser sync - will cause browser to reload when any of them is changed at the fs level

  • toClean - list of files for gulp clean

  • stripCodeStartComment

  • stripCodeEndComment

  • filesToStripCodeFrom - gulp build:strip_code stuff

License

MIT