Laravel Elixir 6 getting exception on "gulp watch" - javascript

When I try to run gulp watch, I'm getting this error:
stream.js:74
throw er; // Unhandled stream error in pipe.
^
Error: ENOENT: no such file or directory, stat 'XXXX\public\build\css\client-18724fe72d.css'
at Error (native)
I tried to leave the client.scss file empty, and the error disappeared. I found out that the errors sometimes is appearing when I have these lines in my client.scss:
// Pages
#import 'pages/client/auth';
#import 'pages/client/normals';
#import 'pages/client/orders';
I've already checked each one of them, and there's nothing wrong with the syntax or something like that. Even more, when I run gulp, it works without any errors.
This is my gulpfile.js:
const elixir = require('laravel-elixir');
elixir(mix => {
mix
.sass('app.scss')
.sass('client.scss', 'public/css/client.css')
.sass('panel.scss', 'public/css/panel.css')
.copy('resources/assets/fonts', 'public/build/fonts')
.copy('resources/assets/images', 'public/build/images')
.webpack('app.js')
.webpack('panel.js')
.version(['css/app.css', 'css/client.css', 'css/panel.css', 'js/app.js', 'js/panel.js'])
});
This is the file structure:
Is there something that I'm doing wrong here?

As you can see in my gulpfile.js, I copied files/folders to /build folder which is probably a problem on Laravel Elixir 6, and when I think about it now, it's sounds a bad approach too.
So what I did to fix the issue was:
removing these lines from gulpfile.js:
.copy('resources/assets/fonts', 'public/build/fonts')
.copy('resources/assets/images', 'public/build/images')
placing the fonts and images folders into the storage/app/public
running php artisan storage:link (storage:link artisan command)
changing the paths in the assets files to the new directory
running gulp
And it fixed my problem. Now I can do gulp watch again.
Credit to ejdelmonico on laracasts.

Throwing my two cents in here. I had the same issue and it went away as soon as I stopped using the starting / relative path option, and used full relative paths (relative to /resources) instead.
So instead of:
mix.styles([
'vendors/jquery-steps/demo/css/jquery.steps.css',
'vendors/pace/pace-minimal.css',
'vendors/bootstrap/dist/css/bootstrap.min.css',
'../node_modules/sweetalert2/dist/sweetalert2.min.css',
], 'public/css/vendors.css', 'public');
This worked, and gulp watch ran again:
mix.styles([
'../../../public/vendors/jquery-steps/demo/css/jquery.steps.css',
'../../../public/vendors/pace/pace-minimal.css',
'../../../public/vendors/bootstrap/dist/css/bootstrap.min.css',
'../../../node_modules/sweetalert2/dist/sweetalert2.min.css',
], 'public/css/vendors.css');
It's not pretty, but it works.

Related

Jekyll Converters::Scss build issue: No such file or directory # dir_chdir - /github/workspace/docs

I keep getting this error when I try to publish a site to GitHub pages.
Conversion error: Jekyll::Converters::Scss encountered an error while converting 'assets/css/style.scss':
19
No such file or directory # dir_chdir - /github/workspace/docs
When I try to change the folder to root, it publishes the readme.md file. When I change it to doc, I get this error.
The file runs fine locally. I don't know what the problem is. I searched online but did not find a solution that helps. Any help works.
The error is on my main branch when I try to publish it.
Links to the repo and the error on GitHub:
https://github.com/Rsmdo/dadport2
https://github.com/Rsmdo/dadport2/tree/main
I tried making a new repo but this did not solve the issue, also I went through the code to see if there were any parsing errors but there were none.
https://talk.jekyllrb.com/t/cannot-deploy-site-via-github/6883/11 says that "Jekyll can’t find the files the theme uses". The page also suggests using root instead of docs or any folder.
There are options to set the directory where Jekyll writes files to and reads file from, for example: bundle exec jekyll s -s /docs, which leads to errors in my case due to the non-existing path based on the root path (the path can also be relative I guess).
See Source: /docs, the other path do not show the docs path though.
PS C:\Users\User\usr.github.io> bundle exec jekyll s -s /docs
Configuration file: none
Source: /docs
Destination: C:/Users/User/usr.github.io/_site
Incremental build: disabled. Enable with --incremental
Generating...
Error reading file C:/Users/User/usr.github.io/_layouts/archive.html: No such file or directory # rb_sysopen - C:/docs/Users/User/usr.github.io/_layouts/archive.html
This may help:
https://jekyll.one/pages/public/manuals/jekyll/user_guide/configuration/
https://github.com/burtlo/jekyll-core/blob/master/site/docs/configuration.md

Relative Module Error while running webpack/vue-loader

I'm basically trying to run this open source code on my local server:
https://github.com/darosh/oax
I've managed to get to run node build/dev-server.js (alias is npm run webpack:dev), and got these errors:
build [== ] 10%> Starting dev server...
build [================== ] 91%
ERROR Failed to compile with 5 errors 15:58:00
These relative modules were not found:
../../../plugins/dagre.js in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./components/elements/api/PathChart.vue
../../../plugins/graphlib in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./components/elements/api/PathChart.vue
./icons-bundle in ./plugins/icons.js
./plugins/dagre.js in multi ./build/dev-client ./plugins/lodash.js ./plugins/d3.js ./plugins/dagre.js ./plugins/graphlib.js axios
./plugins/graphlib.js in multi ./build/dev-client ./plugins/lodash.js ./plugins/d3.js ./plugins/dagre.js ./plugins/graphlib.js axios
Build completed in 15.348s
Does anyone have any idea what's wrong?
Figured out the problem. The gitignore file was ignoring some packages. In the plugins folder, there were three files that end in .esm.js. I converted those to .js and the file ran smoothly

Gulp error in WebStorm: Failed to list gulp tasks

My WebStorm has stopped read and run gulp tasks.
It was working fine until last Friday.
This is an error that appears in console:
Failed to list gulp tasks in questionary/gulpfile.js: Failed to parse
JSON -> Unterminated array at line 1 column 5 path $[1] * Edit
settings
$ /usr/local/bin/node
/Users/rkon2006/Projects/My/questionary/node_modules/gulp/bin/gulp.js
--no-color --gulpfile /Users/rkon2006/Projects/My/questionary/gulpfile.js --tasks-json
[17:26:14] Using gulpfile ~/Projects/My/questionary/gulpfile.js
[17:26:14] Starting 'default'... Default task...
This is the code from my gulpfile.js (it doesn't start even with this code):
var gulp = require('gulp');
gulp.task('default', function () {
console.log('Default task...');
});
Process finished with exit code 0
I use gulp v4.0, node js 4.1.1 (tried defferent versions from 0.10.28 up to 4.1.1) and npm 2.14.4.
Do you have any ideas about this?
I have the same problem with webstorm after install a updated version of node.
The solution for me is the following:
In the block Gulp where webstorm show the list of task, click the cog icon and select gulp settings, in the section "Gulp package" add the path to the local gulp package(the gulp inside the node_modules in your project).
Example of path: yourproject\node_modules\gulp
Update node version and npm itself, that did the trick.
The problem is that some text is logged to standard output stream when evaluating gulpfile.js, but before running any gulp task (i.e. logging happens outside of gulp tasks);
possible workarounds:
Avoid logging anything to standard output stream outside of gulp
tasks.
Or
Don't log to standard output stream if it's started for listing
tasks, like:
if (!isListingTasks()) {
console.log('[my info]');
}
function isListingTasks() {
return process.argv[process.argv.length - 1] === '--tasks-json';
}
I was having same problem and it was fixed by selecting different Node Interpreter version e.g. in the below image I selected 8.9.2 and then clicked small refresh button in Gulp window and the issue was fixed.

node app with coffeescript and gulp

I'm pretty new to node, but I'm trying to dive in by taking a framework that's already built (skeleton) and converting it to coffeescript.
So this has a config folder, with config.js, passport.js, and utils.js files... also, obviously, in the root, app.js. He's using gulp, so there's a gulpfile.js. I wanted to convert these files to coffeescript, and not just the user js files. Is that bad practice? I've added gulp-coffee as a devDependency, and coffee-script as a dependency.
Upon rebuilding the aforementioned files, and renaming them...
[12:23:40] 'coffee' errored after 61 μs
[12:23:40] Error: Invalid glob argument
at Gulp.src (/Users/brett/Dropbox/Apps/mean_projects/skeleton/node_modules/gulp/node_modules/vinyl-fs/lib/src/index.js:17:11)
... and further down
[gulp] [nodemon] starting `coffee --debug app.coffee`
/Users/brett/Dropbox/Apps/mean_projects/skeleton/config/config.coffee: line 1, col 1, Expected an assignment or function call and instead saw an expression.
/Users/brett/Dropbox/Apps/mean_projects/skeleton/config/config.coffee: line 1, col 13, Missing semicolon.
/Users/brett/Dropbox/Apps/mean_projects/skeleton/config/config.coffee: line 3, col 1, Expected an identifier and instead saw '#'.
That shows config.coffee, and there are blocks of errors for each of the files that I converted from js to coffee (app, app_cluster, gulpfile, utils, passport, etc).
Any help on the topic would be good... I've been reading quite a few articles (some that hate coffeescript) but nothing that really shows how to handle this.
If you use gulp 3.7+, then gulpfile.coffee is supported out of the box. No need to do any extra setup.
If you have to use an earlier you can bootstrap coffeescript, by just putting this in it:
// Note the new way of requesting CoffeeScript since 1.7.x
require('coffee-script/register');
// This bootstraps your Gulp's main file
require('./Gulpfile.coffee');
Then you can put you setup in gulpfile.coffee.
Is that what you meant?

test not running on karma/jasmine/require.js 'There is no timestamp for *lib*!' error

I change the code, extend some functionality and add new unittest for that. Now, when I run my unit tests with karma (test framework - jasmine), it throw me an error
'There is no timestamp for /libs/angular-bootstrap/ui-bootstrap-tpls.js!'
Uncaught Error: Script error for: angular-bootstrap
http://requirejs.org/docs/errors.html#scripterror
at http://localhost:9876/base/node_modules/karma-requirejs/lib/require.js?1379984163000:138
What I'm doing wrong?
It was my mistake completely. when using karma-requirejs you have main-test.js file where configure how to require.js get the files. I add reference to angular-bootstrap with mistake, that's why require.js couldn't find this file and throwing this mistake. So in my case this error means wrong file name provided.
It can be because it cannot access your source file. You should configure karma to serve scripts where require will look for them.
For example have the config in the karma conf
files:[{pattern: 'node_modules/**/*.js', included:false}]
The question is old, the OP already solved his problem by now, but I'll add my two cents:
From the error message (end of the first error line) we can conclude that you were including a paths (or deps) file in main-test.js with the .js extension.
In RequireJS, you need to call the file names without the extension, so your paths (or deps) would look more or less like this:
paths: {
'ui-bootstrap': 'libs/angular-bootstrap/ui-bootstrap-tpls' // <- without the extension
}

Categories

Resources