madskristensen / WebCompiler

Visual Studio extension for compiling LESS and Sass files
Other
450 stars 172 forks source link

This project is clearly abandoned. ANYONE KNOWS ANY ALTERNATIVES? #468

Open alex-jitbit opened 3 years ago

alex-jitbit commented 3 years ago

Please recommend here in the comments and vote with "likes/thumbs"

ttaylor29 commented 3 years ago

@alex-jitbit Agree!

We ran into major issues yesterday due to this (PostCSS). My lead is looking into alt solutions. I'll try to track this issue and respond when we have a solution.

alex-jitbit commented 3 years ago

@ttaylor29 UPDATE: Editing my comment with an up-to-date solution we're using today.

Since NPM Task Runner is an extension by the same author (Mads Kristensen) we decided to stay away from it because it's also be abandoned and it hasn't been updated since 2018. So we decided to use ONLY the tools included with Visual Studio by default.

Visual Studio comes with Task Runner Explorer built-in. And this Task Runner supports Gulp and Grunt out of the box, by design

So what you do is:

1) Create package.json in your project root (via "Add - New item - npm configuration file" menu) 2) In package.json add grunt and grunt-contrib-uglify and whatever tools you need in there (or go with Gulp if you prefer) 3) Create Gruntfile.js and set up your desired options (via "Add - New item - Grunt config file") 4) Open "View - Other Windows - Task Runner Explorer" and make sure the Grunt task is there. Try to run it. 5) (Optional) install grunt-contrib-watch so it run the task whenever you re-save the file, bind that "watch" task to "Project open"

PS. I even wrote a detailed blog post with code snippets and all here

stefanloerwald commented 3 years ago

There's https://github.com/excubo-ag/WebCompiler It does not cover the spread of languages and/because it's implemented in C#, which makes it independent of VS/Windows

If that doesn't work for you, I would recommend isolating your build process into docker.

ttaylor29 commented 3 years ago

@alex-jitbit We have decided to use gulp.js for now! So far it is working well! I'll try to report back in a week or so and let you know an update.

mihaimyh commented 3 years ago

@alex-jitbit We have decided to use gulp.js for now! So far it is working well! I'll try to report back in a week or so and let you know an update.

@alex-jitbit Do you mind sharing your gulp config?

ttaylor29 commented 3 years ago

@mihaimyh It was me that posted about using gulp.js:

Here is ours:

gulpfile.js

/// <binding AfterBuild='compile' ProjectOpened='default' />
var gulp = require('gulp');

// Requires the gulp-sass plugin
var sass = require('gulp-sass');

gulp.task("sass", function (done) {
    return gulp.src('Content/styles/**/*.scss', '!Content/styles/vendor')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('Content/styles/'));
});

function watch() {
    gulp.watch('Content/styles/**/*.scss', gulp.series("sass"));
}

gulp.task("compile", gulp.series("sass"));

gulp.task('default', watch);

package.json:

{
  "name": "webportal.mvc",
  "version": "1.0.0",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-sass": "^4.1.0"
  },
  "dependencies": {
    "bindings": "^1.5.0"
  },
  "description": ""
}

So far it is working great once we figured out all of the items.

We just have our node_modules file ignored from GIT with checking in and we use the 'Task Runner Explorer' to watch the updates occur!

ItsMeSousuke commented 3 years ago

There's https://github.com/excubo-ag/WebCompiler It does not cover the spread of languages and/because it's implemented in C#, which makes it independent of VS/Windows

It works on .NET 5 so it should works on Mac and Linux too.

michael-kaufman commented 3 years ago

Sousuke, that won't work on Linux; it has hard-coded .exe's that mess up your build. I found this yesterday that works without Node - it's perfect for our Blazor on Linux app. https://github.com/excubo-ag/WebCompiler

On Wed, Oct 21, 2020 at 2:47 AM Sousuke notifications@github.com wrote:

There's https://github.com/excubo-ag/WebCompiler It does not cover the spread of languages and/because it's implemented in C#, which makes it independent of VS/Windows

It works on .NET 5 so it should works on Mac and Linux too.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/madskristensen/WebCompiler/issues/468#issuecomment-713413142, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAMLJ7QDCCNKGRTKZUBMQRLSL2NY5ANCNFSM4RQ6YSWA .

pelhamrj commented 3 years ago

We switched to Gulp and NPM Task Runner. We were moving our codebase to Github and wanted to use Actions/Workflows and kept encountering errors with this. We decided to scrap it and move it over to Gulp. The below config adds sourcemaps, vendor specific prefixes, and minimizes the css output.

If anyone is interested:

gulpfile.js

const gulp = require('gulp');
const sass = require('gulp-dart-sass');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const sourcemaps = require('gulp-sourcemaps');
const log = require('fancy-log');

gulp.task('scss', function (done) {
    gulp.src('./wwwroot/css/site.scss')
        .pipe(sourcemaps.init())
        .pipe(sass().on('error', function (err) {
            log.error(err.message);
        }))
        .pipe(postcss([autoprefixer, cssnano]))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('./wwwroot/css'))
        .on('end', done);
});

dependencies in package.json:

{
  "devDependencies": {
    "autoprefixer": "^10.0.2",
    "cssnano": "^4.1.10",
    "fancy-log": "^1.3.3",
    "gulp": "^4.0.2",
    "gulp-cli": "^2.3.0",
    "gulp-postcss": "^9.0.0",
    "gulp-dart-sass": "^1.0.2",
    "gulp-sourcemaps": "^3.0.0",
    "postcss": "^8.1.8",
    "sass": "^1.29.0"
  }
}

We don't build our css a lot, so we don't have it configured to watch for file changes currently.

alex-jitbit commented 3 years ago

I edited my comment above with the solution we're using today: https://github.com/madskristensen/WebCompiler/issues/468#issuecomment-694522331

Sc0tTyXL commented 3 years ago

I edited my comment above with the solution we're using today: #468 (comment)

Looks interesting, will it run when I run msbuild as wel? We use the nuget package for that and want to get rid of that too