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
Related
i would like to add tailwindcss to a new rails 5.2.5 project. since i like tailwind but know about the heavy weight, i also would like to have a purge css module.
i followed the instructions of several set up guides, as well as the official documentation. also i tried to install tailwind via gems (https://github.com/rails/tailwindcss-rails, https://github.com/IcaliaLabs/tailwindcss-rails) but since all the solutions out there are based on rails 6 nothing works. also i have no idea what webpack actually does, so i would rather dont use it but instead use tailwind via the asset pipeline, but also with class purging.
i am a bit lost during the build process. is there a convenient guide on how to set up tailwind at rails 5 instead of rails 6? i really enjoy the automagical approach of most gems but cant find a convenient solution.
thank you!
It is possible to add tailwind to the Asset Pipeline without using Webpacker, and without tailwindcss-rails either.
If you use the new Tailwind CLI you can build tailwind classes, connect them to the asset pipeline and purge unused classes on the fly.
The general instructions for using the Tailwind CLI are in the installation section which is currently in their docs you will need node installed to have access to the npx command.
Once you understand the general approach use the following steps:
Update the generated tailwind.config.js to turn on Just In Time compiling and to configure class purging in rails
module.exports = {
mode: 'jit',
purge: [
'./app/**/*.html.erb',
'./app/helpers/**/*.rb',
'./app/assets/javascripts/**/*.js'
],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {},
plugins: [],
}
Make sure that you add all the path's where you will declare Tailwind classes otherwise purge may remove classes that you are using (read Writing purgeable HTML tailwind docs for more details)
During development run the watcher process so that your CSS is being continually built based on the HTML you write
npx tailwindcss --no-autoprefixer -o ./vendor/assets/stylesheets/tailwind.css -w
Note that I am placing the generated tailwind styles into vendor/assets but you can place them anywhere the asset pipeline looks for css.
Also, I still use autoprefixer-rails gem so that I can apply the correct prefixes across both tailwind and my project css. In this case you need to set --no-autoprefixer in the tailwind watch command so you are not running it twice.
Then import the tailwind styles into your app/assets/stylesheets/application.scss with #import 'tailwind'
Provided the file is in your assets path the styles will be imported.
Make sure you have a deployment option to re-compile your tailwind.css file as the JIT compilation may is not guaranteed (this is suggested by Tailwind). This will depend on how you deploy but I run the following during deploy:
NODE_ENV=production npx tailwindcss --no-autoprefixer -o ./vendor/assets/stylesheets/tailwind.css
That should be it.
I run this approach with Rails 6.1 but it doesn't use anything special and I expect it should run with Rails 5 projects.
Finally, you may be interested in using the Tailwind #apply feature to set some default styling with Tailwind classes. This is also possible with this setup. To do it you need to have an extra file for the base classes which is used during the Tailwind compilation. The important thing here is not to add this file into your application.scss as the Asset Pipeline will not understand #apply.
I add the few styles that I do to a app/assets/stylesheets/tailwind/base.css file.
I then amend the compilation watcher to npx tailwindcss --no-autoprefixer -i ./app/assets/stylesheets/tailwind/base.css -o ./vendor/assets/stylesheets/tailwind.css -w which will gather all the base styles set and compile them into the tailwind output file.
Good luck with it.
As part of my build script using Laravel Mix, I'm needing to make a modification to one of the files inside the resources/assets/sass directory. The problem is that running npm run watch will then modify this file and the watcher re-runs the build process, causing an infinite recursive loop.
Is there any way to exclude an individual file from being watched for changes?
For example:
webpack.mix.js
// Do something with `resources/assets/sass/_modules.scss` first, then continue
mix.sass('resources/assets/sass/app.scss');
app.scss
#include "_modules.scss";
If you're ok with webpack not automatically updating your relative stylesheet URL's, try this:
In webpack.mix.js, add the following option:
processCssUrls: false
Source: https://github.com/JeffreyWay/laravel-mix/blob/master/docs/options.md
There is a --style compressed argument for compile minified css (f.e. compiling minified css described here). But is it possible to compile .css AND .min.css at the same time?
Or I should create separate minify file watcher? (I tried to create 2 scss file watcher, one for .css and second for .min.css, but the second one replaced the first one, and I got only minified css).
Possible solutions:
Create 2 files watchers - SCSS->CSS and CSS->MIN.CSS. Use any available CSS uglifier for the second one - YUI Compressor, for example. See https://www.jetbrains.com/help/webstorm/2016.3/minifying-css.html
create a batch script that does the job (calls SCSS compiler for your .scss and then compresses the resultant CSS) and set it up as a file watcher
Use Gulp/Grunt tasks to compile and minify your files. You can either set up Gulp/Grunt as file watchers, or use Gulp/Grunt watch tasks
I have a folder of SCSS files. The main SCSS file is /css/app.scss. It imports all the other SCSS files, like /css/variables.scss and /css/component_a.scss.
How can I have sass watch my /css/ folder for any changes, then recompile starting from /css/app.scss?
Right now it errors since /css/component_a.scss uses variables defined in a different file. But in app.scss they are imported in the correct order.
My answer may be limited because I don't have all the information about how you are compiling sass and what settings you are using.
However I can see that your file names aren't prefixed with an underscore, basically sass will compile every file individually that doesn't have the '_' prefix.
Basically what you want to do is set up your task manager (grunt, gulp, etc) to watch all files ending with '.scss' then tell it to run the sass compile task and have this pointed at your app.scss file.
With the limited information I have from your question I hope that my answer points you in the right direction to solve your problem.
I have this test Wordpress site http://test.fluxmusic.net/ and I have my css and js file working, but I can't find how to make scss files work.
SCSS files must be compiled to css first before enqueuing them. You will need to install a plugin like:
https://wordpress.org/plugins/wp-scss/
Hope this helps