We Keep Coding

Gulp looping a watch task

I'm new in Gulp and this is my code that just minifies my JS script:
gulp.task('minify-js', function(){
return gulp.src(['assets/js/**/*.js', '!assets/js/**/*.min.js'])
.pipe(uglify())
.pipe(rename({ suffix: '.min' }))
.pipe(gulp.dest('./assets/js'))
});
gulp.task('watch', function(){
//gulp.watch(['sass/**/*.sass'], gulp.series('css-files'));
gulp.watch(['assets/js/**/*.js'], gulp.series('minify-js'));
});
gulp.task('default', gulp.series('watch'));
When I run gulp default and edit any JS file, my task starts looping for no reason and the files keep being minified and merged aswell. Why? It should stop after one execution!
example:
*This code runs perfectly without the watch task
Any help?

Your destination file matches the mask of source files.
So Gulp process the file it just generated themself. And then again, and again.
Update: you've excluded the file in minify-js task, but not excluded in watch task. Set watch argument the same as for minify-js and that should help.

gulp.src from a separate file doesnt work

I am trying to write a gulpfile as follows :
var gulp = require('gulp');
// other dependencies go here ....
// source of files
var inputs = require('./asset_source.js');
// a simple task
gulp.task('css', function () {
gulp.src(inputs.css)
.pipe(debug())
.pipe(plumber())
.pipe(maps.init())
.pipe(concatCss('libs.css'))
.pipe(maps.write('../srcmaps'))
.pipe(plumber.stop())
.pipe(gulp.dest('assets/css'));
});
// the watcher
gulp.task('watch', function () {
gulp.watch('./asset_source.js', ['css']);
});
// default task
gulp.task('default', ['browser-sync', 'watch']);
And the source of assets (asset_source.js) file is something like this :
module.exports = {
css: [
'path/to/a/file.css',
'path/to/another/file.css',
.......
.......
],
js: [
'path/to/a/file.js',
'path/to/another/file.js',
.......
.......
]
};
Now I run the app with by just typing gulp in the console and it starts in a browser thanks to browsersync. I have all the css,scss,js assets listed in the asset_source.js file which is in the same directory as the gulpfile.js. What I want to achieve is if I append or remove a value to/from either of the arrays in asset_source.js, the concerned task should run while the gulp is already running. In this case css should be running on any change to asset_source.js with its updated content.
But instead it doesnt do so. Even if there is a change in the asset_source file, gulp uses the initial content and runs the task. However if run gulp css in a separate terminal, it works.
Please help me where I am going wrong or if it is even possible. Thanks.

Gulp - uglify() with wildcard in source throws error

When running the final build step in GULP, I am trying to use uglify with a wildcard in the gulp.src, but seeing an error.
This works:
gulp.task('build', ['lint','karma','clean'], function () {
return gulp.src('./src/js/file.js')
.pipe(gulp.dest('./dist'))
.pipe(uglify())
.pipe(size())
.pipe(gulp.dest('./dist'));
});
But this doesn't:
gulp.task('build', ['lint','karma','clean'], function () {
return gulp.src('./src/js/*.js')
.pipe(gulp.dest('./dist'))
.pipe(uglify())
.pipe(size())
.pipe(gulp.dest('./dist'));
});
The only difference being that I select a specific file in the working gulp.src, but use a wildcard in the non-working version. I have narrowed this down to uglify() because if I comment it out, I don't get the error, and everything completes without issue.
Any help would be greatly appreciated

Pipe vendor js files from Bower and own js files into unique stream in Gulp

I'd like to grab my vendor js files from bower dependencies, and, along with my own js files, pipe through some other tasks and concat them into one .js file. And then do the same for Sass files.
How could I achieve that? I tried this, but it doesn't work:
gulp.task('scripts', function () {
return gulp.src([
mainBowerFiles(gulpFilter('*.js')),
'app/js/*.js'
])
.pipe(uglify())
.pipe(concat('app.js'))
.pipe(gulp.dest('./dist/js'));
});
It throws this error:
TypeError: Arguments to path.resolve must be strings
But it works if I have this, for example:
gulp.src([
'app/js/etc.js',
'app/js/main.js'
])
..and in the following case, it throws a different error (but no error without uglify()):
gulp.src(mainBowerFiles(gulpFilter('*.js')))
error:
events.js:72
throw er; // Unhandled 'error' event
How do I better debug this? Should I separate vendor / own js files in different streams?
update
I'm working now with two streams, and merging them later on with event-stream, like this:
gulp.task('scripts', function () {
var jsFilter = gulpFilter('*.js');
var vendorFiles = gulp.src(mainBowerFiles()) // don't read
.pipe(jsFilter)
.pipe(concat('vendor.js'));
var appFiles = gulp.src('app/js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(concat('app.js'));
return es.concat(vendorFiles, appFiles)
.pipe(uglify())
.pipe(concat('app.js'))
.pipe(gulp.dest('./dist/js'));
});
It works great, but I'm not able to handle the order of the files. Obviously I'd like that the vendor code come before my code at the destination's app.js, but that's doesn't happen. I created a thread about that here.

Solved it with gulp-event-stream and gulp-order. Intrigues me a little that gulp-order is trending downward at https://www.npmjs.org, though.
gulp.task('scripts', function () {
var jsFilter = gulpFilter('*.js');
var vendorFiles = gulp.src(mainBowerFiles())
.pipe(jsFilter)
.pipe(concat('vendor.js'));
var appFiles = gulp.src('app/js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(concat('app.js'));
return eventStream.concat(vendorFiles, appFiles)
.pipe(order([
"vendor.js",
"app.js"
]))
.pipe(concat('app.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist/js'));
});

mainBowerFiles() returns an array. gulp.src is expecting an array of strings, not nested arrays, which is likely the cause of the first problem. You could try the following instead:
gulp.src(mainBowerFiles(gulpFilter('*.js')).push('app/js/*.js'))
I'm not sure what's causing the unhandled error event, but you could try using gulp-debug to get more information.

gulp minifies already minified file

I try to minify separate .js-files with gulp. Like:
file_one.js --> file_one.min.js
file_two.js --> file_two.min.js
It works the first time I execute gulp. But if I run it a second time it looks like this:
file_one.js
file_one.min.js
file_one.min.min.js
file_two.js
file_two.min.js
file_two.min.min.js
And it repeats that pattern every timme i execute gulp. How can I stop it from minify already minified js.
I use the following code:
gulp.task('scripts', function() {
return gulp.src('dest/*js')
.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(gulp.dest('dest'));
});

You can put the minified files in a different directory, or you can exclude them in the gulp.srclike this:
gulp.task('scripts', function() {
return gulp.src(['dest/*.js', '!dest/*.min.js'])
.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(gulp.dest('dest'));
});

This is happening because you are saving the minified files in the same directory of your non minified files. The first part of your stream (gulp.src) reads all files inside your dest folder. Since you are saving your minified files to the very same folder, it is minifying them again on the second time it is run. the You have some options:
Change the output folder to something else (for instance gulp.dest('build'))
Change gulp.src to match only the non-minified files

You are having problem with duplicate so you need to delete the destination file first to re-run the file. See Example:
//clean
gulp.task('clean', function(){
return del(['dist']);
});
//Default task
gulp.task('default',['clean'], function(){
gulp.start('usemin','imagemin','copy','views');
});