So I am very interested in using LESS with Bootstrap and Visual Studio. THe problem I'm having is that Web Essentials doesn't seem to be able to compile css from the Bootstrap LESS files. I've done some poking around and it seems that Web Essentials doesn't understand semicolons or something to that effect, which is causing it to choke on bootstrap's less files.
So, are people using LESS with bootstrap in a VS environment, or have I wandered onto the fringe?
Some tools you could use:
Web Essentials - I can tell you it does work with Bootstrap as I've used it before
Web Workbench - A paid alternative, I prefer web essentials
GruntJS - A JavaScript task runner that you can configure to build various resources and hook it up to your post-compile step so it happens automatically
Personally I'd go with grunt, while it's not very commonly used tool in '.NET', once you've used it you can see the awesome power it gives you. It's open source, and has a tonne of open source plugins that lets you do heaps of stuff, plus you can write your own.
Some examples of plugins: minify JavaScript; compile SASS, LESS, TypeScript, CoffeeScript, Markdown, etc.; copy files; delete files; optimize images and so on.
Check out WebEssentials (as you've already found, if it doesn't work, try filing a request or an issue) or the Mindscape Web Workbench and finally the BundleTransformer. Your request isn't a fringe, the web is embracing these technologies, so is Visual Studio.
If you'd share the exact messages you're seeing, or the steps you've taken so that we can reproduce, we can help you better. As far as I can tell WebEssentials should work with Bootstrap's less files just fine.
Related
IntelliJ IDEA is pretty amazing for Grails development work. It is rather demanding on resources (particularly memory), though, and takes a long while to start up, so occasionally I like to use Visual Studio Code instead for light editing. I'm trying to tune it most effectively for Grails development. Any tips would be most welcome. One thing I'd particularly like to know is if there is some way of setting up a beautifier/formatter for .gsp files.
First of all, you'll have to setup VS Code for java. You can follow this page https://code.visualstudio.com/docs/languages/java
Then, you'll have to install of the groovy language extension. Currently there are three such extensions in the library. code-groovy has more active users than the others and it provides good gsp support. I do use VS code for quick editing or just viewing source code occasionally but its still not the replacement of Intellij. I can't use VS Code for hardcore java/grails development yet.
JavaScript newbie here. I'm new to Angular2 and am currently learning about things like module-loaders (there's so many!), etc, so bear with me since my space of "unknown unknowns" is probably quite large.
I'm interested in creating a JavaScript based "Packaged Web App" for windows ("Packaged" in the sense that the JS is included in the Universal Windows Platform app).
One constraint to keep in mind is that I have severe limitations on the size of my packaged app. The smaller, the better.
With that in mind, I have a few specific questions that will hopefully expose the extent of my ignorance:
Without resorting to Electron or Ionic2, is it possible (also, is it a good idea) to create the offline experience in Angular2 and then only manually include the resulting transpiled .js files in my Visual Studio project?
How hard is it to manage the dependencies for these transpiled files? Are they entirely self contained?
Roughly how large would the minimum set of manually imported files end up being? When I use NPM to install angular2, it winds up being ~80mb - a large portion of this (most?) looks like dev tools, test infrastructure, etc. What's the minimal set of angular dependencies needed for the client app to work?
Thanks!
Without resorting to Electron or Ionic2, is it possible (also, is it a good idea) to create the offline experience in Angular2 and then only manually include the resulting transpiled .js files in my Visual Studio project?
Yes, it is possible. TypeScript will be compiled to javascript codes, which will be consumed by your project. So eventually, it is compiled js codes that will be necessary for your project.
But, if you are so worried about your project's size, then I suggest you using Angular 1, which is only JS codes. And for the minimum size of Angular 1 and its dependency jquery. There is a compressed version of Angular 1 (angular.min.js: 164kb) and jquery(jquery-3.1.1.min.js: 85kb).
Answering my own question here:
Yes, it's possible. You can copy over the transpiled .js files and then simply point the webview control at the generated index.html. With that being said, it's a pretty kludgy dev experience since you're constantly working around VS.
The dependencies are handled for you - it's all in the minified/uglified js files.
I haven't investigated tree-shaking yet, but it looks like I can get away with ~0.5Mb with a skeleton project.
I am beginning to use Go for web development, but I am having issues with asset management. I would prefer to have a tool like Rails' Asset Pipeline for managing (and compressing) css/js files (as well as SASS), but I am still able to work with css and js files.
While I am able to work with css and js, I am not able to work with SASS. Is there a way to use SASS in a Golang project? I am not using a framework.
Thank you!
I'm not familiar with Ruby on Rails but, I assume, that ruby on rails gave you some sort of tools for managing the source to distribution client-side asset transition (polyfills, transpiling, minification, compiling of SASS/SCSS to CSS, compiling of XScript to JavaScript ... etc).
While a web development framework might do that to try and ease in developers quickly (I assume rails does that, not ruby) its not exactly the way Go does stuff.
Go is a language, not a framework + language, just a compiler, a few build tools and a set of standards for how to write, test, document and indent stuff (with the indent,test and document part being optional).
A go server, at least the way I built servers with go, is somewhat decoupled from the client. It server static assets when they are needed (e.g. it serves the minified JavaScript and the stylsheets and the html, and jsons with info from the databases... etc), but it doesn't really care about what those are, its a server. The go toolchain is made for building golang applications (e.g. said server), but its not made for building client-side web applications (those consisting of js, css and html).
Now, you may use a framework similar to rails written in go that helps "pack up" css, js, html. But I'm unaware if there are any.
You may use a compiler which turns go into client-side code (i.e. javascript) https://github.com/gopherjs/gopherjs , if you enjoy the go toolchian and want to use it for client-side development. But, go-like performance isn't something this gives you AND you are working with a subset of go. Its really just a different way to write javascript.
However, what you most likely need in your case is a "build-chain" for your client side. Here there are 3 tools which (in my opinion) stand out in 2016:
npm
webpack
bower
I could write an essay about using this tools but here's the summary:
Webpack is used to create a "pipeline" for your code which does thing like, calling babel on javascript, compiling sass to css, minifying assets, allowing js to be written with import syntax... etc, really, its a swis army knife in your js development arsenal and probably matches the functionality of whatever you were using before.
Npm is the node package manager BUT even if you are not using node for your server. It can be useful to keep tracks of dependencies for building your application (like webpack) and for downloading modules. Its also useful for running various scripts and deployment, its a bit of an overkill to use both npm and weback though you will probably have an easier time setting up the webpack enviornment if you have a package.json (config file for npm) with each of your project.
Bower is one I actually don't use for small projects. But its basically a repository for javascript libraries (among other things), so you can easily say, write "bower install jquery" and you've downloaded jQuery for your current project.
Again, there are many other tools out there, these are just some of the ones I like, but, check some of them out. They can help you replaces your previous pipeline. Don't think of client and server side code as being the same, they are decoupled and having a strong separation between them might help you a lot.
Web Essentials for VS20XX offers a bundling feature which I've used. I haven't ever really used the MVC bundling feature. Are there any major differences in functionality? Is it best practice to use the MVC?
In the actual case in question, I'm using OWIN/Katana, MVC 5.
In addition to Shoe's answer, I think these are also worth mentioning:
Less, Sass plugins often require extra work and problems: I have tried dotless, but it couldn't compile Bootstrap Less source, as it's engine was outdated. I have tried other plugin, which required JavaScript engine, which required installing C++ Redistributables on the server.
WebEssentials compiles, minifies and bundles files on save and build, while MVC bundling does that on AppStart. The effect is longer application start time, what can be a problem when IIS kills application often in a favour of other applications
There are a few differences. I don't think a "best practice" exists beyond what you want to work for. Obviously Web Essentials isn't going to be as integrated into MVC as the MVC bundler is. A few points on the MVC bundler.
The MVC bundler won't bundle Less, Sass, CS etc. without a plugin.
So if you have less files for example, you need something like
dotless.
It won't bundle images into sprites.
It supports file versioning so no action is required when jquery
goes from 2.0.0 to 2.0.1, though since bundles are generated on
application start it's a little harder to manage bundle versioning.
There is no manual building of bundles besides defining the Bundle
config file
Turning bundling and minification on/off is as easy as turning
on/off debug mode in the web config or enabling optimizations in the
bundle config.
It supports bundling of CDNs
When your server is running you can make edits to individual files and the bundle will regenerate at runtime
What I should do except writing owner Site.css? It is possible to give writing Site.css to designer without any worry about merger functionallity and design?
I wrote an intro blog post on theming Orchard.
On my latest project the designer in our team read it so he could turn his designs into an Orchard Template.
The key thing we found was that the designer needed to have his own local version of Orchard running that he could make changes to and see the affects. We had him running it through Visual Studio, but Web Matrix or IIS running locally with him using his own editor of choice would have been just as good.
A combination of the Developer module and visual studio helped him work out what was what.
My article is not pitched at designers though, so I did pair him with a developer at first to get him started. This worked really well and the designer now feels confident and can make new templates from scratch by himself.
It depends on what you are trying to do. In some cases, CSS is enough. In some cases, not, and you also need to change layout and a number of other templates. CSS should be no problem for your designer. For templates, they just have to understand what the #{}, #() and # are doing and learn not to touch these parts and work around them. Good web designers should be used to that sort of thing.