In Node, I am trying to duplicate a gulp vinyl stream using Passthrough. I get TypeError: Invalid non-string/buffer chunk when attempting c = fileStream.pipe(b);
I suspect it may be because fileStream is a gulp vinyl stream.
var pass = require('stream').PassThrough;
function duplicateStream(fileStream) {
b = new pass();
c = fileStream.pipe(b);
return c;
}
If you need to clone a gulp stream, you can just use gulp-clone. This task will write all of the single JS files to the out directory, as well as a concatenated bundle.js in the same directory.
var gulp = require('gulp');
var concat = require('gulp-concat');
var clone = require('gulp-clone');
var merge = require('merge-stream');
gulp.task('default', function () {
var scripts = gulp.src('assets/**/*.js');
var bundle = scripts.pipe(clone())
.pipe(concat('bundle.js'));
// Merge the streams together, then write them to the out folder
return merge(scripts, bundle).pipe(gulp.dest('out'));
});
https://github.com/mariocasciaro/gulp-clone
Related
I want to ask a question about importing js file into another js file and use it in gulp. You can see my gulp.config file and gulpfile. when i try to run gulp task which is vet i am getting error like this ;
[00:06:21] Using gulpfile ~\pluralsight-gulp-master\gulpfile.js
[00:06:21] Starting 'vet'...
[00:06:21] 'vet' errored after 13 ms
[00:06:21] Error: Invalid glob argument: undefined
at Gulp.src (C:\Users\Altan\pluralsight-gulp-master\node_modules\vinyl-fs\li
b\src\index.js:20:11)
gulp.config.js
module.exports = function(){
var config = {
//all js to vet
alljs: [
'./src/**/*.js',
'./*.js'
]
};
return config;
};
gulpfile.js
var gulp = require ('gulp');
var jscs = require ('gulp-jscs');
var jshint = require ('gulp-jshint');
var util = require ('gulp-util');
var gulpprint = require ('gulp-print').default;
var gulpif = require ('gulp-if');
var args = require ('yargs').argv;
var config= require('./gulp.config');
gulp.task('vet',done=>{
gulp
.src(config.alljs)
.pipe(gulpif(args.verbose,gulpprint()))
.pipe(gulpprint())
.pipe(jscs())
.pipe(jshint())
.pipe(jshint.reporter('jshint-stylish',{verbose:true}));
done();
});
you are returning a function from gulp.config.js
when you require it, it should be
require('./gulp.config')()
I would like to know how exactly can I manipulate the output of my Gulp plugin so, for example, no matter how many files are passed to the plugin, it will wrap the output with a string. Currently I cannot know when does the last file is done.
The super simplified example below will iterate on 3 files and will create a new file named output.js and in it there will be three times the string xxx (xxxxxxxxx).
I would like the plugin itself to wrap the contents so the output will
be: +xxxxxxxxx+.
How can I do this?
Thanks!
Gulpfile
var gulp = require('gulp');
var concat = require('gulp-concat');
var foo = require('./index');
gulp.task('default', function() {
gulp.src([a.html, b.html, c.html])
.pipe(foo())
.pipe(concat('output.js'))
.pipe(gulp.dest('./test/output'))
});
The most basic gulp plugin (index.js):
var through2 = require('through2'),
gutil = require('gulp-util');
var PLUGIN_NAME = 'foo';
module.exports = function( options ){
// through2.obj(fn) is a convenience wrapper around
// through2({ objectMode: true }, fn)
return through2.obj(function( file, enc, callback ){
file.contents = new Buffer( 'xxx' );
this.push(file);
callback();
});
}
I understand the files are currently simply returned modified, but what I don't understand is how to append text and return the concatenated result that I want, while keeping it OK with Gulp working standards.
The "real" plugin should actually wrap the files results with:
var foo = { FILES_CONTENT }
where FILES_CONTENT will actually be a a concatenated string of all the files:
"file_name" : "file_content",
"file_name" : "file_content",
...
I would make the following changes to your gulpfile.js:
var gulp = require('gulp');
var foo = require('./index.js');
gulp.task('default', function() {
return gulp.src(['a.html', 'b.html', 'c.html'])
.pipe(foo({fileName:'output.js', varName:'bar'}))
.pipe(gulp.dest('./test/output'))
});
Since your foo() plugin itself will concatenate all the files, there's no need to use gulp-concat at all. Instead your plugin should accept an option fileName that provides the name of the generated file. I've also added another option varName that will provide the name of the var in the output file.
I'll assume that a.html, b.html and c.html are simple HTML files, something like this:
<h1 class="header">a</h1>
As you've already realized you need to concat all the files in the plugin itself. That's not really difficult however and doesn't require a lot of code. Here's a index.js which does exactly that:
var through2 = require('through2'),
gutil = require('gulp-util'),
path = require('path'),
File = require('vinyl');
var PLUGIN_NAME = 'foo';
module.exports = function(options) {
var files = { };
var outputFile = null;
return through2.obj(function(file, enc, callback){
outputFile = outputFile || file;
var filePath = path.relative(file.base, file.path);
files[filePath] = file.contents.toString();
callback();
}, function(callback) {
outputFile = outputFile ? outputFile.clone() : new File();
outputFile.path = path.resolve(outputFile.base, options.fileName);
outputFile.contents = new Buffer(
'var ' + options.varName + ' = ' +
JSON.stringify(files, null, 2) + ';'
);
this.push(outputFile);
callback();
});
}
Since you want to output a key/value mapping from file names to file contents our transformFunction just stores both of those things in a regular JavaScript object files. None of the input files themselves are emitted. Their names and contents are just stored until we have all of them.
The only tricky part is making sure that we respect the .base property of each file as is customary for gulp plugins. This allows the user to provide a custom base folder using the base option in gulp.src().
Once all files have been processed through2 calls the flushFunction. In there we create our output file with the provided fileName (once again making sure we respect the .base property).
Creating the output file contents is then just a matter of serializing our files object using JSON.stringify() (which automatically takes care of any escaping that has to be done).
The resulting ./test/output/output.js will then look like this:
var bar = {
"a.html": "<h1 class=\"header\">a</h1>\n",
"b.html": "<h1 class=\"header\">b</h1>\n",
"c.html": "<h1 class=\"header\">c</h1>\n"
};
You should use the gulp pipeline technique (standard).
This means that you can use the gulp-insert package in order
to add the string xxx.
var insert = require('gulp-insert');
.pipe(insert.append('xxx')); // Appends 'xxx' to the contents of every file
You can also prepend, append and wrap with this package and it support of course the gulp standards.
So the full example will be:
var gulp = require('gulp');
var concat = require('gulp-concat');
var foo = require('./index');
var insert = require('gulp-insert');
gulp.task('default', function() {
gulp.src([a.html, b.html, c.html])
.pipe(foo()
.pipe(insert.append('xxx'))
.pipe(concat('output.js'))
.pipe(gulp.dest('./test/output'))
});
I am attempting to compile react (.jsx), coffeescript (.coffee), and vanilla javascript (.js) files using gulp to package all of the resulting .js files into one file, app.js, which gets loaded into my index.html page. I am generating a stream for each compilation type and using merge-stream to collect the contents of the 3 feeder streams into a single stream, which I am passing to gulp-concat to create app.js.
I am getting an exception from gulp-concat, index.js, line 39, letting me know that 'file' is not a function. Here is my entire gulpfile.js, the reference to gulp-concat is near the bottom of this section.
var browserify = require('browserify');
var coffee = require('gulp-coffee');
var concat = require('gulp-concat');
var gulp = require('gulp');
var gutil = require('gulp-util');
var mergeStream = require('merge-stream');
var reactify = require('reactify');
var sass = require('gulp-sass');
var source = require('vinyl-source-stream');
gulp.task('javascript', function(){
// convert .jsx files to .js, collecting them in a stream
var b = browserify();
b.transform(reactify); // use the reactify transform
b.add('./jsx-transforms.js');
jsxStream = b.bundle();
if (gutil.isStream(jsxStream)) {
gutil.log("jsxStream is a stream");
} else {gulp-concatgulp
gutil.log("jsxStream is not a stream");
}
merged = mergeStream(jsxStream);
if (gutil.isStream(merged)) {
gutil.log("merged is a stream");
} else {
gutil.log("merged is not a stream");
}
// collect all .js files in a stream
jsStream = gulp.src(['./client/**/*.js','./common/**/*.js']);
if (gutil.isStream(jsStream)) {
gutil.log("jsStream is a stream");
} else {
gutil.log("jsStream is not a stream");
}
merged.add(jsStream);
// compile all .coffee file to .js, collect in a stream
coffeeStream = gulp.src(['./client/**/*.coffee','./common/**/*.coffee'])
.pipe(coffee({bare: true}).on('error', gutil.log));
if (gutil.isStream(coffeeStream)) {
gutil.log("coffeeStream is a stream");
} else {
gutil.log("coffeeStream is not a stream");
}
merged.add(coffeeStream);
// concatenate all of the .js files into ./build/app.js
merged
.pipe(concat('app.js'))
.pipe(gulp.dest('./build'));
});
gulp.task('styles', function() {
gulp.src('./client/assets/stylesheets/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(concat('app.css'))
.pipe(gulp.dest('./build'));
});
gulp.task('default', ['javascript', 'styles']);
I have used gulp-concat before, but never hit this problem before.
Gulp streams are a very particular sort of stream: they are Node streams in object mode containing vinyl file objects. If your stream comes from somewhere other than gulp.src(), such as from the browserify API, then you will have to first convert the stream into the sort that gulp can deal with.
There are two steps you need to take. First, convert your browserify bundle stream into a stream containing a vinyl file object with vinyl-source-stream (which you have required but not used).
var source = require('vinyl-source-stream');
...
var jsxStream = b.bundle()
.pipe(source('bundle.js'));
Now there is another catch. Vinyl streams may be in one of two modes: streaming mode or buffer mode. Vinyl-source-stream gives you a stream in streaming mode. Many Gulp plugins, including gulp-concat, only support buffer mode. The fix for this is easy: use vinyl-buffer.
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
...
var jsxStream = b.bundle()
.pipe(source('bundle.js'))
.pipe(buffer());
Now you have something you can merge with your other streams and pipe to gulp-concat. For more detail, see this recipe.
This is a speculative question about delivering files to a server. I have recently moved from using grunt to gulp. I like the fact that I do not have to have temporary files littering my directory and requiring a larger .gitignore file.
Is it possible to run file processing and them pipe them directly to a server. All the examples I have found so far pipe to a destination directory which is then served. What I would like to create is something very similar to the following
var gulp = require('gulp');
var browserify = require('gulp-browserify');
var connect = require('gulp-connect');
var merge = require('merge-stream');
gulp.task('test', function () {
var js = gulp.src('test/index.js')
.pipe(browserify());
var html = gulp.src('test/index.html');
merge(html, js)
.pipe(connect.server({
port: 8080
}));
gulp.watch('test/*', function () {
console.log('boo');
});
});
In my gulpfile I have a version number in a string. I'd like to write the version number to a file. Is there a nice way to do this in Gulp, or should I be looking at more general NodeJS APIs?
If you'd like to do this in a gulp-like way, you can create a stream of "fake" vinyl files and call pipe per usual. Here's a function for creating the stream. "stream" is a core module, so you don't need to install anything:
const Vinyl = require('vinyl')
function string_src(filename, string) {
var src = require('stream').Readable({ objectMode: true })
src._read = function () {
this.push(new Vinyl({
cwd: "",
base: "",
path: filename,
contents: Buffer.from(string, 'utf-8')
}))
this.push(null)
}
return src
}
You can use it like this:
gulp.task('version', function () {
var pkg = require('package.json')
return string_src("version", pkg.version)
.pipe(gulp.dest('build/'))
})
It's pretty much a one-liner in node:
require('fs').writeFileSync('dist/version.txt', '1.2.3');
Or from package.json:
var pkg = require('./package.json');
var fs = require('fs');
fs.writeFileSync('dist/version.txt', 'Version: ' + pkg.version);
I'm using it to specify a build date in an easily-accessible file, so I use this code before the usual return gulp.src(...) in the build task:
require('fs').writeFileSync('dist/build-date.txt', new Date());
This can also be done with vinyl-source-stream. See this document in the gulp repository.
var gulp = require('gulp'),
source = require('vinyl-source-stream');
gulp.task('some-task', function() {
var stream = source('file.txt');
stream.end('some data');
stream.pipe(gulp.dest('output'));
});
According to the maintainer of Gulp, the preferred way to write a string to a file is using fs.writeFile with the task callback.
var fs = require('fs');
var gulp = require('gulp');
gulp.task('taskname', function(cb){
fs.writeFile('filename.txt', 'contents', cb);
});
Source: https://github.com/gulpjs/gulp/issues/332#issuecomment-36970935
You can also use gulp-file:
var gulp = require('gulp');
var file = require('gulp-file');
gulp.task('version', function () {
var pkg = require('package.json')
return gulp.src('src/**')
.pipe(file('version', pkg.version))
.pipe(gulp.dest('build/'))
});
or without using gulp.src():
gulp.task('version', function () {
var pkg = require('package.json')
return file('version', pkg.version, {src: true})
.pipe(gulp.dest('build/'))
});
The gulp-header package can be used to prefix files with header banners.
eg. This will inject a banner into the header of your javascript files.
var header = require('gulp-header');
var pkg = require('./package.json');
var banner = ['/**',
' * <%= pkg.name %> - <%= pkg.description %>',
' * #version v<%= pkg.version %>',
' * #link <%= pkg.homepage %>',
' * #license <%= pkg.license %>',
' */',
''].join('\n');
gulp.src('./foo/*.js')
.pipe(header(banner, { pkg: pkg } ))
.pipe(gulp.dest('./dist/')
Gulp is a streaming build system leveraging pipes.
If you simply want to write a new file with an arbitrary string, you can use built in node fs object.
Using the string-to-stream and vinyl-source-stream modules:
var str = require('string-to-stream');
var source = require('vinyl-source-stream');
var gulp = require('gulp');
str('1.4.27').pipe(source('version.txt')).pipe(gulp.dest('dist'));
Here's an answer that works in 2019.
Plugin:
var Vinyl = require('vinyl');
var through = require('through2');
var path = require('path');
// https://github.com/gulpjs/gulp/tree/master/docs/writing-a-plugin#modifying-file-content
function stringSrc(filename, string) {
/**
* #this {Transform}
*/
var transform = function(file, encoding, callback) {
if (path.basename(file.relative) === 'package.json') {
file.contents = Buffer.from(
JSON.stringify({
name: 'modified-package',
version: '1.0.0',
}),
);
}
// if you want to create multiple files, use this.push and provide empty callback() call instead
// this.push(file);
// callback();
callback(null, file);
};
return through.obj(transform);
}
And in your gulp pipeline:
gulp.src([
...
])
.pipe(stringSrc('version.json', '123'))
.pipe(gulp.dest(destinationPath))
From source: https://github.com/gulpjs/gulp/tree/master/docs/writing-a-plugin#modifying-file-content
The function parameter that you pass to through.obj() is a _transform
function which will operate on the input file. You may also provide an
optional _flush function if you need to emit a bit more data at the
end of the stream.
From within your transform function call this.push(file) 0 or more
times to pass along transformed/cloned files. You don't need to call
this.push(file) if you provide all output to the callback() function.
Call the callback function only when the current file (stream/buffer)
is completely consumed. If an error is encountered, pass it as the
first argument to the callback, otherwise set it to null. If you have
passed all output data to this.push() you can omit the second argument
to the callback.
Generally, a gulp plugin would update file.contents and then choose to
either:
call callback(null, file) or make one call to this.push(file)
This can also be achieved using gulp-tap
This can be especially helpful if you have identified multiple files that require this header. Here is relevant code (Also from gulp-tap documentation)
var gulp = require('gulp'),
tap = require('gulp-tap');
gulp.src("src/**")
.pipe(tap(function(file){
file.contents = Buffer.concat([
new Buffer('Some Version Header', 'utf8'),
file.contents
]);
}))
.pipe(gulp.dest('dist');