I come from a gulp background and I am looking to minify images with webpack.
Normally I would have a src folder with my raw images that would get minified to a dist folder with all my minified images. This is have I have learned to minify images with gulp.
Using webpack I came across this:
https://github.com/tcoopman/image-webpack-loader
When using this, webpack just loads the image and perform the minifcation on the spot or am I wrong here? I don't see any output option so I am kind of confused.
I would like to have a setup similar to gulp where in the end I have a folder of original images and a folder of minified images.
Am I wrong to assume that I could maintain this workflow with webpack?
It is my understanding that you are correct in your line of thinking. As far as I know, Webpack's image tooling is for actually loading the image on spot. I actually came across this same issue recently, and after a bit of research realized I had to either
(1) continue using gulp for this task, or
(2) write my own image script using imagemin, and then use npm-scripts to run it. I ended up choosing the latter, which took a bit, and honestly was in some ways just rebuilding things that already work; but it was definitely worth the time for what I learned.
(If anyone knows more about webpack's image capabilities please correct me; I did quite a lot of research.)
Related
I am making a chess program for school. I have the first part of the code, but I need the images for the pieces to be in the project files. I can open my files within the project, but annoyingly cannot find a way to save them in the project.
I have had a look around, but haven't found any help on it online, making me think I must be missing something really simple. Your help would be very much appreciated.
Found the answer:
just need to upload it into the files along with the main venv library and the main program.
Simples.
Shahzaib here, coming to you for a bit of help !
I'm still new in the Shopify and liquid stuff but i'm getting there.
I'm cutrently trying to minify a scss.liquid file on Shopify, usually when I try to do that with a css file, I use an online minifier, exept that, apprently the scss.liquid format is not properly handled. Every time I try to minify it, my site crash ?
Do you guys have something to recommand regarding minifying a scss.liquid file ?
thanks in advance,
regards, Shahzaib.
I recommend setting up a gulp task to do this. This will help simplify your SCSS files into individual files for whatever they style. Also, you won't be edited your theme's default theme.scss.liquid file, so it is easier to overwrite default styles, and you know exactly which styling is yours vs the theme's.
To setup a gulp task, you will need to install node.js and gulp. I recommend using npm for this. Here is a good introduction tutorial to this which you'll need to adapt a bit to work with your Shopify file structure. For example, I recommend adding a src directory for your custom .scss files, and compiling them into one single file in the assets directory, instead of working directly in the theme.scss.liquid file.
https://css-tricks.com/gulp-for-beginners/
Once you have completed those instructions, make sure to add node_modules to your .gitignore file before committing.
Next, setup your project to use themekit. https://shopify.github.io/themekit/ , and have your gulp task run on save of the file. This will compiling your src files into a single file in the assets directory which will then be uploaded to your store by themekit.
Hope this helps!
I'd second than10's answer, and add that if minification of static assets is going to be part of your theme development workflow, use gulp.js running locally with something like gulp-shopify-upload watching your changes and pushing them up to your store:
https://www.npmjs.com/package/gulp-shopify-upload
See basic usage in particular.
I have this
but I would like to eliminate uring the IF statement whenever I want to load such resources.
in the above figure for LOCAL environment I have bootstrap.min.cs and app.css files so that I can debug easily.
in PRODUCTION these two files are minified and combined in one file at core.min.css (using gulp).
is there a better way without using an IF statement but still be able to debug easily using the original files on LOCAL environment?
something like app-local.css (which includes two raw files) and app-production.css (which is one file minified and combined)?
not sure if I'm clear but I hope you get what I mean.
Webpack and Gulp combination is exactly what you are looking for.
It doesnt matter if you are in production or in local you can merge all your CSS and Javascript files as minified into single file. So you don't have to worry about your environment. Also you can use them to watch your changes in real time which is handy for development too.
check this link for more information https://webpack.github.io/
Got a trouble when including some external javascript code (example can be jquery.treeview plugin with css and images included) - in vendor/assets (where this should go) it seems it doesnt work with images. Any experience or example of doing this?
I suspect it's because you need to correct /images/foo.jpg to the new scheme of /assets/foo.jpg
If not, please include logs and examples.
Along the lines of what Zach said, the solution I've used is to modify the js/css files to be erb templates, and used asset_path('treeview/foo.jpg') to replace '/treeview/foo.jpg', and move all plugin images to the app/assets/images/treeview folder.
This will make everything work swimmingly, but it is less than ideal in requiring hacking up plugins before they work with the new system.
Of course, you can also keep your CSS and JS files in /public/javascripts and just javascript_include_tag them as usual, but you'll lose the precompile/bundle/compress functionality the asset pipeline provides.
I can't seem to figure out the most efficient way to do this.
For example, I have some js files that are needed in both projects(within the same solution), how do I include them without duplicating the actual physical files, which I would rather not do? Same goes for images and css files.
I would also like to know what's the best way to generalize this for including the js resources in other solutions/projects.
VS really seems to be lacking an easy intuitive solution in this retrospect.
Any ideas?
Why does it matter which project they are in? All you really care about is where they get deployed on your web site, and what the path to them from the root of your site is, right? So just pick a place to put them and have and code that refers to them use that path.