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/
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.
I am using webpack to bundle my files into two file: app.js and lib.js and I create and append unique chunkhash for each of my files that get download by browser. Both these files are built together in the same build output. It would look like this:
lib.747c2ee515b25d871bd0.js
app.e6a0b36a5bb2bff41393.js
I have following caching set on these files:
Cache-Control:private, max-age=31536000
This means that these files will be cached for an year or when a new file arrives. And this would work independently for each file.
Since our application is closer to release, there more changes in app than in lib.
Problem: The problem I am facing is that in a new build, contents of the lib are not changed but module ids are changed. This is causing module ids to change but chunkhash doesn't change; causing downloading of app but not lib resulting into broken app. On Ctrl+F5 everything starts working again as expected.
Questions: Isn't the changed module ids considered as part of chunkash? How do I fix this problem? Is it possible to add auto-increment explicit version number to file names through WebPack?
Any help will be much appreciated.
If you're using webpack-md5-hash plugin to change the webpack chunkhash then you might be hitting this issue.
Also these two articles might help Predictable long term caching and Long term caching of static assets with webpack.
The way I solved this is by adding one more number (which is Date.now()) into my file names as below.
filename: `[name].${Date.now().valueOf()}.[chunkhash].js`
This works pretty reliably for foreseeable time. This is with an understanding that the value returned by Date.now().valueOf() is the number of millisecond since midnight January 1, 1970 UTC. Besides, all I want to achieve here is the value be automatically generated and different from previous one.
The only drawback I see with this method is that: With each release, this forces all the bundles to be refreshed. However, this is not a so much of a concern considering very low frequency of production rollouts we will have after first 2 releases.
I'm beginner in Joomla So please any one help me. I'm editing on less files in both locations (media/guild/less/ and templates//less/) but changes are not reflected in front-end. Why has not reflected changes in the front-end.
It seems that your less files are not compiled to css, so no changes appear. Less can be compiled in the browser using Javascript, or via the commandline. I my opinion, there are only very few cases, in which it makes sense to compile in the browser.
To compile those files from the commandline you can have a look here
If you are new to Less/npm and all other needed stuff, you should have a look at the official docs.
As #philipp points out, Less files need to be compiled before they can be used.
Templates that use Less handle this in different ways. For example, Less files might be recompiled and saved each time you save the template settings. Deleting the Joomla cache and refreshing the front-end of the website might also trigger a recompile of the Less files.
For simple and future proof changes, it is often easier to override the CSS via a custom CSS file compared to editing the Less files directly.
Somehow, my blocks, foundation, and common folders got deleted. I still have my Sass cache files - is there any way I can get the original SCSS files out of them?
Currently, I am able to go through the scss-cache and grab a few styles - hope is not lost. But there's a bunch of compiled crud throughout the SCSSC file.
In the meantime, I'll be setting up a version control system for the office.
Sass caches parsed documents so that they can be reused without parsing them again unless they have changed.There is no way they can be used to get the original SCSS files
CKeditor's installation instructions tell me to just unzip the whole distribution file on my webserver's production directory. But it is full of files I definitely don't want there, like source code, examples, and even server-side code in PHP. I got rid of most of these files but there is one I'm not sure about: contents.css.
I can see this file uses a lot of styles I definitely don't want to see in my site. My question is:
Is contents.css required by CKeditor, or used by default? Do I even need this file on my production site?
I suppose it depends on what you're using in CKeditor, or what you plan to use later. Personally, I'd suggest renaming the file (something like) contents.css.old and creating a new contents.css file, copy across all the styles that you think you'll need and then destruct-test your implementation of CKeditor, to assess whether you've got all the styles that you need.
Add to, or remove from, that file to get your finished version and then use that one. I'd strongly advise keeping the original version around though, for future development purposes.
To your specific questions, though:
Is contents.css required by CKeditor, or used by default?
I believe so.
Do I even need this file on my production site?
Not so far as I know, its absence will likely cause things to look a little less-pretty, though, until you apply your own styles.
As suggested, above, though, I'd rename the original and then create your own stylesheet with the same name, it's rather easier than going through all the various js files looking for, and changing as appropriate, references to contents.css.