Consider the following minimal example:
$ yarn init
$ yarn add gulp gulp-cli --dev
and a minimal gulpfile.js file
var gulp = require('gulp');
gulp.task('default', function() {
console.log('Hello World!');
});
If I run ./node_modules/gulp-cli/bin/gulp.js I get the following output
[ ] Using gulpfile /tmp/test/gulpfile.js
[ ] Starting 'default'...
Hello World!
[ ] Finished 'default' after 152 μs
The timestamps are not displayed in my console. However, if I copy the content of the console and paste it into an editor of my choice, then I can see the timestamps. Hence, my terminmal must be part of the problem. I was wondering how I can debug it. Is there something special about the console output of gulp-cli and the timestamps? I already toggled through several fonts without luck. I also tried as shells bash and zsh. I'm using gnome-terminal.
This seems to be a bug/feature of the solarized theme. AFAIK the solarized theme won't be fixed and mocha and all the other console writers won't change their behavior just because of one theme.
As a starter have a look here or just google for gulp and solarized.
This is a bug in the solarized dark theme. It is in fact still an open issue: Color fix needed?
The best fix for this is imo to use the patched version found in mbadolato/iTerm2-Color-Schemes:
link to the actual "Solarized Dark - Patched.itermcolors"
Related
I can't seem to be able to resolve this, hoping someone might be able to help.
I have configured a file watcher to check for changes in a source directory. When a change is found, it runs the following tool: -
Program: C:\xampp\htdocs\currentproject\packages\node_modules\.bin\rollup
Arguments: -c C:\xampp\htdocs\currentproject\packages\source_directory\rollup.config.js
It is finding the rollup script OK but then I run into an issue as the rollup.config.js file calls babel as a plugin: -
import babel from "rollup-plugin-babel"
plugins: [
babel({})
],
babel.config.js: -
module.exports = {
presets: [
'#babel/preset-env',
'#babel/preset-react',
],
plugins: [
"#babel/plugin-proposal-class-properties",
"babel-plugin-styled-components"
],
}
It finds this config file OK but then I get the following error: -
(plugin babel) Error: Cannot find module '#babel/plugin-proposal-class-properties' from 'C:\xampp\htdocs\currentproject'
Now I understand how to configure external tools in PhpStorm but #babel/plugin-proposal-class-properties does not have a .bin/executable, only a .js file. I have also tried installing it globally via yarn and created a Windows environment variable to point to the global yarn directory but to no avail - I still get the same error.
Can anyone help me with this?
I have designed a gulp task for linting of .ts files present in my project. When I run it, it shows correct output on the prompt, but I am not sure how to redirect that output to a file so it can be printed so that I can handover the complete file to developer to correct the code accordingly.
my task looks like :
gulp.task('lint', function() {
gulp.src("src/**/**/*.ts")
.pipe(tslint({
formatter: "codeFrame",
configuration: "./tslint.json"
}))
.pipe(tslint.report({
configuration: {},
rulesDirectory: null,
emitError: true,
reportLimit: 0,
summarizeFailureOutput: true
}))
.pipe(gulp.dest('./Dest/reports'))
});
Could someone please suggest how do I achieve this.
See redirect via tee for some good examples of redirecting the stdout to a file. It could be as simple as
gulp lint | tee logfile.txt
With that you'll get both the output in the terminal as per usual and a copy in a file, that will be created for you if necessary. You don't say what terminal you are using though. if that doesn't work perhaps:
gulp lint 1> logfile.txt
See bash redirecting if you are using bash shell. Or SO: bash redirecting with truncating.
The linked question also has info on stderr if you need that.
Also for a quick way to copy output to the clipboard in Powershell:
gulp lint | clip
gulp lint | scb (doesn't add an extra newline at the end)
See pbcopy same as clip for macOS.
In general, see pbcopy alternatives on Windows
Problem: I'm learning ES6 through playing around with the code. I found that it's quite annoying to rebuild and restart the server every time I made any changes.
Goal: I want the changes that I saved to be reflected on the browser, without having to manually rebuild, and restart the server. What's the simplest way to do that?
Background:
The current script configuration in the package.json file is as below.
"scripts": {
"babel": "babel --presets es2015 js/main.js -o build/main.bundle.js",
"start": "http-server -p 9000"
},
I hope this is clear. Thank you!
I believe you must be using gulp tasks to run your project. If so, browser-sync + gulp.watch() is the best option for this. Below is what working for me, add something like below to your gulp task .js file. Whenever you change and save your es6 source code, it will automatically build and refresh the browser.
var gulp = require('gulp');
var browser = require('browser-sync').create();
// your default task goes here that should add "watch-changes" as dependency
// watch changes in js and html files
gulp.task('watch-changes', function() {
browser.init({
// initiate your browser here, refer browser-sync website
});
gulp.watch(
['build/main.bundle.js', 'webapp/**/*.html'],
browser.reload);
});
Check here neat example.
Refer browser-sync website and npm gulp-watch task
I'm having the following file structure:
/ src
-- app.less
/ gulp
-- index.js
-- gulpfile.js
This file structure is mounted in a vagrant box in /vagrant which means the path to app.less becomes /vagrant/src/app.less. Yes, I've checked this.
gulpfile.js
require('./gulp');
index.js
var paths = {
less: '/vagrant/src/app.less'
};
gulp.task('less', function () {
console.log('less function running');
return gulp.src(paths.less)
.pipe(less());
});
gulp.task('watch:styles', function () {
console.log('watch function running');
gulp.watch(paths.less, gulp.series('less'));
});
gulp.task('watch', gulp.parallel('watch:styles'));
gulp -v returns:
[10:02:05] CLI version 0.4.0
[10:02:05] Local version 4.0.0-alpha.1
gulp watch returns:
[09:45:20] Using gulpfile /vagrant/gulpfile.js
[09:45:20] Starting 'watch'...
[09:45:20] Starting 'watch:styles'...
watch function running
I've been using Gulp 4 for over 2 months without problems with the watcher. Since last week the watcher is not responding to files that are being changed. I've tried several editors, I've tried multiple paths like '/vagrant/**/*.less' and '../src/*.less' and even the absolute path to app.less '/vagrant/src/app.less', none of them worked.
After some research I found several issues on the github repo of Gulp 4 about the watcher. Yet, I can't figure out what the problem is. Maybe I'm overlooking an error in my code or something new in the docs, but I'm trying to solve this since yesterday morning without any luck.
It appears you're using Vagrant. If you have Gulp running on your Vagrant machine instead of on the host it won't detect any changes to files that you make on the host. This is because the events that notify the OS about filesystem changes don't propagate into the VM.
If this is the case, the solution is to simply run Gulp wherever you actually make changes to the files (i.e. if you make the changes on the VM, run it on the VM, if you make changes on the host, run Gulp on the host).
Also maybe make the path relative, instead of tying your implementation to your Vagrant box. i.e. less: './src/app.less'.
I have the following set up within the assets/sass folder:
app.scss
- partials
_settings.scss
_main.scss
Now the issue is that when i run gulp watch, it runs all ok as a normal gulp, but then it just repeats the sass process, even when I have not touched anything, have anything in the files etc
It constantly runs the following over and over, sometime constantly or after a few seconds: The below is the loop thats is spat out within the terminal.
[20:49:30] Starting 'sass'...
[20:49:30] Running Sass: resources/assets/sass/app.scss
[20:49:30] gulp-notify: [Laravel Elixir] Sass Compiled!
[20:49:30] Finished 'sass' after 23 ms
Now doing several tests to see whats causing this, if i have DONT have any files with in the partials directory and just have code within the app.scssthen the gulp watchruns and simply waits for changes.
But as soon as I add a file within the sass folder or in the partials folder the gulp watch runs as I would expect, BUT this then never stops running the script...
I am using a simple elixir set up, for now:
elixir(function(mix) {
mix.sass('app.scss', 'public/js/main.css');
});
Any ideas why this is.
Running on a Homestead VM latest
Using latest elixir version
Laravel v.5.1.13
EDIT: Update
I was doing this outside the VM so thought to try to run this through the VM and it seems to be OK and run as expected...
I am running this outside the VM and so when run within the VM its runs as expected. But i do get the Error in plugin 'gulp-notify' not found: notify-senderror, but i can turn this off via adding process.env.DISABLE_NOTIFIER = true; to the top of the gulp file.