I would like to minify HTML, CSS and JavaScript files when I hit docpad generate, how can I do that?
There are a few ways you can go about this. The most prominent and most immediate way is to modify your docpad configuration file to trigger an external tool like grunt to minify your assets via the grunt minify task. Here is a gist that showcases this.
Alternatively, there is also Cloudflare which is an amazing website DNS server that also acts as a CDN for your website's content, and minifies your assets automatically post-deployment. Read more here.
Also, while it isn't minify related, you can also concatenate your scripts with Browserify using this gist. Grunt also has a more straightfoward way of concatenating as well via the grunt concat task.
Eventually, perhaps plugins will do this automatically, but considering the fickleness with concatination it could be a while.
Use gruntjs for JS files. (Grunt will hook up into docpad generate)
Use grunt-contrib-mincss for css files.
Use grunt-contrib-htmlmin for html files.
Use grunt-compress for compressing all files.
For list of all grunt plugins look here:
https://github.com/gruntjs
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'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 ?
I am having an issue with SCSS on GoDaddy. I created a simple webpage on Codepen and moved all of it to GoDaddy, but I can't get the CSS to work because I don't know how to import SCSS...
Can you import it at all? As it is a compiler, not a library...?
From the documentation:
it will take your preprocessed Sass file and save it as a normal CSS file that you can use in your web site
The most direct way to make this happen is in your terminal. Once Sass is installed, you can run sass input.scss output.css from your terminal.
So the hosting doesn't really matter. You convert to CSS at build time, and then upload the static CSS file with the rest of your site.
I am using Grunt and SASS. I am currently using the grunt-contrib-compass plugin.
My goal seemed simple, but it is very hard to achieve.
During development I want my CSS to be compiled in separate files (because dev tools, speed of watch etc.)
For production I want all of my CSS to be merged into one.
However using the concat task does not do the job.
When I have #import statements and SASS is compiling every file separately this outputs the same CSS from vendor libs like Bootstrap or Compass plugins over and over again in the different files. In development this is fine. When I concat the CSS files for production though it produces a quite bigger file with repetitive CSS.
How should I configure Grunt and use #import statements so this does not happen?
Not an exact answer but an alternate solution.
For the use of dev tools I would recommend investigating .map files. This will allow you to have a compiled and minified css file but when you open the developer tools you can see the location of styles as they are in the original sass files.
Details on the grunt plugins GitHub page.
A guide on Sass and source maps.
I hope this helps.
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.