I'm working on my own differently structured version of Laravel, I've got the PHP end of things working but I'm having a problem with Elixir.
I've seen that supposedly setting elixir.config.assetsDir to a different path should do it but it doesn't seem to work for me? Any thoughts
My assets are in the following file structure
support
resources
assets
sass
js
And my gulp.js file (still in the project parent folder) looks like so:
var elixir = require('laravel-elixir');
/*
|--------------------------------------------------------------------------
| Elixir Asset Management
|--------------------------------------------------------------------------
|
| Elixir provides a clean, fluent API for defining some basic Gulp tasks
| for your Laravel application. By default, we are compiling the Sass
| file for our application, as well as publishing vendor resources.
|
*/
elixir.config.assetsDir = "./support/resources/assets/";
elixir(function(mix) {
mix.sass('app.scss');
});
Running gulp simply produces
[gulp] Starting 'default'...
[gulp] Starting 'sass'...
Fetching Sass Source Files...
- resources/assets/sass/app.scss <-- Not Found
Saving To...
- public/css/app.css
[gulp] Finished 'default' after 460 ms
[gulp] Finished 'sass' after 468 ms
I can fix the issues by giving the full path of app.scss but ultimately I'd rather not as I plan to reuse this framework setup a lot.
Starting elixir version 3.0, I believe it is now called assetsPath:
elixir.config.assetsPath = './support/resources/assets';
Related
I want to take all json files from path resources/json/ and do versioning so that when json files changed user can reload it, but I dont know which function I have to use
I changeed webpack.mix.js:
mix
.setPublicPath('public/build')
.setResourceRoot('build')
.js('resources/assets/js/app.js', 'js')
.sass('resources/assets/sass/app.scss', 'css')
//.json('resources/assets/json/*', 'json')
.version();
but I dont know how to copy from dir into another dir and in write mix-manifest file write all json files with hash
I have done this:
let mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix
.setPublicPath('public/build')
.setResourceRoot('build')
.js('resources/assets/js/app.js', 'js')
.sass('resources/assets/sass/app.scss', 'css')
.copyDirectory('resources/assets/json', 'public/build/json')
.version(['public/build/json']);
and two times npm run dev, because mix is not waiting for copying files, .then() not helped, so two times npm run dev.
How do you include /node_modules in a laravel 5.5 application, i referenced this https://laravel.com/docs/5.5/mix
i can do this
npm install angular-moment moment --save
and it will make a /node_modules directory, however laravel ignores it
lets say i want to do this
<script src="node_modules/moment/moment.js"></script>
it will not work, it will show an error
i currently have this in my webpack, what will be the best way to integrate it ?
let mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
Just include it in your app.js so it is complied in...
var moment = require('moment');
Then access it as moment... like
moment().format();
I am attempting to use normal JavaScript with NPM and WebPack.
webpack.mix.js
let mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js(['resources/assets/js/app
.js'], 'public/js').version()
.sass('resources/assets/sass/app.scss', 'public/css').version();
In my app.js I added a simple test function:
var sayHi = function sayHi()
{
alert('hi');
};
And I included it in a HTML page, and called
<script>
sayHi();
</script>
However, I receive the error:
Uncaught ReferenceError: sayHi is not defined
I believe that WebPack etc. hides it all from the global namespace. I have ensured the compiled JavaScript with npm run watch has been included.
I am looking for insight on how to proceed.
I tried many times searched all over but not solved i hav updated npm , gulp version
`$ gulp
[06:53:53] Using gulpfile d:\xampp\htdocs\l5\gulpfile.js
[06:53:53] Starting 'default'...
enter code here[06:53:53] Starting 'sass'...
Fetching Sass Source Files...
- resources\assets\sass\app.scss <-- Not Found`
Saving To...
- public\css\app.css
[06:53:53] Finished 'default' after 617 ms
[06:53:53] Finished 'sass' after 626 ms
app.scss is on resources/asset/saas
bellow is my gulp file
elixir(function(mix) {
mix.sass([
'app.scss',
], 'public/assets/css');
});
i want to use saas and when it will run it shows above error
if anyone know how to solve plz help
elixir not find the file
resources\assets\sass\app.scss <-- Not Found`
the file is "sass" not "saas"
rename your file "saas" to "sass"
I am trying to use Laravel elixir to compile a simple sass file app.scss which is in my resources > assets > sass directory. I have node, gulp and elixir installed and my gulpfile.js file looks like this...
var elixir = require('laravel-elixir');
/*
|--------------------------------------------------------------------------
| Elixir Asset Management
|--------------------------------------------------------------------------
|
| Elixir provides a clean, fluent API for defining some basic Gulp tasks
| for your Laravel application. By default, we are compiling the Less
| file for our application, as well as publishing vendor resources.
|
*/
elixir(function(mix) {
mix.sass('app.scss');
});
However when I am running gulp I am getting some strange errors. I first tried with a simple sass file with no includes...
body {
padding-top: 40px;
}
body, label, /checkbox label {
font-weight: 300px;
}
I am getting this error from my terminal...
[14:44:40] Starting 'default'...
[14:44:40] Starting 'sass'...
[14:44:41] Finished 'default' after 1.45 s
[14:44:41] gulp-notify: [Laravel Elixir] Error: invalid top-level expression
[14:44:41] Finished 'sass' after 1.47 s
[14:44:41] gulp-notify: [Error running notifier] Could not send message: not found: notify-send
And when I add #include 'pages/home'; to the top of my app.scss file (and pages > home.scss does exist) I get the following error...
[14:38:03] Starting 'default'...
[14:38:03] Starting 'sass'...
[14:38:04] Finished 'default' after 1.42 s
[14:38:04] gulp-notify: [Laravel Elixir] Error: invalid name in #include directive
[14:38:04] Finished 'sass' after 1.44 s
[14:38:04] gulp-notify: [Error running notifier] Could not send message: not found: notify-send
I know the notifier error is because I am running it in a VM so that doesn't bother me but the previous errors are resulting in no sass being compiled at all.
If it helps I'm running Laravel 5 on Mac with OSX Mavericks using homestead as an environment.
The strange thing is that I had this working before and I just started a new Laravel project and all of a sudden it wont work. Does anyone know what's going on?
The first error is probably caused by the / in body, label, /checkbox label { Remove the slash and it should work.
The second one is because you are using #include when you actually want to #import.
#import is for including other sass/css files. #include is for using mixins.