After a lot of fighting, I started to page my portfolio. I used to use a few things I was learning, among them the Gulp and Stylus. For CSS construction I am using ITCSS methodology (understood as architecture). However, at the time of running the Gulp task I'm getting some errors.
I have already updated the Gulp and Node version.
My task in gulp
//Importa os módulos necessários para o Gulp, inclusive ele mesmo
var gulp = require( 'gulp' );
var concatCss = require('gulp-concat-css');
var stylus = require('gulp-stylus');
var minifyCss = require('gulp-minify-css');
//Tarefa para compilar, concatenar e comprimir o css
gulp.task('css', function() {
return gulp.src('src/styl/*.styl')
.pipe(stylus())
.pipe(concatCss("style.css"))
.pipe(minifyCss({compatibility: 'ie8'}))
.pipe(gulp.dest('dist/css/'));
});
In my base.styl
I have the following code:
body
background-color: red
In my settings.styl
:
/*====================
*=====Variáveis
*====================/
//Cores
$color-white: #fff
//Media Queries
media_queries = {
thin-mobile: "only screen and (min-width: 320px)",
medium-mobile: "only screen and (min-width: 480px)",
large-mobile: "only screen and (min-width: 600px)",
tablet: "only screen and (min-width: 768px)",
deskto: "only screen and (min-width: 900px)"
}
It is not parsing my Stylus code. When I run the task I get:
Potentially unhandled rejection [2] Error: No writecb in Transform Class
If I only have the file base.styl
it will parse normally. But with the settings.styl
in the middle already gives the error.