I'm building a webapp using yeoman. Everything is great except the fact that I'm getting a bit confused with using assets (like images or webfonts) that are bundled with some bower components (sass-bootstrap for example...)
I include javascript assets using Requirejs, but my main problem lies with the images and fonts... What's the right approach? Can't seem to find it anywhere... Should I copy all the font files to the font directory I use with compass? Those files wouldn't be updated when the bower component is updated...
Any help would be welcome!
Don't copy, use your bower_components directory as another assets directory like scripts or styles. Link to it in your requirejs paths, and link to it in your compass config.
If you want, during your build you could look into your bower folders and copy all images and/or fonts into other subdirectories in your dist location.
You made a good point, copying source files won't get updated when you update. That's why you want to try as hard as you can to just leave them as is.
Related
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.
So, I am setting up a new site and my project's folder structure looks like this now.
foo.com/
index.php
assets/
css/
img/
js/
vendor/
I have added vendor/ for js/css libraries that I must install to keep them separate, since I want anyone who installs my project to install those in vendor from package.json - most libraries contain too many files 99% which I don't want to push to production.
Now once the project is finished, I would like to push the code to production with only the necessary js/css files.
This is where the problem comes. For example, if I install bulma css using:
yarn add bulma --modules-folder ./assets/vendor
It will dump all bulma-related files which are almost 70 into /vendor/bulma/ but I will only be needing one or two css files afterwards, since I will compiles the sass file to css as:
sass vendors/bulmna/style.scss assets/css/style.css
So my questions is: I am assuming this is how every developer does it and there are no documentations I can find that suggest how to do it. Is it safe to ignore the /vendor directory? What if I install vue, font-awesome, bootstrap .. how can I only fetch the files I need but not everything in /vendors folder?
Your question is actually quite broad - however, I'll try to list as much as possible.
Lets say you're building a project from scratch and needed to include vuejs, jquery, fontawesome but only need to include a couple of files.
The issue you're hitting here is module dependency with respect to npm modules. (and there are many different tools that you can use to manage versions on your library dependencies as well as ensuring they are included into your project, i.e. package managers).
Ok - now from here, you may say to yourself
but I only need say, one icon from fontawesome in your final build (dist) and I don't want to commit all my modules into source control
Again, this is where you omit node_modules and other dependent libraries from source control (i.e. include node_modules your .gitignore)
To reiterate
You can install the required library,
add node_modules to .gitignore ,
bundle those libraries into a vendor single file to be consumed by your users (can be via browserify/webpack/rollup/gulp/grunt/yarn etc).
generate bundle within npm script
Now you may ask further -
Why would I use any of those tools? - they're distracting me from simply copy/pasting vendor libaries into my source control.
Build tools were created to
streamline the developer pipeline so that you DONT have to copy/paste vendor libaries into a vendor folder.
ensures that all files are bundled to the client automatically
allows you to keep track/restrict library version updates/ when required via package.json
allows you to add other build steps (such as minification, md5hash versioning, compression, code splitting, asset management to name a few).
Now lets break down the original question here:
How to ensure other developers get everything they need when cloning the repository
how do I ensure I can provide only the necessary files to the end user (if I only use specific parts of vendor libaries?)
1. How to ensure developers get what they need
Again, to reiterate above, adding devDependancies and .gitignoring allows you to only add the necessary files to your project.
2. How can I ensure clients get what they need without bloating request files?
This is where build tools such as webpack, browserify, gulp, grunt, rollup, attempt to achieve. This is because with some libraries that exceed in file size of 200kb minified, you may need to separate these files into different client requests (and as such, not demand the user to request one large file, which was symtomatic of browserify projects).
The second technique you will need to be aware of, is with specific libraries, you can use import mdn link where you can require one function/class from a dependant library (which further reduces file size).
Another technique is using less import statements (which can extract less functions/styles similar to above, but this isn't currently supported in SCSS). for SCSS, you're basically left with copy/pasting the necessary styles into your base scss and that'll save you space as well.
EDIT
How to create a bundle from npm install libaries
From the comments you've mentioned above (about not wanting to include a tool into your workflow, there's no point outlining any one particular strategy - you can find answers/tutorials online about how to setup gulp/browserify/webpack for your particular needs).
However, As you are currently using yarn - I'll go into details about that.
Firstly, yarn is a package manager (like npm). All it does with the --modules-folder is install the package into the specified folder, that's all. So we don't really care about that (since it's doing the same thing as npm). (i.e. your vendor folder is the same as node_modules in many respects).
We could use
webpack
gulp
grunt
rollup
browserify
brunch
(All build tools that essentially allow you to bundle all those packages into a single entry point to be packaged to the client).
I won't go into how, because that is a process you can find online, and from the above comments, I can tell you don't particularly care either.
What you are looking for is a zero-config javascript build tool. (Extremely out of the scope of your original question, and i'll only answer that in a separate Q&A).
I'd try Googling on "tree shaking CSS" to see if that gives you something.
Maybe something like: https://github.com/jacobp100/es-css-modules
Rollup plugin may be useful. It works for js, with postcss, the link says it works with css also.
https://code.lengstorf.com/learn-rollup-css
Have a look at Pancake. It has been built specifically for the purpose of moving only those files out of the node_modules folder that you need. I wrote an article about it here: https://medium.com/dailyjs/npm-and-the-front-end-950c79fc22ce
(probably not an answer but a good tip)
PS: I am the author of both, the article and the tool so with clear bias :)
I'm currently developing a react application using jspm/systemjs.
I've been looking for a way to bundle assets inside of an bundle-sfx (build) file.
I have some images, fonts and potentially svg to add into my application. Currently the build file link those by urls into my sources.
But my goal is to be able to provide a single file to load in the html, which also bundle those assets; or at least package all those assets into a common folder from which I could serve as is.
For now I'm using systemjs/plugin-css, which concatenates all the css into a minified file.
I've looked at those plugins: vuzonp/systemjs-plugin-svg, systemjs/plugin-image, and systemjs/system-font.
But from what i read from that thread, it is not easily doable nor even possible at the moment.
Does anyone know how to do that, or could point me at the right direction ?
Does a plugin exist which would handle assets as undiscriminated files ?
Do I have to process each kind (mime-type) of file differently ?
There are a lot of css packages on packagist.org
Example:
Bootsrap
https://packagist.org/packages/twitter/bootstrap
Foundation
https://packagist.org/packages/components/foundation
After adding the package to composer.json and running composer update, the the library are loaded in the vendor/ folder.
What is the best practice to move the css and js sources to the public/ folder?
Yes, you have to copy them to public.
CSS, JavaScript, image and video files should be available to your public.
Never symlink your vendor or app dir to public.
Your less or sass files might be exposed on public, but you'll see some coders that doesn't like to and other (like, Basset author, Jason Lewis -- https://twitter.com/jasonclewis/status/342544008687546368#) that thinks they should.
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.