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.
Related
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 new to gulp plugins and am trying to get sourcemaps to work
file structure
css/
sass/
theme/
_some-style.scss
_some-style-2.scss
_some-style-3.scss
style.scss
style.css
style.css.map
In my style.scss file I have
#import "theme/some-style";
#import "theme/some-style-2";
#import "theme/some-style-3";
great so I am only getting, _some-style-3.scss to appear in my dev tools when I inspect. I know I have a path issue here but not sure how to fix it.
Gulp file:
gulp.task('sass', function () {
return gulp.src(css/sass/theme/**/*.scss)
.pipe(sourcemaps.init())
.pipe(sass.sync().on('error', sass.logError))
.pipe(sourcemaps.write())
.pipe(gulp.dest(css));
});
Your input is a bit confusing as you have different paths in your file structure, your import statements, and your gulp file. I'll base my answer on the path you provided in the file structure.
Your file structure says "theme" is directly under "sass", so your #import statement should be #import "theme/_various-scss-file.scss"
You need to specify the scss file in gulp.src not just the path, for example gulp.src('css/sass/style.scss'). And output path, according to your file structure and assume your gulp file is in the same folder as the css folder, should be gulp.dest('css').
Figured it out. Unrelated to paths. I didn't include that I was also compressing my scss first and that is interfering with the sourcemapping
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 want to use Laravel Elixir to minify my css/files files. But I don't want to use the mix-methode and merge them. All I want is to generate a "custom.min.js" file from my original "custom.js". Is there a way to do this with Elexir?
EDIT:
To make it a bit clearer: My biggest issue is that I have two folders in "resources/assets": js and css. So I basically want to minify all files in there and have them minified in "public/js" and "public/css".
Quote from the Laravel documentation:
Note: All tasks will assume a development environment, and will exclude minification. For production, use gulp --production.
This means if you want the files to be minified run gulp --production instead of just gulp. It's a better practise than enabling compression directly in the gulp file and makes sure you can debug your compiled files while developing the application.
If you want them to be placed in public/assets/css use the path as a second parameter:
mix.less('app.less', 'public/assets/css');
gulp --production.
Jeffrey way replied on the issue here: https://laracasts.com/discuss/channels/elixir/elixir-doesnt-minify
Or you can find it on the documentation. Enjoy coding!
If you just want to copy .css files, without using LESS or SASS, and don't want to combine files (i.e. you want something like a copy() method with minification ability) you can use method for combining, styles(), by calling it for every .css file and passing filename string without array, for example:
mix.styles('some.css');
mix.styles('node_modules/bootstrap/dist/css/bootstrap.css', null, './');
Same can be done for .js files using scripts() method:
mix.scripts('some.js');
mix.scripts('node_modules/bootstrap/dist/js/bootstrap.js', null, './');
And then you can use gulp (doesn't minify, creates .map files) or gulp --production (creates minified files) as mentioned in above posts.
Straight from the Laravel/Elixir docs:
Elixir is built on top of Gulp, so to run your Elixir tasks you only need to run the gulp command in your terminal. Adding the --production flag to the command will instruct Elixir to minify your CSS and JavaScript files:
Run all tasks... gulp
Run all tasks and minify all CSS and JavaScript... gulp --production
docs: https://laravel.com/docs/5.3/elixir#running-elixir
There seem to be a few plugins...and I'm using webstorm file watcher which also precompiles individual files.
I think this may not be the best way to setup a watcher.
I'm running this command now:
sass --no-cache --update --stop-on-error --trace ./app/sass:./app/css
It seems to conflict with the webstorm file watch, which appears to be appending everything to base.css. Can someone tell me what exactly this command is doing vs. a sass filewatcher in webstorm?
What's the best way to work with sass:
precompile my sass to css using a grunt build task
and have file watchers while developing?
My base.sass looks like this:
#charset "UTF-8";
/* DO NOT EDIT FILES IN ./css. See ./sass instead */
#import "page";
#import "modal";
#import "nav";
#import "tables";
#import "forms";
#import "message";
Your command just compiles all files in diretory ./app/sass to CSS and put the resultant files to ./app/css. Default file watcher runs the following command:
sass --no-cache --update $FileName$:$FileNameWithoutExtension$.css
i.e. it takes the current file (the one that has been changed) as input and creates a .css in the same directory. But, as you have 'track only root files' option on (default settings), the watcher creates css for the root file only - the one that reference other files via imports. You can turn this option off to change the current behavior ans get css generated for other files as well.