Gulp Task - Compile Stylus for CSS

3

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.

    
asked by anonymous 27.01.2016 / 22:12

1 answer

0

The resolution was super simple. I forgot to stick to one detail: how variables are declared in Stylus .

How I did

$myVar : #fff

How to do it

$myVar = #fff

or

myVar = #fff
    
28.01.2016 / 18:57