In particular, I have a project I generated using the command line dotnet new angular and would like to add SASS to it. I already know quite a nice way using gulp, one file at a time, but I believe the backbone for client-side management here is WebPack. This is where I run out of pauses between questions.
Plus I see no webpack artefacts in the project, so I could have had a look around and gone with some trial and error, trying to get WebPack to do 'SASS work' for me.
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 need to test that all CSS/SCSS files in a project have been successfully minified in the build process of a .Net MVC App, or at least test that they are valid CSS.
Currently, the project is built in VSO/VSTS, and syntax errors in the CSS will not fail the build, and the app is deployed with broken CSS.
I know very little about .Net apps, I know that the main project is ProjectName.Web, the tests are ProjectName.Web.Test, and if I want to test something, I create a corresponding "-Test" class in the ".Test" project, but where would I put a test for minification of files? The files are bundled in ProjectName.Web/App_Data/BundleConfig, and use BundleTransformer to minify the files, how do I check it worked correctly after build?
Any pointers are welcome!
Here is a link to de-minify css. I would recommend you de-minify it, identify the problems, then minify it again. Usually they are small things. If you can post the deminified code then I would be happy to help.
I have a project which completely build with Backbone and reruiejs. For production build we are heavily dependent on grunt.
For JS modules, i have using grunt requirejs.
After evaluating Webpack module loader, i thought of trying it out in my project but not sure to what extent i should use it and how to implement the same.
Any reference point or example project ?
Here is a short, but very informative tutorial by Pete Hunt:
https://github.com/petehunt/webpack-howto
It goes through building a simple build script. After you get the hang of it, you'll be able to make your own scripts in no time.
If you use Webpack, it makes using Grunt & RequireJS redundant & unnecessary because Webpack can do all that for you. Plus, it will be tedious to maintain multiple build scripts in all these tools.
Problem:
I have been trying to integrate minification of javascript and css files in our VS2010 (.net 4.) projects. From what I hear, .net 4.5 and VS2012 will have minification build into the editor, so it will be as easy as setting a flag it will work. Unfortunately we are sill on VS2010 (.net 4.0).
Let me explain what I want to do and what I dont want to do.
I dont want to do big setups with classes/config file(s)/etc just to minify because all that stuff will have to be loaded on our build machine and even the build xml files might have to be modifies to make it work. Also, once we go to vs2012 and .net 4.5 all these configs/classes/etc will have to be discarded because vs2012 will have the build in functionality.
Here is what I think might be the best option. Since I am using the ScriptManager and it can already pull either a .debug.js (non-minified) or a .js (minified) script based on the build type, it seems all i need to do is to have some sort of (pre?) build event that will re-build a non-minified .js file into a minified one. Obviously the build event will have to call a minication module which would have to be installed on local computer (the YUI Compressor seems very nice). The module would update the minified .js file.
I have been reading about this, but I am getting a little bit lost. There are a lot of third party tools with bunch of setup and classes which I do not want to add.
Did anyone do something similar as I explained about?
If not what is the next best simple solution?
(By the way, if you are going to say move to VS2012/4.5, thats not a solution for us at this point)
Solution:
Thank you Parv Sharma for your answer.
I would just like to explain what I did so that it may help someone in the future.
I installed the Microsoft Ajax Minifier
Created a batch file to add minifer to ENVIRONMENT PATH variables: setx path /m "%PATH%;C:\Program Files\Microsoft\Microsoft Ajax Minifier"
Added the following pre-build events into my project:
ajaxmin $(ProjectDir)Script.js -out $(ProjectDir)Script.min.js -clobber
If Script.min.js does not exist, it will be created by the build event, but it will not be added to the project (not sure how to do that through the events).
When you add a new script file, mynewscript.js, just create a second blank file called mynewscript.min.js and add an pre-build event for it.
Using this approach the only thing you have to do to the build machine is run the Microsoft Ajax Minifier setup package and the batch file. Thats it everything else will be part of your pre-build events.
what you are looking for is probably this
http://ajaxmin.codeplex.com/documentation
by using this you would be able to use this third party tool as the minifier
after downloading the tool you have 2 options
1. edit the MSBUILD file to include building the js as per build event
OR 2. to attach this tool to VS and assign a key compbination to it.. this way you would be able to minify whenever you want just like we do F5 OR Cntrl-Shift-B
Attaching to VS is easy just to to external tools and in the Tools menu and add this tool with the required params
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.