gulp.src pattern only matches last file - javascript

I am trying to browserify all my 'spec' files in my tests folder,
gulp.task('browserifyTests',function(){
return gulp.src(['./tests/**/spec*.js'])
.pipe($$.browserify()
)
.pipe($$.rename('specs.bundle.js'))
.pipe(gulp.dest('tests'));
});
I have 2 files specA.js and specB.js under tests/specs folder. When I browserify, I only see specB.js in the specs.bundle.js. Its really baffling why such a thing should happen when the pattern should clearly match here right? Or am I doing something silly..
Actually, I did a gulp-print and I see both file names printed too.

AFAIK, you can't use Browserify in Gulp like that (because it's not a Gulp plugin).
Try this:
const source = require('vinyl-source-stream');
const glob = require('glob').sync;
gulp.task('js', () => {
return $$.browserify(glob('./tests/**/spec*.js'), {...})
.bundle()
.pipe(source('specs.bundle.js'))
.pipe(gulp.dest('./tests/'));
});
More info here (in particular, "Using them together: Gulp + Browserify").

Related

How to rename the original files of scripts in index.html using gulp?

I've written a gulp task to rename files so that they can be versioned. The problem is that the filenames of the files that the index.html scripts reference are not changed.
For example, in my index.html:
<script src=pub/main_v1.js"></script>
But if you actually navigate through the build folder to the subdirectory pub, you will find main.js.
Here is the custom gulp task:
const gulpConcat = require('gulp-concat');
const gulpReplace = require('gulp-replace');
const version = require('./package.json').version;
gulp.task('version', function () {
var vsn = '_' + version + '.js';
gulp.src('scripts/**/*.js')
.pipe(gulpConcat(vsn))
.pipe(gulp.dest('./prodBuild'));
return gulp.src('./prodBuild/index.html', { base: './prodBuild' })
.pipe(gulpReplace(/* some regex */, /* append vsn */))
.pipe(gulp.dest('./prodBuild'));
});
What do I need to fix/add so that the original filename changes to match that in the script tag?
Note: According to the gulp-concat docs, I should be able to find the concated files at prodBuild/[vsn], where [vsn] is _v1.js. However, it is no where to be found.
Update: The files rename properly in index.html, but I can't seem to get the renaming of the original files to work. Here's a snapshot of my build directory:
prodBuild/
pub/
main.js
someDir/
subDirA/
// unimportant stuff
subDirB/
file2.js
file3.js
// ...other files and folders...
EDIT:
The issue is that you return only one of the two tasks. The first task is simply ignored by gulp, since it is not returned. A simple solutions: Split it into two tasks, and reference the one from the other, like in this SO answer.
Old Answer
This looks like a perfect case for the gulp-rename. You could simply pipe your scripts through gulp-rename, like this:
.pipe(rename(function (path) {
path.basename += vsn;
path.extname = ".js"
}))
Gulp concat is, AFAIK, made for the concatination of files, not particularly for the renaming of them.

How to set up gulp to bundle several files into one?

This seems like a very simple question, but spent the last 3 hours researching it, discovering it can be slow on every save on a new file if not using watchify.
This is my directory tree:
gulpfile.js
package.json
www/
default.htm
<script src="toBundleJsHere/file123.js"></script>
toBundletheseJs/
componentX/
file1.js
componentY/
file2.js
componentZ/
file3.js
toPutBundledJsHere/
file123.js
Requirements.
On every creation or save of a file within the folder toBundleTheseJs/ I want this file to be rebundled into toBundleJsHere/
What do I need to include in my package.json file?
And whats the minimum I need to write into my gulp file?
This should be as fast as possible so think I should be using browserify and watchify. I want to understand the minimum steps so using package manager like jspm is overkill a this point.
thanks
First you should listen to changes in the desired dir:
watch(['toBundletheseJs/**/*.js'], function () {
gulp.run('bundle-js');
});
Then the bundle-js task should bundle your files. A recommended way is gulp-concat:
var concat = require('gulp-concat');
var gulp = require('gulp');
gulp.task('bundle-js', function() {
return gulp.src('toBundletheseJs/**/*.js')
.pipe(concat('file123.js'))
.pipe(gulp.dest('./toPutBundledJsHere/'));
});
The right answer is: there is no legit need for concatenating JS files using gulp. Therefore you should never do that.
Instead, look into proper JS bundlers that will properly concatenate your files organizing them according to some established format, like commonsjs, amd, umd, etc.
Here's a list of more appropriate tools:
Webpack
Rollup
Parcel
Note that my answer is around end of 2020, so if you're reading this in a somewhat distant future keep in mind the javascript community travels fast so that new and better tools may be around.
var gulp = require('gulp');
var concat = require('gulp-concat');
gulp.task('js', function (done) {
// array of all the js paths you want to bundle.
var scriptSources = ['./node_modules/idb/lib/idb.js', 'js/**/*.js'];
gulp.src(scriptSources)
// name of the new file all your js files are to be bundled to.
.pipe(concat('all.js'))
// the destination where the new bundled file is going to be saved to.
.pipe(gulp.dest('dist/js'));
done();
});
Use this code to bundle several files into one.
gulp.task('scripts', function() {
return gulp.src(['./lib/file3.js', './lib/file1.js', './lib/file2.js']) //files separated by comma
.pipe(concat('script.js')) //resultant file name
.pipe(gulp.dest('./dist/')); //Destination where file to be exported
});

gulp-useref "additionalStreams" not merging

So I have a simple use case, and it seems very similar to the usecase described in the readme for https://github.com/jonkemp/gulp-useref.
I'm trying to generate a templates.js file with all of the Angular templates during the build. I am trying to do this and NOT have a templates.js file in my local project. So the idea was to merge the output of the template stream into the useref stream so that the resulting scripts.js file would contain all of the files indicated in my index file AND the generated templates ouput.
Here's what I have in the gulp task:
gulp.task('usemin:dist', ['clean:dist'], function() {
var templatesStream = gulp.src([
'./app/**/*.html',
'!./app/index.html',
'!./app/404.html'
]).pipe(templateCache({
module: 'myCoolApp'
}));
var assets = $useref.assets({
additionalStreams: [templatesStream]
});
return gulp.src('./app/index.html')
.pipe(assets)
.pipe(assets.restore())
.pipe($useref())
.pipe(gulp.dest('./dist/'));
});
Now this should allow me to merge the output of the templatesStream and turn it all into one scripts.js file, I think...
I've also tried having <script src="scripts/templates.js"></script> of many forms sitting in my index file to try and assist it. None seem to work.
Anyone else doing this same type of thing? Seems like a common use-case.
I was able to get this to work by looking closely at the test cases.
I now have a templates.js script tag on my index.html file which will 404 while in my local environment.
My gulp task looks like this:
gulp.task('useref:dist', ['clean:dist'], function() {
var templateStream = gulp.src([
'./app/**/*.html',
'!./app/index.html',
'!./app/404.html'
]).pipe(templateCache({
module: 'digitalWorkspaceApp'
}));
var assets = $useref.assets({
additionalStreams: [templateStream]
});
var jsFilter = $filter('**/*.js', {restore: true});
return gulp.src('./app/index.html')
.pipe(assets)
.pipe($useref())
.pipe(gulp.dest('./dist/'));
});
Immediately I can't really see the difference, but it may have all hinged on the addition of this non-existent file in my index.html.

Is there a way to use gulp to remove all instances of require.js define([...]) wrappers?

I would like to test my app without require.js to see what the performance and file size would be like as a single concatenated file.
I'm thinking of using gulp to grab all app *.js files, perform a gulp-replace to remove all instances of the the define([...], function (...) { }); wrapper in the script, and the concatenate into a single *.js file.
Any idea if gulp-replace could handle that, and if so, what would the regex look like? Here's an example of a *.js file:
'use strict';
define(['file1', 'file2', 'file3'], function (param1, param2, param3) {
//...
//code that should remain after gulp-replace
//...
});
Solution for anyone else attempting to try the same:
var gulp = require('gulp'),
concat = require('gulp-concat'),
replace = require('gulp-replace'),
uglify = require('gulp-uglify');
gulp.src(['src/**/*.js', '!src/main.conf.js', '!src/**/*_test.js'])
.pipe(replace(/'use strict';/g, ''))
.pipe(replace(/define\s?\(\[.*\],\s?function\s?\(.*\)\s?\{/g, ''))
.pipe(replace(/\}\)\;\s?$/g, ''))
.pipe(concat('app.js'))
.pipe(uglify())
.pipe(gulp.dest('dist'));
Assumption is that you are only targeting require.js files. If you have compile errors, try using gulp-debug to figure out which file is throwing the errors.
Assumption is that it doesn't matter which order these files load in, which is the case with an AngularJS app. But if order is important, you can set the desired order in the array you pass into gulp.src.

Removing gulp.src files after gulp.dest?

I have a scenario where a client of mine wants to drop LESS files into a src directory (via FTP), and for them to be automatically outputted as CSS to a build directory. For each LESS file, once its resultant CSS file is created, it should be removed from the src directory. How can I do this with Gulp?
My current gulpfile.js is:
var gulp = require("gulp");
var watch = require("gulp-watch");
var less = require("gulp-less");
watch({ glob: "./src/**/*.less" })
.pipe(less())
.pipe(gulp.dest("./build"));
This successfully detects new LESS files being dropped into the src directory and outputs CSS files into build. But it doesn't clean up the LESS files afterwards. :(
Use gulp-clean.
It will clean your src directory once you piped it. Of course, test it on a backup with different settings, and if you can't manage to make it work properly, don't hesitate to make a second task and use some task dependency to run the clean after your less task is completed.
If I'm right, when I tried to pipe gulp-clean after the gulp.dest, something went wrong, so I got another way to do this, here's an example with task dependency.
var gulp = require('gulp'),
less = require('gulp-less'),
clean = require('gulp-clean');
gulp.task('compile-less-cfg', function() {
return gulp.src('your/less/directory/*.less')
.pipe(less())
.pipe('your/build/directory'));
});
gulp.task('remove-less', ['less'], function(){
return gulp.src('your/less/directory)
.pipe(clean());
});
That's for the not-watching task. Then, you should use a watch on the *.less files, but you should get task remove-less running instead of less. Why ? Because of task dependency.
When you'll call the remove-less task, it will only start once the less task is complete. That way, the files will only be deleted once your less compilation is over, and not in the middle of it throwing errors.
It may not be the perfect method to get this working as I'm not an expert, but it's a safe and working solution for you to use. Also it's pretty clear to understand IMO.
gulp-clean is deprecated. Use the npm module del.
npm install --save-dev del
Here is how you should use it.
var gulp = require('gulp');
var del = require('del');
gulp.task('clean:mobile', function () {
return del([
'dist/report.csv',
// here we use a globbing pattern to match everything inside the `mobile` folder
'dist/mobile/**/*',
// we don't want to clean this file though so we negate the pattern
'!dist/mobile/deploy.json'
]);
});
gulp.task('default', ['clean:mobile']);

Categories