The way I currently have it set up is I downloaded Compass from https://github.com/Compass/compass
Placed it into the root of where all my SCSS files are located. It works great but, I was wondering if their is a way to integrate Compass like they are doing with the Mindscape Workbench http://visualstudiogallery.msdn.microsoft.com/2b96d16a-c986-4501-8f97-8008f9db141a
I use just the mixins from Compass, but rely on Web Essentials to compile the SCSS files on save. This gives me a much better development experience, since compass watch requires a few seconds to compile the stylesheets, whereas the Web Essentials are very fast. With compass watch I often had the problem that I reloaded my page in the browser before the CSS files were completely compiled, confusing me at times.
Since the Compass SCSS files are effectively a library that I rely on, I also copied them into my source tree, so that I have them in the Git repo. This also solved the problem that the Web Essentials were unable to resolve the Compass files.
This approach works very well for me, much better than with Mindscape Workbench. I must say I'm not a big fan of Mindscape Workbench, although my experiments with it lie approximately one year back. But YMMV.
Related
I'm migrating my front end coding form Visual Studio 2015 to Visual Studio Code. I used the Web Compiler plug-in at VS2015 so as I saved my .scss files everything got processed and my changes were automatically reflected at the browser.
Now, same Solution (.NET) and I'm starting to code using VSCode but this is not working out of the box for me. I do know there is a way I can set a task.json and afterwards integrate it with gulp.
But I'm just wondering if there is an easier way like the behavior at VS2015.
Why doesn't the build of VSStudio keeps doing this if the .scss gets save as well when working with both editors at the same time?
I want to save any changes on _*.scss wich are imported at the main.scss and get the browser sync
I recently moved to VS2017 and, it turned out I cannot make Grunt tasks work. Node is installed along with Grunt packages, Grunt task is also defined, but Task Runner Explorer in Visual Studio doesn't see it (screenshot is attached):
Hmm... from the documentation for that plugin a known issue is: "Projects inside nested solution folders aren't supported yet". So, my guess is that you won't be able to use this in your current structure given the location of your Gruntfile.js. You could try to confirm this by placing that file in the project root directory.
I happened to have a Gruntfile.js in the parent folder of my projects: 'source', and VS reads it by default. I started using Grunt out of frustration with the WebCompiler extension that is now severely broken in VS2017, and doesn't show signs of being updated anytime soon. I just started using grunt outside of VS to compile my sass and bundle/minify my js, which can be frustrating for my other team members. Anyway, I noticed VS2017 automatically picks up that Gruntfile, even though it's not even in the solution folder for my project. For my non MS projects, that's how I have it set up, because I don't want that insane node-modules folder jungle to end up in my git repo. It's super frustrating that MS now wants us to use open source tools in our projects. Us modern front-end devs are in limbo with sass or scss precompilers.
I've been trying for the past couple of weeks to get my head around the use of the new front end tool chain for web development. In particular using NPM, Bower and primarily Gulp but initially Grunt, to manage front end packages and integrate with my Visual Studio 2013 IDE.
What I can't seem to get my head around is the Gulp/Grunt aspect of this tool chain. I appreciate the NPM and BOWER are just package managers similar to NuGet and simply download code/files to reference.
However, and I'm seriously hoping I'm missing something simple, is how the hell do I get these packages to put the correct file types in the correct locations. e.g. all js files in my Scripts folder, all less/sass files compiled to my "Content" folder? In turn how can I get this to happen when I install a package so when I create my reference in my html files to relevant libraries I'm referring to a "Bower_components" folder or similar?
I've read over various tutorials, the most recent of which seemed to get me quite a long way there but then I got lost at the end (The tutorial). Which has is what has lead me to the conclusion it is the gulp element of things I'm not getting.
Is it possible to get the files to auto include when added to the project or generated by the Gulp task?
I am interested in using ECMAScript 6 features in my web application which I am developing using Visual Studio 2013. Currently the syntax does not seems to be working, How can I configure VS to make it work?
If you have Resharper installed in your VS 2013 - from today on you can switch to using ES6:
What I've done for the past few years for my VS solutions is to have the latest version of node.js installed.
From there, I whould create an _buildscripts directory with a package.json file. (NOTE: make sure to set private:true in your package.json)
With that in place I will have a prebuild.cmd (setup as a pre-build script for my project) with something similar to the following...
:CHANGE_TO_CURRENT_DIRECTORY
rem Change to this batch file's drive/directory
CD /D "%~dp0"
:INSTALL NODE DEPENDENCIES AND INSTALL - use call, since it's a batch/cmd file
call npm install
:SET YOUR "start" SCRIPT IN package.json TO BE YOUR BUILD
: such as .... "start":"gulp"
call npm start
From here, you can setup gulp, traceur, browserify and/or another tools targeting newer javascript concepts.
I'm using git, so detecting new/updated files is far easier than with TFS, but you can script at least the checkout of your output directory for transpiled JavaScript.
You can also use something like watchify or gulp-watchify for hanling live edits (via a terminal window).
I realize this answer takes you well outside of VS's integrated tooling, there are some integrated tools, like chirpy and others that do these sorts of things, but my experience is they have be sub-par for my needs, and I've been doing more node development lately.
Seems like the best we can do is to vote for es6 support.
It's strange for me but Web Essentials also doesn't povide ES6 support yet.
As for me I've disabled syntax errors for js files in my VS. Not ideal but at least less eye distracting.
I've got typescript project which is using sass and compass, but I am having troubles getting it to work in Visual Studio. I have installed ruby, compass using gem command, and Mindscape Workbench, but I don't know how to link all that with my existing project since I've heard for the first time about sass and compass when I started working on this project. I tried to google for solution but it didn't help me much, so if someone can help me I would be very grateful...
Thank you in advance.