1. gulp-changed
Only pass through changed files
gulp-changed
Package: gulp-changed
Created by: sindresorhus
Last modified: Sun, 10 Dec 2023 13:46:18 GMT
Version: 5.0.2
License: MIT
Downloads: 187,525
Repository: https://github.com/sindresorhus/gulp-changed

Install

npm install gulp-changed
yarn add gulp-changed

gulp-changed

Only pass through changed files

No more wasting precious time on processing unchanged files.

By default it's only able to detect whether files in the stream changed. If you require something more advanced like knowing if imports/dependencies changed, create a custom comparator, or use another plugin.

Install

 npm install --save-dev gulp-changed

Usage

 import gulp from 'gulp';
import changed from 'gulp-changed';
import ngAnnotate from 'gulp-ng-annotate'; // Just as an example

const SOURCE = 'src/*.js';
const DESTINATION = 'dist';

exports.default = () => (
	gulp.src(SOURCE)
		.pipe(changed(DESTINATION))
		// `ngAnnotate` will only get the files that
		// changed since the last time it was run
		.pipe(ngAnnotate())
		.pipe(gulp.dest(DESTINATION))
);

API

changed(destination, options?)

destination

Type: string | Function

Destination directory. Same as you put into gulp.dest().

This is needed to be able to compare the current files with the destination files.

Can also be a function returning a destination directory path.

options

Type: object

cwd

Type: string
Default: process.cwd()

Working directory the folder is relative to.

extension

Type: string

Extension of the destination files.

Useful if it differs from the original, like in the example below:

 export const jade = () => (
	gulp.src('src/**/*.jade')
		.pipe(changed('app', {extension: '.html'}))
		.pipe(jade())
		.pipe(gulp.dest('app'))
);
hasChanged

Type: Function
Default: compareLastModifiedTime

Function that determines whether the source file is different from the destination file.

Built-in comparators

Named imports:

  • compareLastModifiedTime
  • compareContents
Example
 export const jade = () => (
	gulp.src('src/**/*.jade')
		.pipe(changed('app', {hasChanged: changed.compareContents}))
		.pipe(jade())
		.pipe(gulp.dest('app'))
);

You can also supply a custom comparator function which will receive the following arguments and should return Promise.

transformPath

Type: Function

Function to transform the path to the destination file. Should return the absolute path to the (renamed) destination file.

Useful if you rename your file later on, like in the below example:

 export const marked = () => (
	gulp.src('src/content/about.md')
		.pipe(changed('dist', {transformPath: newPath => path.join(path.dirname(newPath), path.basename(newPath, '.md'), 'index.html')}))
		.pipe(marked())
		.pipe(rename(newPath => path.join(path.dirname(newPath), path.basename(newPath, '.md'), 'index.html'))))
		.pipe(gulp.dest('dist'))
);

In-place change monitoring

If you're looking to process source files in-place without any build output (formatting, linting, etc), have a look at gulp-changed-in-place.

RELATED POST

10 Must-Know Windows Shortcuts That Will Save You Time

10 Must-Know Windows Shortcuts That Will Save You Time

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Navigating AWS Networking: Essential Hacks for Smooth Operation

Navigating AWS Networking: Essential Hacks for Smooth Operation

Achieving Stunning Visuals with Unity's Global Illumination

Achieving Stunning Visuals with Unity's Global Illumination

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code