npm install grunt-contrib-watch -save-devīy installing as a dev dependency a node_modules folder is created in the root of our project and each plugin is added to our components are added to the Form, Visual Studio assigns default names to each one. npm install grunt-autoprefixer -save-devĪnd finally, to watch for changes in SASS files install grunt-contrib-watch. To add vendor prefixes to CSS properties, install grunt-autoprefixer. Note this uses LibSass whereas grunt-contrib-sass requires Ruby. To compile SASS using Grunt, install grunt-sass plugin. Install Grunt's command line interface (CLI) globally. To be able to compile to CSS, prefix, create a source map and watch for changes we need the following dependencies. Setting up the web projectĪt the root of the project, to create a package.json file run npm init The latter build task is for use on a build server. We will create two builds one that will watch our SASS files for changes and recompile automatically and one that will just compile our SASS. We are going to create a script to compile SASS, create a source map and add vendor prefixes with Autoprefixer.
Note: It is assumed that Node.js is installed on your machine. Compiling SASS with libsass, Autoprefixer and grunt I won't go into detail about this as Scott Hanselman's post covers this. This lets you execute Grunt/Gulp tasks inside Visual Studio. We can actually compile with Grunt today using the Task Runner Explorer extension. It makes perfect sense, why reinvent the wheel.
Ok, so what's coming to replace this? Well, the answer is existing tooling, in the shape of Grunt and Gulp. We’re getting rid of all the node.js based tooling in Web Essentials, such as LESS/Sass/CoffeeScript compilers, minification, JSHint/JSCS integration etc. Mads Kristensen stated in a recent post that compiling is going from Web Essentials: Also, In a multi developer environment using Web Essentials as a compiler isn't ideal as you have to check in generated CSS files normally ending up with unnecessary merge conflicts, which are a pain to resolve.
But it wasn't without it's problems, sometimes I found compiles failed for no apparent reason and only a good old Visual Studio restart would sort it out. The big wins were no dependency on Ruby and integrated compilation with save and build actions.
Web Essentials brought us SASS compilation using LibSass (well node-sass, which binds to LibSass). But now we have Task Runner Explorer, FTW! Thank you Web Essentials Web Essentials opened the door to SASS in Visual Studio by giving us a way to compile without the need for Ruby.
0 kommentar(er)
