How to solve minified code outside of NODE_ENV === "production" in Mapbox-GL
hi. i add package for mapbox-gl in your template as i dont want to use leaflet. can you show me in gulp compile to change the NODE_ENV and make mapbox-gl can compile thier dependencies. i got error in css too.
Replies (7)
Hi Hassan,
At the moment, the gulp build tools don't provide a direct option to skip minification for specific CSS files, including the mapbox CSS file. When you execute the command "gulp --prod," all assets will be minified as part of the build process.
If you wish to exclude certain CSS files from minification, it will require customizing the gulp build configurations. This customization involves modifying the gulp tasks responsible for minification to exclude specific files.
Thanks
Hi Hassan,
Currently, the gulp build tools do not have an option to skip minification for specific CSS files. When you use the command "gulp --prod," all assets, including the mapbox CSS file, will be minified.
One possible solution is to import the mapbox CSS as a separate file from "mapbox-gl/dist/mapbox-gl.css" in your HTML file. By doing this, the mapbox CSS will not be included in the gulp build process, and it won't be minified.
Here's how you can do it:
1. In your HTML file, add a link to the mapbox CSS file:
<link rel="stylesheet" href="path/to/mapbox-gl/dist/mapbox-gl.css">Make sure to replace "path/to/mapbox-gl/dist/mapbox-gl.css" with the actual path to your mapbox CSS file.
2. Now, when you run "gulp --prod," the mapbox CSS will be loaded separately and won't be minified along with the rest of your CSS files.
If you have any further questions or need more assistance, feel free to ask. We're here to help!
Thanks
Yes. All fine for css. But js still got this error. How to make mapbox-gl.js skip to be minified on gulp prod?
Hi Hassan,
In the 'tools/gulp.config.js' file, could you please try to add the following configuration to include the Mapbox GL dependencies in your gulp compile:
mapboxgl: {
src: {
scripts: [
"{$config.path.node_modules}/mapbox-gl/dist/mapbox-gl.js"
]
},
dist: {
scripts: "{$config.dist}/plugins/custom/mapbox-gl/mapbox-gl.bundle.js",
}
}However, regarding the CSS issue with Mapbox GL, we haven't found a solution yet. When using 'mapbox-gl/dist/mapbox-gl.css', there is an error during the asset build process.
As a workaround, you can consider using the Mapbox plugin from a CDN to avoid the CSS error.
If Metronic Angular does not meet your project requirements, you have the option to request a refund through the Themeforest Refund Form. Rest assured that you are eligible for a 100% money-back guarantee.
Please let us know if there's anything else we can assist you with.
Thanks
Yup im already do that. For css i create scss for mapbox-gl base on default css and compile together. But when i do gulp --prod. How to skip mapbox from minified?
Hi Hassan,
you can make changes in the Gulp configuration to set the NODE_ENV environment variable. Here's how you can do it:
Open the Gulp configuration file (gulpfile.js or a similar file) in your project. You can try to set the NODE_ENV variable like this.
process.env.NODE_ENV = "development";Save the file and run the Gulp compile task again.
From the library, it seems they did not provide the dist folder. You could try to include the js/css bundle from mapbox-gl API instead of rebuild it.
<script src="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css" rel="stylesheet" />Thanks
sorry, unfortunately does not work. cause im adding mapbox-gl by using npm package. so when i minify the js. i will show up this error.
