AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |
Back to Blog
Minify js files brunch3/21/2024 My goal in building it was this: # config/dev.exs config :my_app, MyAppWeb.Endpoint, http :, #. “Watch” to copy files continuously during development. “Run once” to copy files during asset deployment, and Instead of running an external CLI command, however, it uses the File module to manage files. Phoenix Copy is a small Hex package that operates just like the esbuild and Tailwind standalone tools. So, I made something to solve the problem. Similarly, it didn’t make sense to reference the assets in my CSS. For me, it didn’t feel right to introduce additional imports in my JavaScript just for esbuild to include a file in its process. There are certainly situations in which this could work, depending on your setup. I tried to bend the Tailwind and esbuild standalone CLI tools to do the work for me. So something needs to get them there - continuously during development, and once during asset deployment. In this app, however, keeping files in priv/static/ isn’t the best idea. If you don’t have a reason for priv/static/ to be completely ignored by version control, consider this option. That’s where they live in newly generated Phoenix applications. Important Note: The best answer for your application might be to just move these files to priv/static/. Images, favicons, robots.txt - in this project, these assets still live in assets/static/, and they need to end up in priv/static/ with the bundled JavaScript and CSS. In one particular application I work on, there’s a need that wasn’t covered in this new way of working: copying static assets that aren’t CSS or JavaScript. With careful configuration, these two standalone CLI tools can cover most use-cases. It will also copy any assets referenced in the CSSĮsbuild could help with bundling CSS if you invest in a multi-step build processīoth Tailwind and esbuild can minify the output Using the postcss-import plugin can extend this to bundling multiple CSS files, which is especially helpful if you need to import stylesheets from dependencies Tailwind CSS works with a single CSS file out of the box It will also copy any assets referenced in the JavaScript I use it for code splitting (although the feature is experimental) It can also bundle CSS, depending on your setup Many of the common tasks related to static assets are covered in this new paradigm:Įsbuild handles compiling and bundling JavaScript (and related) assets The change to esbuild and Tailwind CSS is a bit different, however: it requires moving from one unified tool that compiles, bundles, and moves assets, to a collection of tools that cover those needs in a patchwork fashion. In that case, projects moved between relatively similar tools (at least, from an outside perspective) that offered similar functionality relative to the needs of a Phoenix application. You may remember the upgrade to Webpack from Brunch, another build tool used in earlier versions of Phoenix. Both projects offer an alternative to Webpack, the project used to manage static assets since Phoenix 1.4. Over the past few months, the Phoenix core team and the community around Phoenix have developed first-class support for esbuild and Tailwind CSS.
0 Comments
Read More
Leave a Reply. |