Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Gulp pipe minimal function?

Tags:

node.js

gulp

What is smallest function that can be placed in a Gulp pipe and still work?

This doesn't work:

gulp.src('**')
  .pipe(function() {
    // what's the minimum that can go here and still be a functional pipe?
    // what needs to be returned? 
  });

Ideally this would be vanilla JS using only the foundational modules Gulp was built on; vinyl, through, etc.

like image 480
joemaller Avatar asked Dec 12 '14 05:12

joemaller


People also ask

How do plugins work in Gulp?

They can change the filename, metadata, or contents of every file that passes through the stream. Plugins from npm - using the "gulpplugin" and "gulpfriendly" keywords - can be browsed and searched on the plugin search page. Each plugin should only do a small amount of work, so you can connect them like building blocks.

What is the difference between SRC () and DEST () methods in Gulp?

The src () and dest () methods are exposed by gulp to interact with files on your computer. src () is given a glob to read from the file system and produces a Node stream. It locates all matching files and reads them into memory to pass through the stream.

How do I use gulp to match filepaths?

This API accepts a string of literal and/or wildcard characters, like *, **, or !, called a Glob to match filepaths, it also accepts a function which will be run anytime there is a change in the file path (s) specified. Edit you gulpfile to this, and run the gulp command.

How do I convert a gulp file to a CSS file?

Delete the scss file in you css folder. Import the gulp-sass module into your gulpfile and edit your transpileSassToCss. Your gulpfile should look like this Any sass you write in the sass folder will now be transpiled to css in the css folder after running the code.


2 Answers

Yes, it's 4 years later, but I thought I'd throw in my solution to this since I was looking for the same answer.

I wanted some simple, modular pipe functions that I could reuse in a few different tasks, without excess dependencies. This might not be an elegant solution, but it works:

const gulp = require('gulp');

var someFlag = true;

gulp.task('default', doTask);

function doTask(done) {
  let stream = gulp.src(['file.txt'])
  .pipe(/* some gulp plugin here */);

  if (someFlag) {
    stream = alterStream(stream);
  }

  return stream;
}

function alterStream(stream) {
  stream.pipe(/* another gulp plugin here */);
  return stream;
}

Instead of returning the stream first directly (return gulp.src(...)) I'm storing it in a variable, then altering it as needed with other pipes, and returning it last.

like image 152
cr0ybot Avatar answered Oct 17 '22 12:10

cr0ybot


The problem with your pipe is that you're dropping the files of your glob since you don't return them.

Using through2, you can do something like this:

const through = require('through2')

gulp.src('**')
  .pipe(through.obj((file, enc, cb) => cb(null, file)))
like image 27
Preview Avatar answered Oct 17 '22 13:10

Preview