Reto: Instalación con Grunt

Clase 6 de 15 • Curso de Stylus 2018

H NA

student•

Instalar con npm:

npm install -g stylus

Verificar si se instalo correctamente revisando la versión:

stylus -V

Desde la terminal nos colocamos sobre la carpeta en donde tenemos nuestro archivo de Stylus, en este caso llamado **styles.styl **y ejecutamos el siguiente comando:

stylus -w styles.styl -o ../css/

Con la -w le agregamos un watcher para que detecte al hacer cambios en el archivo especificado.
Con la -o le indicamos la ruta de salida (output) para nuestro archivo .css

Harold David Avila Sabogal

student•

Buen aporte

Alexander Valencia

student•

muy buen aporte

Stuard Gerardo Carrillo Gonzalez

student•

Stylus Webpack

package.json

"scripts": {
  "build": "webpack --mode development",
  "build:dev": "webpack --watch --mode development",
  "build:prod": "webpack --mode production"
},
...
"devDependencies": {
  "css-loader": "^0.28.10",
  "extract-text-webpack-plugin": "^4.0.0-beta.0",
  "style-loader": "^0.20.2",
  "stylus": "^0.54.5",
  "stylus-loader": "^3.0.2",
  "webpack": "^4.1.1",
  "webpack-cli": "^2.0.10"
}

index.js

import '../styles/styles.styl'

console.log("styles loaded")

styles.styl

.btn
  background white
  color black
  border-radius 3px

  &-alert
    background red
    color white

  &-warn
    background orange
    color white

  &-info
    background lightblue
    color white

webpack.config.js

const path = require('path')
const ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = {
  entry: path.resolve(__dirname, 'src/js/index.js'),
  output: {
    path: path.resolve(__dirname, 'dist/js'),
    filename: "index.js"
  },
  module: {
    rules: [
      {
        test: /\.styl$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: [
            'css-loader',
            'stylus-loader'
          ]
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("stylesWP/styles.css")
  ]
}

Eddy Arellanes

student•

Buen aporte! 😃

Harold David Avila Sabogal

student•

Buen aporte

Roger Carlos Ariel Alba

student•

Hola a todos!
Realmente fue complicado para mi hacer esto por que jamás habia tocado node ni nada de eso, pero a la vez fue muy emocionante.
Les invito a leer y practicar este tutorial, esta en ingles y en otros idiomas, no basta con leer es necesario probar y practicar hasta dominarlo.

Daniel Valderrama Mendoza

student•

Para npm

Installation

$ npm install stylus -g

Basic Usage

Watch and compile a stylus file from command line with

stylus -w style.styl -o style.css

Alberto Gómez Juan

student•

Compilación con Gulp Teniendo ya instalado node y npm podemos verificar qué versiones tenemos, respectivamente.

node -v && npm -v

Luego instalamos Gulp en el entorno global:

npm install --global gulp-cli

Y continuamos con la instalación de gulp-stylus de manera local en la carpeta de desarrollo:

npm install --save-dev gulp-stylus

Dentro de la carpeta de desarrollo creamos el archivo gulpfile.js y lo editamos con el siguiente bloque de código:

// Gulp versión 4.0

const gulp = require('gulp')
const stylus = require('gulp-stylus')

function styles() {
    return gulp.src('./stylus/styles.styl')
        .pipe(stylus())
        .pipe(gulp.dest('./css/'))
}

function watch() {
    gulp.watch('./stylus/styles.styl', styles)
}

exports.styles = styles
exports.watch = watch

En el bloque de código dentro del archivo gulpfile.js se importan los modulos gulp y gulp-stylus y se crean las funciones styles() y watch().
La función styles() lo que hace es tomar el archivo styles.styl, lo pasa por el compilador de stylus y deja el CSS generado dentro de la carpeta ./css.
Por su parte la función watch() se encarga de observar el archivo styles.styl para que cada vez que haya una modificación ejecute la compilación.
Por último, para observar todos los cambios a nuestro archivo de stylus y se convierta en css ejecutamos el observador con el comando:

gulp watch

Rafael Guillermo Rodriguez Garcia

student•

por la consola:

stylus -w -o ../public/css app.styl

-w es el watched
-o es el directorio donde quiero el css

Harold David Avila Sabogal

student•

Buen aporte

Jhean Pacheco

student•

Reto completado Instalación con NPM Paquete

Jo M

student•

https://www.youtube.com/watch?v=o0xr1JRZOb4 instalacion con npm npm install stylus -g si esto no funciona sudo npm install stylus -g stylus -w main.styl

Juan Esteban Galvis

student•

Es como Sass, cuando apenas aprendía Sass por YouTube compilaba los archivos por la terminal.

Ahora veo mejor y mas rápido que se compile por un software como Prepros

Carlos Roberto Villatoro Barrios

student•

Listo, reto completado, me gusta mucho más trabajar con la consola.

yo utilizo git-bash

Diego Fernando Rojas Quintero

student•

como trabajas desde la consola para transpilar tus archivos styl a css? ya instale el pakete de stylus, pero como lo uso?

Néstor Raúl Guzmán Díaz

student•

Hoal Diego yo use el siguiente codigo en un archivo gulpfile.js que es un ejecutador de tareas

var gulp = require('gulp');
var stylus = require('gulp-stylus');

gulp.task('stylus', () => {
    return gulp.src('stylus/**/*.styl')
        .pipe(stylus())
        .pipe(gulp.dest('css/estilos'))
})

gulp.task('watch', () => gulp.watch('stylus/**/*.styl', gulp.series('estilos_min')))```


Luego ya en la consola ejecuto la tarea con el comando gulp

gulp stylus gulp watch```

Andrés David Loaiza Zamudio

student•

Muchas gracias pero suaa 😂

Fernando Galdós

student•

Prefiero usar Codekit

"scripts": {
  "build": "webpack --mode development",
  "build:dev": "webpack --watch --mode development",
  "build:prod": "webpack --mode production"
},
...
"devDependencies": {
  "css-loader": "^0.28.10",
  "extract-text-webpack-plugin": "^4.0.0-beta.0",
  "style-loader": "^0.20.2",
  "stylus": "^0.54.5",
  "stylus-loader": "^3.0.2",
  "webpack": "^4.1.1",
  "webpack-cli": "^2.0.10"
}

.btn
  background white
  color black
  border-radius 3px

  &-alert
    background red
    color white

  &-warn
    background orange
    color white

  &-info
    background lightblue
    color white

const path = require('path')
const ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = {
  entry: path.resolve(__dirname, 'src/js/index.js'),
  output: {
    path: path.resolve(__dirname, 'dist/js'),
    filename: "index.js"
  },
  module: {
    rules: [
      {
        test: /\.styl$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: [
            'css-loader',
            'stylus-loader'
          ]
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("stylesWP/styles.css")
  ]
}

// Gulp versión 4.0

const gulp = require('gulp')
const stylus = require('gulp-stylus')

function styles() {
    return gulp.src('./stylus/styles.styl')
        .pipe(stylus())
        .pipe(gulp.dest('./css/'))
}

function watch() {
    gulp.watch('./stylus/styles.styl', styles)
}

exports.styles = styles
exports.watch = watch

var gulp = require('gulp');
var stylus = require('gulp-stylus');

gulp.task('stylus', () => {
    return gulp.src('stylus/**/*.styl')
        .pipe(stylus())
        .pipe(gulp.dest('css/estilos'))
})

gulp.task('watch', () => gulp.watch('stylus/**/*.styl', gulp.series('estilos_min')))```


Luego ya en la consola ejecuto la tarea con el comando gulp

Reto: Instalación con Grunt

Introducción al curso

Qué aprenderás sobre Stylus

Introducción a Stylus

Compilación e instalación

Cómo funciona Stylus

Sintaxis

Anidaciones

Reto: Instalación con Grunt

Herramientas de Stylus

Variables

Solución del reto y añadir HTML

Cómo escapar caracteres con Stylus

Estructura de CSS y propuesta de reto

Mixins

Mixins Paramétricos

Funciones internas

Condicionales

Directiva for