I am trying to deploy my application, which works fine locally. When I use gulp build it says I have all of the files I need. When I do firebase deploy it says that everything uploaded. However, when I use firebase open it makes
it gives me the following 404 errors.
Here is what comes up when I do gulp build and firebase deploy
I can send the gulp-babel.js file upon request. Thanks in advance for looking.
If I am understanding you correctly, you are having a problem with your gulp-babel.js file. The gulp imagemin plugin is probably what you need.
https://www.npmjs.com/package/gulp-imagemin
Then somewhere in that file make sure you are creating something like this.
gulp.task('images', () => {
return gulp.src('app/images/*')
.pipe($.imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}]
}))
.pipe(gulp.dest('dist/images'));
})
See this if you have gulp-load-plugins: gulp-load-plugins not loading plugins
Related
I have laravel Vue app and it works perfectly with chrome and firefox. but it doesn't work on Edge or IE11 and the console shows error on arrow function!?
How to compile or transpile to es5 with laravel mix and webpack?
could you show the correct configuration for webpack.mix.js?
tnx alot
UPDATE February 2020
If anyone still need help with this, mix already provide a babel compilation to es5:
A slight variation of mix.scripts() is mix.babel(). Its method
signature is identical to scripts; however, the concatenated file will
receive Babel compilation, which translates any ES2015 code to vanilla
JavaScript that all browsers will understand.
You can use it like this:
mix.babel(['public/js/es6file.js'], 'public/js/app.es5.js')
DOCS
In order to compile your es6 code to es5 follow the following steps:
1) install the babel-env preset
npm install #babel/preset-env --save
And then declare it in your .babelrc in the root directory:
{
"presets": ["#babel/preset-env"]
}
2) compile your code using
npm run dev //for dev environment
or
npm run prod // for production environment
after a lot of search, I've found out that this Vuecomponent causes the error "https://github.com/godbasin/vue-select2" how can I compile it to es5.
the edge console error:
Expected identifier, string or number
and the corresponding line that it shows is this:
setOption(val = []) {
this.select2.empty();
this.select2.select2({
-----> ...this.settings,
data: val
});
this.setValue(this.value);
},
sorry for taking your time
I recently started learning nextjs/react and got stuck following the tutorials on the official nextjs website when trying to export my app into a static site:
I'm using sass for styling the app, and when trying to run the npm run build script, it throws me an error saying
Module parse failed: Unexpected token (1:0) You may need an
appropriate loader to handle this file type.
I've checked through my code structure & setup and couldn't figure out what went wrong. It looks like the error has something to do with the sass loader? Any pointers would be greatly appreciated.
below are a few screenshots of my setup.
You need to add sass-loader dependency.
npm i -D sass-loader
and then add it like this:
config.module.rules.push(
{
test: /\.s(a|c)ss$/,
use: ['babel-loader', 'raw-loader',
{ loader: 'sass-loader' },
],
},
);
You have two module.exports in your next.config.js which is invalid.
Perhaps try passing the config to withSass and exporting that...
module.exports = withSass({ exportPathMap: /* ... etc ... */ })
I'm quite new to managing assets in any other way than a direct download, and copying the required files to a designated folder and simply referencing this. However, I wish to keep my assets "close to the framework" and therefore hope to get some clarity regarding how it is done in Laravel.
I am using Laravel v5.4 and NPM v5.3.0
I want to use the Sweet Alert library and so did
npm install sweetalert
which placed the files in the node_modules directory and package.json as expected
This is where the confusion begins. I then did
npm install --no-bin-links
(the no-bin-links flag recommended for Windows hosts by the docs)
and
npm run dev
thinking this would compile/minify the library to my app.js or vendor.js (which does not exist), or at least do some magic to let me use the library.
The output states:
DONE Compiled successfully in 8551ms
which suggests to me that I have simply failed to include the Sweet Alert library in this process.
PHPStorm does suggest the library as an auto-complete option, but the application fails to load the library, stating in the JS Console on load:
jQuery.Deferred exception: swal is not defined ReferenceError: swal is not defined
I have also tried "require"-ing the library in bootstrap.js, stating:
window.swal = require('sweetalert');
or simply
swal = require('sweetalert');
Where 'sweetalert' again is suggested by the IDE autocomplete.
Here is how I attempted to use it:
$( document ).ready(function () {
alert("Hello!"); //works
swal({
title: "Hello!",
text: "Hellooo",
type: "error",
confirmButtonText: "OK THEN"
});
});
Which throws the error mentioned above.
I also tried initializing using
window.swal({...
sweetAlert({...
which fail.
What am I missing? And how are you supposed to use NPM packages in a Laravel project/what are the best practices?
Any help is greatly appreciated.
You need to add a reference to your sweetalert vendor file in your webpack.js config file.
mix.scripts('/vendor/..../sweetalert2.min.js', '/public/js/sweetalert.min.js');
That will copy it from your vendor folder to your public folder when you run
npm run dev
I have elixir set up to watch changes in .scss files, but changes in _partials.scss are not being watched.
elixir(function(mix){
mix.browserSync([
'resources/assets/bower/bootstrap-sass/assets/**/*'
], {
proxy: 'site.app',
reloadDelay: 200
});
});
When I edit the bootstrap/_variables.scss, gulp does compile those sass changes. If I exit gulp watch, and gulp watch again, then those changes appear.
So I know its compiling correctly, its just somehow not watching those partial files.
Any ideas? Thanks in advance!
This is already in a pull request on the repo. (https://github.com/laravel/elixir/pull/377)
Until fixed, I'm gonna apply the same fix for now as Ricardo (see https://github.com/ricardogobbosouza/elixir/commit/948abb930e0d822a6fa6a8531d52a8d51632c59b)
I'm making a simple html and CSS app. I need to my SASS changes to show up on the website LIVE as im developing.
And once all the SASS and development is complete I will run webpack -b and webpack should convert the SASS to CSS.
I'm sure someone has done this before. Thanks.
It looks like the problem stems from wrong output.publicPath config in webpack.config.js file. In order for live-reload to work, requests going to webpack bundles (e.g. app.css, app.js) should be handled by webpack-dev-server. For the repository you're referring to, this could be done by setting output.publicPath to "/build".
Run webpack-dev-server --inline on the command line after changing config file and then go to http://localhost:8080. Now the page should reload everytime you change and save a file.