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

gulp-helpers

v6.4.0

Published

A set of tasks and helpers for gulp

Downloads

173

Readme

npm version npm dependencies Build Status Gitter

gulp-helpers

A set of tasks and helpers for gulp 3.x

When gulp 4 is released, gulp-helpers will be rewritten to support custom registries.

Don't repeat yourself (DRY) gulpfiles

When writing gulpfiles, I often find myself copying entire blocks of code between files. I make mistakes and forget things. I improve one gulpfile and have a hard time upgrading old gulpfiles in other projects.

In other words, gulpfiles are not DRY between projects.

One way to solve this issue is by moving common task functionality into a set of external tasks that can be re-used across projects. The 'Split tasks across multiple files' recipe breaks up your gulpfile into little files. The problem is that it doesn't solve the larger DRY issues that I've run into.

Example less task

I might have a task to process my less CSS files. It is many lines tall and does a whole bunch of stuff. I've forgotten half of what it does (wtf is plumber())? It also necessitates adding devDependencies to my projects package.json and all the require lines at the top of the gulpfile. What a mess.

var gulp = require('gulp');
var plumber = require('gulp-plumber');
var less = require('gulp-less');
var cache = require('gulp-cached');
var changed = require('gulp-changed');
var sourcemaps = require('gulp-sourcemaps');
var lessPluginCleanCSS = require('less-plugin-clean-css');
var cleancss = new lessPluginCleanCSS({advanced: true});
var browserSync = require('browser-sync');

gulp.task('less', function () {
  return gulp.src(path.less)
    .pipe(cache('less'))
    .pipe(plumber())
    .pipe(changed(path.output, {extension: '.css'}))
    .pipe(sourcemaps.init())
    .pipe(less({
      plugins: [ cleancss ]
    }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(path.output))
    .pipe(browserSync.reload({ stream: true }));
});

gulp-helpers to the rescue

gulp-helpers reduces the less CSS task down to a single line in your gulpfile.

npm install gulp-helpers --save-dev
var gulp = require('gulp');
var gulpHelpers = require('gulp-helpers');
var taskMaker = gulpHelpers.taskMaker(gulp);

taskMaker.defineTask('less', { src: 'src/**/*.less', dest: 'dist' });

A more complete example that uses babel to transpile our code on save looks like this:

var gulp = require('gulp');
var gulpHelpers = require('gulp-helpers');
var taskMaker = gulpHelpers.taskMaker(gulp);

var path = {
	source: 'src/**/*.js',
	output: 'dist',
	watch: 'src/**'
};

taskMaker.defineTask('clean', {taskName: 'clean', src: path.output});
taskMaker.defineTask('babel', {taskName: 'babel', src: path.source, dest: path.output, 
				compilerOptions: {modules: 'system'}, watchTask: true});

gulp.task('default', ['clean', 'babel', 'watch-babel']);
  • There is little code and a lot of configuration. It makes setting up new gulpfiles trivial because now I don't have to re-learn gulp and all of its plugins every time I want to start a new project.

  • Automatically generate gulp.watch tasks by passing watchTask: true.

  • The package.json devDependencies section is so clean! Just a dependency on gulp and gulp-helpers.

  • Take advantage of bug fixes and improvements in gulp-helpers automatically and more importantly, across projects.

  • When the next version of gulp is available, this gulpfile will work without changes.

Examples

API

defineTask

taskMaker.defineTask(NAME_OF_GULPHELPERS_TASK, OPTIONS);

The named gulp-helper task will be loaded via require and you pass options into it. There is a whole bunch of tasks already defined, take a look at the ones you need in order to figure out the options you can pass in. I've tried to keep the naming pretty consistent between tasks. For example, src and dest will always map to the arguments to gulp.src() and gulp.dest().

There are a couple options which are default across all tasks:

  • taskName - The name of the gulp.task() task, defaults to the first argument of defineTask (String)
  • taskDeps - Passed into gulp.task() as the dependent tasks (Array)
  • chmod - For tasks which output files (such as sass, copy, concat...), since version 2.0.15, it is capable of setting read/write permissions (Number or Object). See gulp-chmod for more details.

situation

export SITUATION=production
var situation = gulpHelpers.situation();
if (situation.isProduction()) {
  // do production stuff
} else if (situation.isDevelopment()) {
  // do development stuff
}

This returns a Situation object, which is good for determining if we are running in development, sandbox, demo or production mode based on the SITUATION environment variable.

Sandbox and Production mode generally means that the project is bundled and minified and browserSync is running without reloading turned on.

This makes it easy to build gulpfiles which can be deployed to PaaS solutions like Heroku, yet still allow you to test your app in production mode locally.

framework

var _ = gulpHelpers.framework('lodash'); // '_' also works
var runSequence = gulpHelpers.framework('run-sequence');

The idea behind framework is that the dependency chain is in gulp-helpers instead of being in your own project's package.json.

Development

gulp-helpers is written in ES6 and transpiled to ES5 using babel. This allows us to take advantage of ES6 features while maintaining backwards compatibility. In my research, it seems like this is one of the first public NPM projects to do this. Fun!

Pull requests to add more tasks or improve on existing ones are welcome. I'd like this to become a useful repository for lots of projects.