We Keep Coding

Gulp watch not triggering

I am working on a project that uses gulp to concatenate compiled vue assets with other javascript assets.
When running gulp, all runs successfully.
However, now I need to add a watcher on the compiled vue file as show below.
gulp.task('watch', ['scripts'], function() {
gulp.watch('js/vue/compiled.js', { ignoreInitial: false });
});
While the watcher process seems to kickoff, it does not update when the compiled.js file gets updated. Any idea why this is?

Usually how I write gulp tasks is like this:
gulp.task('watch', function() {
gulp.watch('js/vue/compiled.js', ['scripts'], { ignoreInitial: false });
});

Instead of placing the gulp function to execute in gulp.task rather place it in gulp.watch. Something like this:
gulp.task('watch', function() {
gulp.watch('js/vue/compiled.js', ['scripts'], { ignoreInitial: false });
});

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.

How do I run gulp eslint continuously and automatically while fixing files -- how to set up watch

I am trying eslint with gulp. I have set up a task like this:
gulp.task('lint', function () {
return gulp.src([
'components/myjs.js'
])
// eslint() attaches the lint output to the eslint property
// of the file object so it can be used by other modules.
.pipe(eslint())
// eslint.format() outputs the lint results to the console.
// Alternatively use eslint.formatEach() (see Docs).
.pipe(eslint.format())
// To have the process exit with an error code (1) on
// lint error, return the stream and pipe to failOnError last.
.pipe(eslint.failOnError());
});
when I run gulp lint
It tells me a lot of errors. Now I am trying to fix them one by one. But I have to re-run gulp lint manually for it to give me an updated report. How do I set it up so that it will automatically re-run every time I update 'components/myjs.js'?

Just add a watch task:
gulp.task('watch', function() {
gulp.watch('components/myjs.js', ['lint']);
});
This way Gulp will track any changes on your 'components/myjs.js' and execute your 'lint' task on any change
If you want further reading:
https://scotch.io/tutorials/automate-your-tasks-easily-with-gulp-js

How to wait for a grunt task to complete before running mocha tests

In a nutshell...
I have some grunt tasks with external configs that I want to test (make sure they do what they're supposed to do). So I'd like to write a mocha test running the tasks in the before function and asserting everything went well.
...and with some details
In my gruntfile there is something like
# Load task configs from `grunt` dir.
configs = require('load-grunt-configs') grunt,
config:
src: ['tasks/*{.js,.json,.coffee,.cson}']
# Load all **grunt tasks** with patter `grunt-*`
require('load-grunt-tasks') grunt, pattern: [
'grunt-*'
]
# Pass configs to grunt
grunt.initConfig configs
and afterwards some task registration...
However I now have access to my less task residing as a less.cson in my tasks folder
(which uses grunt-contrib-less).
So far so good. :)
I'm using chai for assertions:
describe('Checking static resources for dev', function () {
describe('less task', function () {
before(function () {
grunt.task.run('less');
});
it('should have a compiled css file for docs', function () {
grunt.file.isFile('public/css/docs.css').should.be.ok;
grunt.file.isFile('public/css/docs.css.map').should.be.ok;
});
As expected, the task completes after the tests were run since it's not async and I don't know a way to tell grunt (without modifying the existing task/config) that it should call a possible done function when ready and then make the assertion.
I also tried grunt-run-task but could not manage to run any task (they abort with a timeout although I gave them more than 20 seconds to complete).
Guess I'm looking for something like
before(function (done) {
grunt.task.run('less', done);
});
Anyone some advice?