Is there such feature?
Why i need this is because minified files cannot be merged.
And when the source js files are modified by multiple developers, it is really annoying to save all these files over again.
Related
I'm very new to scss and css so please bear with me. I've done some research but found conflicting information.
I have 2 freelancers working on my project. Both freelancers make changes to:
style.css
style.css.map
style.scss
Everytime I merge their work I break the frontend. How can I merge their work without breaking everything?
I read online that these files should not be included in GIT? I also read that I should used GULP or LESS? Apparently, I should compile the merged code before committing? Seriously confused with the research.
How do I handle these files?
The .css file is generated from the .scss files.
Your developers should commit only in the .scss files.
In the most cases the .css file is not added to the repository at all. And you should not modify the .css file directly because it will be replaced with the next compilation of .scss the files.
GULP is just the tool that compiles the .scss files and create the css from them. Basically when using GULP you can create some functions where you can specify the input location(.scss), output location(.css) and additional rules, etc.
There are also other tools that can do this. Like Koala, Webpack.
You probably should not store generated files in git. In this case, the generated files would be the .css and .css.map files that compass (I'm assuming you use compass because of the tags) generates for you. You should store the .scss file in source control, and compile it to .css afterwards.
If the freelancers are making direct manual changes to the .css files, they should know that at each recompile those changes will be lost.
I'm using dotless to generate a minified CSS file via pre-build task.
Now i wonder how to create an appropriate .css.map file for that minified CSS file. Any ideas?
Dotless doesn't currently have support for generating map files. See Here
.map files are usually generated on the creation of the minified file due to having to match up perfectly.
Your best option for generating a .map file would be to compile whatever CSS you have in the normal less compiler and copy it across to your project.
Less Command Line: Documenation
The above documenation shows about command line usage and also, if you scroll down to the options it will give you information regarding source maps etc.
I'm using VS 2014 Web Essentials. Most of my CSS is compiled from LESS files, and Web Essentials creates *.css, *.min.css, and *.css.map files for those.
I've inherited quite a lot of plain *.css files, however, and when Web Essentials minifies these, it only creates *.min.css files--no *.css.map files. Is there a way to change this behavior?
Try renaming your existing .css files to .less, then open and save the less file. If you have WE running it should create a css, css.map, and min.css for you.
TL;DR: IItemTransform isn't getting executed when a minified file already exists in the same folder as the original (non-minified) file.
Problem explanation
I'm having this issue mainly because of CSS relative image references. If you used IItemTransform with Javascript files, the same applies.
This is what I'm using:
I'm using Visual Studio with Web Essentials addin to have support for LESS files
I'm writing LESS files and have Web Essentials addin automatically minify files on save
I'm also using bundling and minification in my project
When creating CSS bundles I'm using CssRewriteUrlTransform to make CSS URLs absolute (i.e. background images) so that images still work after bundling several CSS files together
Nothing unusual here so far, but it doesn't work.
What seems to be the problem?
The way that bundling and minification works is it tries to avoid excessive processing. This means that when a minified file exists in the same folder as the original one it won't run its own minification and rather serve existing file.
This would be all right as long as it would at least run transforms over those preexisting minified files. But it doesn't. So I end up with relative URLs in a bundle which breaks pretty much all those resources.
Workarounds
Always provide absolute paths in LESS files
Disable file minification on save in Web Essentials settings
Refer to minified files when defining my bundles because they don't have a minified version (*.min.css doens't have a *.min.min.css) so minifier actually picks up the file and minifies while also running transformations over it.
From the standpoint of my development process and tools used (and configured the way they are) this looks like a bug. If those files would be the result of the same minification process this wouldn't be a bug at all as transformations would be executed when minification would execute. It's true that such functionality doesn't exist and likely never will as app would need write permissions to make it work. Outcome: this is a bug. Existing minified files should be processed through transformations before being cached.
Question
Is it possible to somehow convince bundling and minification to either:
not use existing minified file versions
run transformations over existing minified versions
Have you considered using Grunt? http://gruntjs.com/
It has a learning curve, but, the information pool is huge. The issues that you are having with web essentials wouldn't be a problem with grunt.
I'm using it in VS, now, to minify, bundle and transpile both css and javascript as well as reorganize files into a deployment directory. Once you've set up a directory structure, a grunt file could very easily be reused.
With the add-on in VS (linked, below), you can right click on the grunt file and select the grunt tasks to run from a popup menu.
https://visualstudiogallery.msdn.microsoft.com/dcbc5325-79ef-4b72-960e-0a51ee33a0ff
Grunt "tasks" as they are called can be created by downloading various plugins i.e. https://www.npmjs.com/package/grunt-contrib-less.
I have never used LESS or web essentials, so please take this post for what it is worth (not much.) Could you add a pre-build command to simply delete the old files, then do a rebuild when you need to update the CSS.
So I'm using Codekit to compile LESS CSS on my local server. Now I need to transfer the files to my live server.
My question is, do I need to upload all the .less files? Or can I just upload the minified css file?
What is the best practice here?
If you don't plan on editing anything on your live server (which you shouldn't anyway), you only need to upload the compiled .css file; the compiled CSS is completely independent of the source LESS.
It is better to upload CSS files.
Firstly, LESS might not be compatible for all browsers and secondly, CSS is your output of LESS file will take up some time(minimal but why to force on client) to compile it on run time.
I am deploying files to a server from more than one machine, so I tend to upload (in my case) scss files (although less files are essentially similar) and then I can pull them down to a separate machine for editing. But the pages only refer to the css files.
As a minimum you only need to upload the compiled css file(s).