Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Minifiy HTML, JS, SVG and CSS for env=prod #354

Closed
Jeeppler opened this issue Nov 6, 2017 · 9 comments

Comments

@Jeeppler
Copy link

commented Nov 6, 2017

Is there a way to minify HTML, JS, SVG and CSS when generating the page with sculpin for production?

@opdavies

This comment has been minimized.

Copy link

commented Nov 7, 2017

There's not a way I know of to do this within Sculpin, I've done this though using a build tool like Gulp or a custom npm script. For my site (https://github.com/opdavies/oliverdavies.uk), I keep the original versions in ./assets and move them into ./source/assets/css etc with npm where Sculpin compiles from - these directories are in my .gitignore file though so you won't see those in the repository.

I'm not minifying at the moment, though I do have a prod script in https://github.com/opdavies/oliverdavies.uk/blob/master/package.json#L18 which I need to add to, which gets run during the build (https://github.com/opdavies/oliverdavies.uk/blob/master/ansible/deploy/after-symlink-shared.yml#L7-L10).

Previously I was running gulp --production, this is what my gulpfile looked like - https://github.com/opdavies/oliverdavies.uk/blob/8b511372cef336ac267e61f54d556c458ca0fbae/gulpfile.js.

I hope that helps. :)

@dragonmantank

This comment has been minimized.

Copy link
Member

commented Nov 12, 2017

I'm going to mark this as an Enhancement request.

This is a bit of tooling I'd love for us to ship with, or at least an easy way to wire into an existing build process. Right now I do something similar to @opdavies, where I have a script that builds the JS, builds Sculpin, and then moves things into the output_* folder. Works well enough, but I'd like something better that is built in.

@simensen

This comment has been minimized.

Copy link
Member

commented Nov 13, 2017

My two cents: the PHP tools to do the work JavaScript people have been doing for a long time have never seemed to catch up, stay updated, or been 100% compliant. Finding a pure PHP solution that lives in Sculpin would be awesome, but using other tools that are already good at that is going tog et you there faster.

I want to work this into a blog post, but for an idea how to handle local dev vs production builds using tools, take a look at this gist: https://gist.github.com/simensen/b39ba611f45b91a11f5523d80ed126fa

It shows my simple WebPack Encore + Forge deployment pipeline. I wanted to avoid putting things directly into source/ for build artifacts as it always seemed to be sketchy/iffy with Sculpin's file scanning as to how quickly it found newly changed files while doing --watch. This allows me to have the assets being watched separately from the sculpin source in development, and still have the ability to change how assets are built in production.

Maybe not 100% what you were looking for, and probably similar to the solution for oliverdavies.uk, but a slightly different angle.

@WyriHaximus

This comment has been minimized.

Copy link
Member

commented Nov 13, 2017

Personally I'm using my own simple HTML compressor on generation time: https://github.com/WyriHaximus/html-compress-sculpin

@Jeeppler

This comment has been minimized.

Copy link
Author

commented Nov 14, 2017

@WyriHaximus I really like your solution. This is more or less what I was looking for. However, is there a way to minify/compress CSS and JS as well.

Furthermore, have you tested your HTML compressor with SVG as well?

@carbontwelve

This comment has been minimized.

Copy link

commented Feb 23, 2018

There is a task runner like gulp/grunt written in PHP called Robo It's on my list of things to look at for one of my projects that should help with automating such things...

I personally use webpack for the majority of my projects (example webpack script) which builds from an _assetsfolder into the source folder. Once it's finished building it then executes the static site generator.

I have yet to get webpack executing during a watch, but its on my todo list.

@dbu

This comment has been minimized.

Copy link
Contributor

commented Mar 29, 2019

the sculpin skeleton is now using webpack (through symfony encore). not sure if minification is on by default, but if somebody would want to invistigate that, and/or update the documentation for this it would be cool.

@opdavies

This comment has been minimized.

Copy link

commented Jun 21, 2019

I've done some testing with the Blog skeleton, and can confirm that running yarn encore prod does generate a minified file (source/build/app.567744c2.css).

It doesn't seem that the skeleton is set up to load the versioned file though as default.html is hard-coded to load build/app.css.

@beryllium I'd suggest this issue is either moved to the https://github.com/sculpin/sculpin-blog-skeleton repository, or closed and I can create a follow-up issue there for the path issue?

@beryllium

This comment has been minimized.

Copy link
Member

commented Jun 26, 2019

The minified version not being properly loaded by the skeleton is a separate issue.

For sculpin projects created from scratch, the current option for asset management is to implement using off-the-shelf tooling (such as webpack or webpack-encore) which writes to source/, so it then gets incorporated into the sculpin generate command's generated output. This would typically be managed by updating the publish.sh script (or use a tool like composer's custom scripts, or a makefile, or other tooling) to combine the minification step with the sculpin generate command in preparation for publishing.

There are no plans at this time to incorporate such functionality into sculpin itself, but someone could write an extension that hooks into the lifecycle events and minifies on the fly.

@beryllium beryllium closed this Jun 26, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
8 participants
You can’t perform that action at this time.