Laravel Elixir - Gulp watch not finishing until terminal gets focus - laravel

I am using Laravel Elix and Gulp (on Windows 8) to combine and compile my Angular.js and SCSS files. Se the code bellow:
var elixir = require('laravel-elixir');
require('./tasks/angular.task.js');
require('./tasks/bower.task.js');
require('laravel-elixir-livereload');
elixir.config.js.outputFolder = 'public/js/';
elixir(function(mix){
mix
.sass('app.scss')
.bower()
.angular('resources/assets/angular/');
});
The problem is that when I am running gulp watch the combined all.js file will not update until i click the terminal window (give it focus). It's showing that the gulp has finished the task:
[13:26:45] Finished 'angular in resources/assets/angular/' after 26 ms

After reading previous comments, I think there's still a solution that's available to use, if willing:
Going to System Settings under the Synchronization section you can set the file save on a timer when application is idle.
That way you'll have the watcher run as expected while you're typing.

Related

'Gulpfile.js - failed to load See output' but output does not show any error information

I am trying to use gulp to copy some JS/CSS from node_modules to wwwroot in an ASP.Net core app.
I have what I thought was a fairly simple gulpfile.js
var gulp = require('gulp');
gulp.task('copy-files', function () {
var assets = {
js: [
'./node_modules/bootstrap/dist/js/bootstrap.js'
],
css: [
'./node_modules/bootstrap/dist/css/bootstrap.css'
]
};
_(assets).forEach(function (assets, type) {
gulp.src(assets).pipe(gulp.dest('./wwwroot/' + type));
});
});
However, when I look at the VS Task Runner, it just shows an error:
But the output window is empty:
How can I get more information about the error?
This answer here worked for me.
Moved up the $(PATH) location above everything. As I did not have (DevEnvDir)|Extensions\Microsoft\Web Tools\External location as mentioned in the answer.
For VS 2015
Tools > Options > Projects and Solutions > External Web Tools
For VS 2017
Tools > Options > Projects and Solutions > Web Package Management > External Web Tools
The problem is not related to path, but actually there must be some problem with gulp file itself either syntax error or some package is missing which unfortunately visual studio does not show that specific error but generic error what you see in task runner "failed to load". And the right way to see the errors is
Open the command prompt (preferably in admin mode, this is what i did).
Goto the same location where gulp file is located.
Run the task through following command example --> gulp default
If there is any error like package is missing, it will show you, fix those issues.
After all errors are fixed, then you will see that gulp task runs successfully.
Go back to visual studio, task runner, and click on refresh (left top button), and it will show you all tasks.
screenshot?
I'm not sure why but opening a cmd prompt at the directory containing gulpfile.js and running npm install has fixed it.
Perhaps someone wiser than I can explain why.
In Output window, make sure you select Task Runner Explorer for Show output from option. This was my problem why I didn't see the error logs from gulpfile. A rookie mistake.
I'm using Visual Studio Community 2019 Version 16.5.4.
I had the same problem and found the answer in the next link:
https://developercommunity.visualstudio.com/content/problem/961170/gulpfile-fails-to-load-after-upgrading-to-vs2019-1.html
Gulp uses node.js but it is important the version to be compatible. I've tried few versions and at the end version 0.12.7 works for me. But had to place absolute path to the place where that node version is installed in VS
Tools > Options > Projects and Solutions > External Web Tools
and move the path to the top. Placing the Path in environment variables and moving $(PATH) to the top didn't help in my case.

How do I restart the Task Runner within visual studio?

I have a gulp task to convert my .less file to css. This works fine until there is a syntax error in the less file. This causes gulp to crash and the Task Runner Explorer stops and I can't restart it. I have to unload/reload the project to change a syntax error.
Any ideas how to restart the Task Runner Explorer?
I'm using visual studio 2017 and in the task runner explorer you can right click the task I wan't to run and there you can press run to start that task
Pic: https://i.stack.imgur.com/gHYFy.png
Tasks can be started and restarted any time. Non-terminating tasks, like "watch" tasks, can be started multiple times and will run in parallel, unless terminated. One way to start a task is to double click on it in the list. There is also a "run" command in the context menu.
Terminating a task
I had this same question today, but for other reasons. Apparently closing the associated console window terminates the task.
I remember in some older version of Visual Studio I had to open Task Runner Explorer manually, otherwise the tasks would not start.
Regarding syntax errors
To save yourself from the trouble of restarting a task, add some type of error handling. There are probably more solutions to this, but I used this one. Here's a shorter version:
const gulp = require('gulp');
const plumber = require('gulp-plumber');
const lessCompiler = require('gulp-less');
const lessFiles = 'Styles/**/*.less';
const compileLessTaskName = 'compile-Less';
gulp.task(compileLessTaskName, function () {
return gulp.src(lessFiles)
// Calling plumber at the start of the pipeline. In case of error, this stops
// the task without killing the whole process.
.pipe(plumber(function (error) {
console.log(error.message);
this.emit('end');
}))
.pipe(lessCompiler())
.pipe(gulp.dest('wwwroot/css'));
});
gulp.task('watch', function (asyncCallback) {
gulp.watch(lessFiles, [compileLessTaskName]);
asyncCallback();
});

Sass - File to import not found or unreadable - yeoman webapp generator

I have annoying issue with sass plugin. I use yeoman webapp geneator with default configuration. When I want to build production files (gulp command) I get sass error "File to import not found or unreadable [...]". It works only at first running gulp command – dist folder build properly. But when I want to run gulp command again I keep receiving this error (I have to restart computer to make it works again – at first run :) ). On the other hand, running "gulp serve" (live preview) command gets this same error only at fresh start – when I modify some .scss, files compile properly.
This is the main SCSS file:
// bower:scss
#import "bower_components/slick-carousel/slick/slick.scss";
// endbower
#import '_reset', '_fontello', '_variables', '_helpers', '_basic',
'_widerScreens', '_carousel';
Yeoman webapp generator v.3.0.1
I found this solution. Try to reproduce.
https://garystanton.co.uk/gulp-sass-file-to-import-not-found-or-unreadable/

Gulp Sass Watch Run only changed and dependencies

I am trying to figure out how to watch SCSS files for changes and then run task (gulp-ruby-sass) only for those that changed(added,removed) and their dependencies (#import).
My watch task code is:
gulp.task('sass-watch', function(){
gulp.watch('dev/scss/*.scss', ['sass']);
});
My "sass" task code is:
gulp.task('sass', function(event) {
return sass('dev/scss/*.scss')
.pipe(changed('dist/css'))
.on('error', sass.logError)
.pipe(gulp.dest('dist/css'));
});
Sice sass take all files in folder anyway, this cannot work as I want to, but I noticed interesting thing. In my command-line I get following logs, when "sass-watch" is triggered by saving style2.scss file.
[13:38:01] Using gulpfile C:\1HLAVNI\Lukas\Webdesign\lukasradek\gulpfile.js
[13:38:01] Starting 'sass-watch'...
[13:38:01] Finished 'sass-watch' after 42 ms
[13:38:03] Starting 'sass'...
[13:38:03] write ./\style_combined.css
[13:38:03] write ./\style2.css
[13:38:03] Finished 'sass' after 416 ms
Something logs write style_combined.css and style2.css which is exactly how the dependencies are. (styl2.scss is imported to style_combined.scss). So this means, that something knows how the dependencies are set. Problem is, that I don't know what is that something. I cannot get that info elsewhere, only in final log. If I can get that info somewhere in code, I would be able to use for triggering the task only for changed files and dependencies.
Any idea, what might emit those logs?
I tried to strip my code to bare minimum and the logs are still present even when I remove the content of "sass" task. The logs disappeared after I removed ['sass'] trigger from gulp.watch.

Grunt/jshint - task watcher terminal output colors

I'm using Grunt task runner to build a web app on Windows 8.1, and have JShint task for checking Javascript. The Gruntfile was generated using the Webapp generator.
When JSHint detects an error, the output generated in the terminal window is colored navy blue - which is very difficult to read against the black background color of the terminal window.
I have tried to change the background color to something else, but while it fixes the JShint output, it makes other output hard to read.
So my question is; how do I change the color of the JSHint output?
I found this question when trying to do the same thing. One thing that you can try is using the no-color flag. Run like this:
grunt jshint --no-color

Resources