How should one use Foundation with Laravel?
I thought I'd install Foundation in vendor folder with bower install foundation. This results into having a vendor/bower_components folder where I have Foundation and all required libraries such as jQuery.
What should I add in gulpfile.js for Elixir to interpret this correctly? It should be possible to
update Bower components
install new Bower packages
modify Foundation Sass variables without these being overwritten when updating
use Compass
In a non-Laravel project I would run the Ruby gem foundation new my_project and include the compiled files manually. However, in this case the command creates a lot of files not required to work.
Laravel Elixir includes Libsass so you won't need Ruby to compile your Foundation Sass files from Laravel. All you'll need is bower and Laravel Elixir. Also you don't need to copy files from bower_components folder to resources/assets folder.
First follow official instrucctions for installing Elixir.
Then create the file .bowerrc in the root of your Laravel project with this content:
{
"directory": "vendor/bower_components"
}
Then create the file bower.json in the root of your Laravel project with this content:
{
"name": "laravel-and-foundation",
"private": "true",
"dependencies": {
"foundation": "latest"
}
}
Then install both bower and foundation:
npm install --global bower
bower install # This will install Foundation into vendor/bower_components
Then create the file resources/assets/sass/_settings.scss file with this content:
// Custom settings for Zurb Foundation. Default settings can be found at
// vendor/bower_components/foundation/scss/foundation/_settings.scss
Then edit the file resources/assets/sass/app.scss file with this content:
#import "normalize";
#import "settings";
// Include all foundation
#import "foundation";
// Or selectively include components
// #import
// "foundation/components/accordion",
// "foundation/components/alert-boxes",
// "foundation/components/block-grid",
// "foundation/components/breadcrumbs",
// "foundation/components/button-groups",
// "foundation/components/buttons",
// "foundation/components/clearing",
// "foundation/components/dropdown",
// "foundation/components/dropdown-buttons",
// "foundation/components/flex-video",
// "foundation/components/forms",
// "foundation/components/grid",
// "foundation/components/inline-lists",
// "foundation/components/joyride",
// "foundation/components/keystrokes",
// "foundation/components/labels",
// "foundation/components/magellan",
// "foundation/components/orbit",
// "foundation/components/pagination",
// "foundation/components/panels",
// "foundation/components/pricing-tables",
// "foundation/components/progress-bars",
// "foundation/components/reveal",
// "foundation/components/side-nav",
// "foundation/components/split-buttons",
// "foundation/components/sub-nav",
// "foundation/components/switches",
// "foundation/components/tables",
// "foundation/components/tabs",
// "foundation/components/thumbs",
// "foundation/components/tooltips",
// "foundation/components/top-bar",
// "foundation/components/type",
// "foundation/components/offcanvas",
// "foundation/components/visibility";
Configure the file gulpfile.js with this content:
elixir(function(mix) {
// Compile CSS
mix.sass(
'app.scss', // Source files
'public/css', // Destination folder
{includePaths: ['vendor/bower_components/foundation/scss']}
);
// Compile JavaScript
mix.scripts(
['vendor/modernizr.js', 'vendor/jquery.js', 'foundation.min.js'], // Source files. You can also selective choose only some components
'public/js/app.js', // Destination file
'vendor/bower_components/foundation/js/' // Source files base directory
);
});
To build just follow official docs:
gulp # Run all tasks...
gulp --production # Run all tasks and minify files
gulp watch # Watch for changes and run all tasks on the fly
Your compiled files will be at public/css/app.css and public/js/app.js.
To update to the latest Zurb Foundation version just run:
bower update
Copy Fundation > scss folder to resources > assets folder, rename scss to sass, in your gulpfile.js add following
elixir(function(mix) {
mix.sass('foundation.scss');
});
Run gulp which will generate foundation.css file in public > css folder, include that file in your project.
For js files you can simple use something like this to copy the file
mix.copy('resources/assets/foundation/js/app.js', 'public/js/app.js');
Related
vite build uses esbuild to transform both the package dependencies (node modules) as well as the app source code into the target JavaScript specification, i.e. es2015.
I observe that vite/esbuild re-transform the entire sources in ./node_modules every time vite build is run.
How can this build stack be used to keep and reuse the previously transformed files, at least for the entire ./node_modules folder (given dependencies didn't change of course) so that subsequent vite build command invocations run significantly faster?
One way to improve the performance of subsequent Vite build command invocations is by using a caching mechanism. You can use a caching tool such as cache-loader or hard-source-webpack-plugin to cache the transpilation results of the node modules.
This will allow Vite to reuse the previously transpiled files for the node modules, as long as the dependencies haven't changed.
This can greatly speed up the build process.
You can also try to configure esbuild to only transpile the changed files instead of the entire codebase using the -w or --watch option when running the esbuild command. This option tells esbuild to watch the input files and only transpile the files that have been modified.
In Vite, you can configure the esbuild plugin to use the --watch option by adding the following to your vite.config.js file:
const esbuildConfig = {
watch: true,
};
module.exports = {
esbuild: esbuildConfig,
};
Examples :
cache-loader:
Install the package:
npm install cache-loader --save-dev
In your vite.config.js file, configure the cache-loader to be used for transpiling the node modules by adding it as a rule in the build object:
module.exports = {
build: {
...
css: {
...
},
js: {
...
loaderOptions: {
cache: true,
cacheDirectory: 'node_modules/.cache'
}
},
...
}
}
Run your build command ( vite build )
hard-source-webpack-plugin:
install the package:
npm install hard-source-webpack-plugin --save-dev
In your vite.config.js file, import the plugin and add it to the build.plugins array:
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
module.exports = {
build: {
...
plugins: [
new HardSourceWebpackPlugin()
],
...
}
}
Run your build command (vite build)
These examples, as you asked in your comment, are for Vite versions 2.5.8 and 3.x. However, in order to use them with Vite 3.x you need to update the build config to match the new format.
Please don't hesitate to write a comment if you still have a problem or questions!
I'm compiling Font Awesome Sass files to CSS, and it's putting a fonts folder with all the font files at the root level of my project, which I don't want.
Specifically, I installed the free Font Awesome npm package as follows:
npm install --save-dev #fortawesome/fontawesome-free
I then added the following to a vendor.scss file:
$fa-font-path: '../../../../public/fonts' !default;
#import '~#fortawesome/fontawesome-free/scss/fontawesome';
#import '~#fortawesome/fontawesome-free/scss/brands';
#import '~#fortawesome/fontawesome-free/scss/regular';
#import '~#fortawesome/fontawesome-free/scss/solid';
This is the directory structure of the project:
(Project root)
|---fonts (I don't want this one.)
|---node_modules
| |---#fortawesome
| |---fontawesome-free
| |---scss
| |---_variables.scss (Contains original $fa-font-path being overridden.)
|---public
| |---css
| |---fonts (This is the one I want.)
|---src
|---sass
|---vendor.scss (Contains new $fa-font-path definition and FA Sass imports.)
If I change $fa-font-path to '../../../public/fonts' !default; or '../../public/fonts' !default; then the build process errors out and won't compile, but '../../../../public/fonts' !default; puts all the Font Awesome font files in a fonts folder at both the project root level and in the public/fonts folder. Why is it doing this, and more importantly, how can I stop it from creating the fonts folder at the root level? Thank you.
One thing I probably should have mentioned in my question is that I'm using the laravel-mix npm module to wrap around Webpack and bundle all my assets.
Laravel Mix returns a promise from its chained calls that allows you to call then on the end of it, from which I was able to write some custom code in the then callback to always remove the fonts directory at the project root level.
Specifically, my Mix file became the following:
const mix = require('laravel-mix');
const rimraf = require('rimraf');
mix.js('src/js/app.js', 'public/js/')
.extract(['vue'])
.sass('src/sass/vendor.scss', 'public/css/')
.sass('src/sass/app.scss', 'public/css/')
.then(() => {
rimraf.sync('fonts');
});
rimraf is an npm module that basically allows you to run rm -fr on a directory. The module can be gotten here: https://www.npmjs.com/package/rimraf
I am using a css file that I import through npm. Respectively it is saved in my "/node_modules" directory.
I want to compile this file with my other scss files with elixir and am searching for a way, how to include it properly.
The options I could do is:
Rename the file from file.css to file.scss and import it in my app.scss
Copy the file.css file to my "resources/assets/" directory, rename it to scss and include it in my sass compilation like this:
Now I want to know, if there is a way to reference the file from the "node_modules" directory, without touching the file, because I want other people who download the project and use "composer install" and "npm install" to be up and running.
Or is the most common way to handle this, just to copy every required file from my "node_modules" directory to my resources/assets folder? Seems odd, since the included bootstrap file of the laravel framework is added just through an scss import in the app.scss file.
Now I want the same, but scss files can't import css files, which I have in my case, which would require for me to just rename it, which would not work out of the box on any other environment, since the "node_modules" directory is not included in version control.
Any recommendations, on what the best way is to compile css files in my "node_modules" directory?
If you look at the Elixir documentation you will notice there are many handy functions you can use. One of them is the mix.copy() function (you can copy single file or whole directory, for example whole jquery folder).
elixir(function(mix) {
mix.copy('node_modules/blabla/file.scss', 'resources/assets/sass/file.scss');
mix.sass(['file.scss', 'app.scss']);
});
This way each time you call gulp it will first copy the scss file from node_modules dir and then will compile sass.
Just add a dot before file path.
mix.scripts([
'./node_modules/autosize/src/autosize.js',
'./bower_components/jquery-tokenize/jquery.tokenize.js'
], 'public/js/app.js');
var elixir = require('laravel-elixir');
var path = require('path');
/*
|--------------------------------------------------------------------------
| 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.
|
*/
function node_modules(filename) {
return path.join('../../../node_modules/', filename);
}
elixir(function (mix) {
var base = [
node_modules('bootstrap-sass/assets/javascripts/bootstrap/tooltip.js'),
node_modules('bootstrap-sass/assets/javascripts/bootstrap/collapse.js')
];
});
i'm using Laravel 5.1, which ships with laravel elixir - a wrapper for gulp.
My gulpfile.js looks like this:
var elixir = require('laravel-elixir');
elixir(function(mix) {
mix.less('app.less');
});
And app.less looks like this:
#import "../bootstrap/less/bootstrap.less";
#import "variables";
I'm running gulp watch from the command line, but the problem is that it only reacts when changes are made to app.less and not the imported files (e.g. bootstrap.less).
How can I enable gulp watch to watch imported files also?
Thanks
Turns out that because ../bootstrap/less/bootstrap.less is above the root folder being watched, then it is not watched, despite it being included.
gulp watch watches all assets in the folder, it doesn't read the less files for includes.
So I made a library that I can bower install using a direct link. I can use this library from another internal application by adding the library name in the dependency of the bower.json file. When other internal application does a bower update, the changes I made on the library will be applied to their application. This part is working very well.
Now, I'd like the other software devs to have freedom to change the styles. They can create css file directly and that will work. However, it's a hackish route. I can provide them the same settings file that I use.
So i tried putting that file in the main section of the bower.json but wiredep is processing it. I put it in exclude and the error is gone when I run gulp.
"main": [
"dist/stylesheet.css",
"src/_settings.scss"
],
this is the code that prevented it from being parsed by wiredep
wiredep: {
directory: 'bower_components',
exclude: ['css/foundation.css','src/_settings.scss']
}
Am I right that I'll have to create a new gulp task and put 'src/_settings.scss' as gulp.src like this
gulp.task('sasstask2', function () {
return gulp.src('src/_settings.scss')
.pipe($.sass())
.pipe(gulp.dest('src/css'));
});
I also like the generate css to be injected to index.html but not sure how to do it? Will wiredep automatically inject it to index.html?