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.
Related
I am doing some wordpress development and I am struggling to setup my development environment is a comfortable way. I am building a parent theme and a child theme. Each theme has its own set of sass files. I want to compile the parent themes files only when I make edits to those parent theme stylesheets. I want to compile the child theme stylesheets only when I make edits to those stylesheets.
I am using live-sass-compiler extension to compile my sass. I am open to using a different method for compiling, maybe something like Gulp.
Right now, I have split my parent and child into two different workspaces. I've added my .vscode/settings.json files into each of the parent and child theme folders since they are both the root folder now.
I don't like this setup because I have to use two vscode windows and also vscode can't see all of the functions Wordpress provides via intellisense.
Do you have any recommendations? Should I setup a gulp task instead to compile my sass?
Like you talked about, Gulp is an excellent idea to control your Sass compilation "flow" from start to finish, even conditionally run one pipeline for file A, and a different one for file B. There are a lot of plugins you can use with PostCSS to future-proof your code, for example.
You can have a look at this Gulp Sass tutorial to get the hang of it, using npm.
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 a compass sinatra project based off of this example.
As noted in this commit in a pull request and this pull request comment, sinatra is able to auto generate compiled css files on demand, as per request.
However, this seems like a waste since the server has to recompile even if there was no changes to the css file. Wouldn't it be better if the server watched for changes, recompiled on file changes, but would serve the same static css file on demand? This would work as if we ran "compass watch" and just served the compiled file.
My question then is: is there a good way to have sinatra automatically compile my sass files into a static CSS on change, without having to run watch compass separately?
Note: I also have a express/node/stylus project and it behaves like this, which leads me to believe this is possible and the logical way, and that I am just mis-configuring my sinatra app.
To change the CSS you have to either:
push new files to the application server (with a possible restart)
recompile in the background (e.g. compass watch on the server)
get the server to compile on changes (using something like the example you gave)
Personally, I favour the first. I'm not sure why I'd want the server to compile static assets? It takes up valuable resources, and the CSS changes on my dev machine, so why not compile them on my dev machine? I've not heard good answers to these questions, so I use a Guardfile (or you could use sass watch or compass watch as a background task e.g. sass --watch app/views/stylesheets:app/public/css &) to compile them, and then I check in the .css files and push them to the server.
YMMV.
I have started trying out Sass for my css work. In the directory where my Css file resides I see a '.sass-cache' folder too. Can any one tell me why is this folder created and is it safe if I delete it.
thanks,
By default, Sass caches compiled templates and partials. This dramatically speeds up re-compilation of large collections of Sass files, and works best if the Sass templates are split up into separate files that are all #imported into one large file.
Without a framework, Sass puts the cached templates in the .sass-cache directory. In Rails and Merb, they go in tmp/sass-cache. The directory can be customized with the :cache_location option.
If you don’t want Sass to use caching at all, set the :cache option to false.
You can configure the Sass cache location by setting a Sass option in your compass configuration file like so:
sass_options = {:cache_location => "path\to\tmp\sass-cache"}
Source: Sass reference
If your main problem is "inhibiting pushes to development environments when multiple developers use/change it", you can add it to your .gitignore file. As stated in the other answer, Sass cache files speed up compilation based on whether a Sass file has changed since last compile.
In my experience it's standard practice to consider them temporary files, and omit them from version control.
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