I'm currently working on a web-based project where we have a corporate branding style which overrides Bootstrap's default colours and styles via a .less file generating the .css for the stylesheet.
I've put a large amount of effort into making this .less file and would like to re-use it across projects but also allow it to be updateable in a single location rather than needing to copy the .less and generated .min.css and .css for each update.
I've tried linking each of the artifacts using "Add existing item" in VS2013 but the file is not available when the Web Application project is run.
Does anyone know how I would configure the project/file links in order to not have to copy the file between projects and update multiple files?
The easiest way to share variables, mixins, and other LESS elements, is to use #import. If the external shared elements are in an accesible path, you can directly specify the whole path in the #import clause.
However, sooner or later you'll use Grunt in your web pojects. It's a task runner, and the tasks are things like copying files, compiling less to css, minifying, and so on. This is widely use to manage the front end components of your application, specially css and js.
In your particular case, you could use grunt to copy the less file from the central location, and then run a less task to generate the final css, .min.css and, if you want it the corresponding .css.map, which is really useful to debug the styles from the browser's console.
If you want to use grunt for this case, basically you have to create two grunt tasks:
a copy task, to copy the file from the central location. This is optional but advisable if you #import your global colors .less file in each applciation's particular LESS file
a less task, that compiles the .less files into .css
The tasks definition is done in a simple json file, packages.json, and a js file, gruntfile.js. Althoug it can seem daunting, you can have it up an running in a few hours.
If you look for Grunt in Visual Studio Gallery you'll at least find "Grunt launcher" that allows to easyly run this tasks from within Visual Studio. In VS 2015 you can use Web Essentials (and it's probably a native functionality, but I'm not sure). There is also the "Task Runner Explorer" (see the last link below).
If you google "visual studio grunt", you'll find interesting info like this:
Using Grunt, Gulp and Bower in Visual Studio 2013 and 2015
Introducing Gulp, Grunt, Bower, and npm support for Visual Studio
Once you get used to it, you'll do a lot of things, like copying, compiling, transplining, concatenating, minifying, generating maps, etc. because this task runner has a lot of functionalities, and it's really easy to use.
NOTE: it's based on npm, which uses packages, in a similar fashion to Nuget, so you'll get the same advantages of using Nuget, but for front end artifacts. There are many packages available in npm which you will not find in Nuget
Related
We plan on using SASS instead of plain CSS for our SharePoint project very soon. While testing and trying to set everything up, I ran into some problems:
We're using Visual Studio 2015 and on my developer machine I installed the Web Compiler Extension to compile the .scss-files and partial files to a regular .css-file.
That worked very nicely but the problem is, that there will be a few developers working simultaneously on the styles. I want to avoid merging the resulting css-file each time someone tries to check in something into source control (we're using Team Foundation Server).
Since there is a build running every time someone is checking in their changes, and to deploy the resulting solution to the nightly build machine, the idea was to somehow include the SASS compiler in the build definition. This way the more readable scss-files get merged and the build creates the resulting css-file to include it in the solution.
Maybe I'm thinking too complicated, but I just couldn't get that to work so far.
Any ideas how I can achieve that?
(Maybe I should also mention that none of the dev machines got any internet connection)
If you're building an MVC app, you can use MVC's bundling feature along with the SASS NuGet package. And, be sure to enable minification. There's a UseNativeMinification property on SassAndScssSettings. That way you don't need to deal with merging the css file when you get latest or check in. Reference this thread: SASS/TFS best practice
Another way is running a script (e.g with PowerShell task) on the server that to install the gulp components and then call the sass compile task to compile the SASS. Refer to Powershell build - compiling SASS for details.
I'm dealing with an ASP.net project that's maintained by a couple of people via git.
We're looking to minify the CSS files at build time and have checked out the bundle and minify addon however this doesn't appear to offer an option for the minified code to be regenerated from the source files at each build.
Is there a better way for us to minify our source css files on each build?
Understanding your question right, you want to concat and minify your css sources and time you build or deploy.
I do not now how your build stack look like, so I can guess only, but using css files I would use something like grunt or gulp.
On my self I prefer gulp. It is easy to create a task which concat, minify or also auto prefix your css files.
Once your task is created you can add it to your build script, task or bash.
This way works also fine with CI like wercker or travis.
You can use Microsoft Ajax Minifier after build.
Explained here: https://www.codeproject.com/Articles/182690/Minify-Javascript-and-CSS-using-Microsoft-Ajax-Min
Or if you have integration with Jenkins then after build step you can call bat file and run minification on folder of your build directory.
For multiple technology projects, You can create exe based on Microsoft Ajax Minifier and after all builds are done, Run this exe using bat command from Jenking only to minify all the css and js files.
I have integrated this with PHP, ASP.Net and Silverlight code after build of these projects.
One better way is to make your file to online file (like CDN link github can help you in that) and next rather then adding all those css add that link which will be saving much of the build time.
Try to minify your file.
Try to make an online link file.
I'm using the accordion, tooltips and transition components of UI Bootstrap.
I can create a custom build with the online tool on the UI Bootstrap website, which will create a minified and non-minified JS file containing only the components I selected, without overhead.
However, I don't want to use the online tool to compile my custom version of UI Bootstrap, instead I want to compile my own version locally, preferably using the tools I already use; Bower, Grunt and NPM.
So my question: How can I create my own version of UI Bootstrap locally?
bower install angular-ui-bootstrap, and then calling Grunt build in bower_components/angular-ui-bootstrap creates a UI Bootstrap build that includes all modules, there's probably a way to do the same with only a subset of the modules, but I could not figure this out.
It can be done by using the following command
grunt build:moduleName1:moduleName2:moduleName3....:moduleNameN
For example if you require the build to contain only tabs and buttons module , then the grunt command will be like
grunt build:tabs:buttons
The generated files will be present in dist folder
For the list of module names , check all folder names in src folder
The documentation for this is sparse , but if you check the Gruntfile.js , where they register the build task , they mention about how to build modules selectively
It is not as easy as I expected (and as it should be).
Take a look at the Gruntfile.js of the project. You will see that they do quite a lot. Converting HTML and CSS to JS, concating all the scripts in such way they are loadable by others. Moreover the file is quite difficult for orientation; it even includes custom tasks.
To mimic its behaviour I suggest this: Download it via Bower as you normally do. Copy its node dependecies to your package.json dependencies. Then copy the Gruntfile.js, change he routes, and try deleting some parts of the code until you reach a point when you cannot remove more lines without breaking it. It is not a nice way, it should be however successful.
If one had a lot of time, the build script is a good candidate for a deep refactoring. Moving custom tasks to standalone files (or projects), documenting the flow, and maybe implementing standard tasks for some steps (e.g. CSS minification).
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.
Long time lurker, first time poster.
I am moving from LESS to Sass, and would also like to begin using Compass on a few projects. I am using CodeKit to watch and initiate new Compass based projects, but I have also tried this from the command line with the same result. My question boils dow to this:
Creating a new compass project with "compass create [project-name]" builds out the basic structure for a Compass project, along with a config.rb file and three .scss files (screen.scss, print.scss, and ie.scss).
But why isn't the project pre-populated with the latest core Compass .scss files, helpers, etc? Am I wrong to expect a payload of core Compass files (Such as these: http://compass-style.org/reference/compass/) to show up in my project?
I can find them if I drill down to say, /usr/local/Cellar/ruby/1.9.3-p194/lib/ruby/gems/1.9.1... , but these are global and for all projects, not for customizing on a per project basis.
I feel like I'm missing a starter kit of .scss files with a default set of variables. Or that I am otherwise getting off on the wrong foot with how new projects are being initiated with Compass.
Compass is envirment for project. There is no need for it to be in your project dir. You can update it any time. You can use compass watch or sass with compass as lib. All you need is your project and config for compass. It's better way than have it in all projects especially if you have control version in project. In my way I just writing minimal deps files and that's all.
Starter kit creates in sass folder by default. So you don't missing nothing. But there is a clean files. All other stuff you should do like you want or try skeletons from github for example.