Open alex-jitbit opened 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.
@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
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.
@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 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?
@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!
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.
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 .
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.
I edited my comment above with the solution we're using today: https://github.com/madskristensen/WebCompiler/issues/468#issuecomment-694522331
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
Please recommend here in the comments and vote with "likes/thumbs"