Automatización (Pre procesadores)

A la fecha funciono siguiendo estos pasos

1. Revisar si están instalados correctamente node, npm, and npx
2. Instalamos gulp-cli mediante npm install --global gulp-cli de manera global
3. Una vez creada la carpeta del proyecto nos dirigimos a ella en la terminal.
   4.igualmente dentro de esta debe existir el archivo package.jason de lo contrario iniciarlo mediante npm init.
   5.Instalamos gulp mediante npm install --save-dev gulp guardándola en el entrono de desarrollo
   6.Verificamos la versión de gulp mediante gulp --version
   7.Para evitar el error de comunicación asíncrona basta con reemplazar el código del archivo gulpfile.js por el siguiente:

<var gulp = require('gulp');

gulp.task('hello', done => {
 console.log('Hello World!!')
 done()
})
>

En las nuevas versiones de gulp hay que definir las funciones de diferente forma tanto con arrow function como funciones asincronas les comparto el codigo de mi archivo de gulpfile.js como es que esta:

var gulp = require('gulp');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var minifyCSS = require('gulp-minify-css');
var version = require('./package.json');

//npm install gulp --save --only=dev
gulp.task('hello', async () => {
  console.log('Hello ');
});
//npm install gulp-sass

gulp.task('sass', async () => {
  return gulp
    .src('scss/**/*.scss')
    .pipe(sass()) // Converts Sass to CSS with gulp-sass
    .pipe(gulp.dest('public/stylesheets'));
});

Muy buena clase 😃 Me encantan los sistemas de diseño. ¿Quería saber si no soy la única que se siente especial cuando Rulótico dice ‘Bebés de luz’? Jejeje :p

Prefiero Usar Prepross menos configuracion y mas directo

Window:
npm install gulp-cli -g
npm install gulp -D

Hola comunidad!, me encontre con un que la librería

gulp sass

estaba deprecada, entonces les ahorro la consulta de la librería que la reemplazo y fue

gulp-dart-sass

les comparto el código de mi fichero de gulp para que los prueben y me comenten como les fue , saludos a todos

var gulp = require('gulp')
var sass = require('gulp-dart-sass');
 
gulp.task('sass', async () => {
    return gulp
      .src('scss/**/*.scss')
      .pipe(sass())
      .pipe(gulp.dest('public/stylesheets'));
  });

para los que no les haya servido gulp hello en este enlace les dejo unos pasos muy simples para que les funione, a mi me sirvio!!

En VSCode hay una extensión llamada Live Sass Compiler nos compila el código a scss a css.

Hola, les comparto un aporte sencillo
(Para usuarios windows o en otros SO quizás también aplica):

En una línea podrán descargar la dependencia de gulp-cli y sass de la siguiente manera (como dependencia de desarrollo):

npm install -D gulp gulp-cli gulp-sass

¡Saludos!

Ahora les cuento sobre el primer error que tuve, mi ventana de comando no podía terminar el gulp hello, tal como sale en el video de Rulotico, al profesor sí le salía star gulp y el finish gulp, así que me puse a investigar y resulta que en las nuevas actualizaciones del gulp, (en la fecha que escribo este comentario 26 de septiembre 2020) no puedes escribir function así nomás function() EPIC FAIL. y es frustrante cunado no te corre el código, así que lo cambié por una arrow function que investigué es la manera correcta de hacerlo hoy en día. y aquí les dejo mi código. Espero les sirva si están atorados como yo. guardas, y ejecutas en la ventana de comandos gulp hello. y ya está, te funciona

hice todo pero cuando pongo gulp hello me tira error…

¿Porque usar Gulp y no Webpack?

Me gustaria que hicieran un curso especifico de Gulp

Les comparto algunos detalles con los que me topé. (Uso Ubuntu 20.04 LTS)
Para instalar gulp sin ningún problema seguí este tutorial:
https://tecadmin.net/install-gulp-js-on-ubuntu/
*Instalé gulp escribiendo el siguiente comando en la terminal:
sudo npm install -g gulp-cli
*Luego entré a la carpeta del proyecto ‘Platzi_DS’ y agregué el módulo de gulp en la carpeta del proyecto con el comando:
npm install --save-dev gulp
*Para comprobar que se instaló sin problemas escribes gulp -v y si te aparece la versión todo bien!
Otro detallito fue la forma de definir las funciones de gulp en el editor de código, tienen que ser funciones asíncronas, debería ser así:

Todo esto lo podemos hacer con Prepos…

Me gusta el poder

• Advantages of Using a Preprocessor (Sass) in CSS Development

gulp es como un webpack?

Yo uso estos archivos…!
Solo hagan los 3 archivos e insertenlos en sus proyectos y por ultimo corran npm de todas las librerias que vienen ahi… en el gulpfile … o corran npm start y les ira diciendo que libreria falta :p

Gulpfile.babel.js

import { src, dest, watch, series, parallel } from "gulp";
import yargs from "yargs";
import sass from "gulp-sass";
import cleanCss from "gulp-clean-css";
import gulpif from "gulp-if";
import postcss from "gulp-postcss";
import sourcemaps from "gulp-sourcemaps";
import autoprefixer from "autoprefixer";
import imagemin from "gulp-imagemin";
import del from "del";
import webpack from "webpack-stream";
import named from "vinyl-named";
import browserSync from "browser-sync";

const PRODUCTION = yargs.argv.prod;

export const styles = () => {
  return src("src/scss/bundle.scss")
    .pipe(gulpif(!PRODUCTION, sourcemaps.init()))
    .pipe(sass().on("error", sass.logError))
    .pipe(gulpif(PRODUCTION, postcss([autoprefixer])))
    .pipe(gulpif(PRODUCTION, cleanCss({ compatibility: "ie8" })))
    .pipe(gulpif(!PRODUCTION, sourcemaps.write()))
    .pipe(dest("dist/css"))
    .pipe(server.stream());
};

export const images = () => {
  return src("src/images/**/*.{jpg,jpeg,png,svg,gif,webp}")
    .pipe(gulpif(PRODUCTION, imagemin()))
    .pipe(dest("dist/images"));
};

export const copy = () => {
  return src([
    "src/**/*",
    "!src/{images,js,scss}",
    "!src/{images,js,scss}/**/*"
  ]).pipe(dest("dist"));
};

export const scripts = () => {
  return src("src/js/bundle.js")
    .pipe(named())
    .pipe(
      webpack({
        module: {
          rules: [
            {
              test: /\.js$/,
              use: {
                loader: "babel-loader",
                options: {
                  presets: []
                }
              }
            }
          ]
        },
        mode: PRODUCTION ? "production" : "development",
        devtool: !PRODUCTION ? "inline-source-map" : false,
        output: {
          filename: "[name].js"
        },
        externals: {
          jquery: "jQuery"
        }
      })
    )
    .pipe(dest("dist/js"));
};
const server = browserSync.create();
export const serve = done => {
  server.init({
    proxy: "localhost/astronomia" // put your local website link here
  });
  done();
};
export const reload = done => {
  server.reload();
  done();
};

// export const compress = () => {
//   return src([
//     "**/*",
//     "!node_modules{,/**}",
//     "!bundled{,/**}",
//     "!src{,/**}",
//     "!.babelrc",
//     "!.gitignore",
//     "!gulpfile.babel.js",
//     "!package.json",
//     "!package-lock.json"
//   ])
//     .pipe(
//       gulpif(
//         file => file.relative.split(".").pop() !== "zip",
//         replace("_themename", info.name)
//       )
//     )
//     .pipe(zip(`${info.name}.zip`))
//     .pipe(dest("bundled"));
// };

// export const pot = () => {
//   return src("**/*.php")
//     .pipe(
//       wpPot({
//         domain: "_themename",
//         package: info.name
//       })
//     )
//     .pipe(dest(`languages/${info.name}.pot`));
// };

export const watchForChanges = () => {
  watch("src/scss/**/*.scss", styles);
  watch("src/images/**/*.{jpg,jpeg,png,svg,gif}", series(images, reload));
  watch(
    ["src/**/*", "!src/{images,js,scss}", "!src/{images,js,scss}/**/*"],
    series(copy, reload)
  );
  watch("src/js/**/*.js", series(scripts, reload));
  watch("**/*.html", reload);
};

export const clean = () => del(["dist"]);
export const dev = series(
  clean,
  parallel(styles, images, copy, scripts),
  serve,
  watchForChanges
);

export default dev;

.babelrc

{
  "presets": ["@babel/preset-env"]
}

package.json

{
  "requires": true,
  "lockfileVersion": 1,
  "dependencies": {
    "@fullcalendar/core": "^4.3.1",
    "@fullcalendar/daygrid": "^4.3.0",
    "animate.css": "^3.7.0",
    "aos": "^2.3.4",
    "bootstrap": "^4.3.1",
    "gulp-header": "^2.0.7",
    "gulp-rename": "^1.4.0",
    "gulp-uglify": "^3.0.1",
    "gulp-watch": "^5.0.1",
    "jquery": "^3.3.1",
    "popper.js": "^1.15.0"
  },
  "name": "astronomia",
  "version": "1.0.0",
  "main": "gulpfile.js",
  "scripts": {
    "start": "gulp",
    "build": "gulp build --prod"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.4.0",
    "@babel/preset-env": "^7.4.2",
    "@babel/register": "^7.4.0",
    "autoprefixer": "^9.5.0",
    "babel-loader": "^8.0.5",
    "browser-sync": "^2.26.3",
    "css-loader": "^3.2.0",
    "del": "^4.0.0",
    "gulp": "^4.0.0",
    "gulp-clean-css": "^4.0.0",
    "gulp-if": "^2.0.2",
    "gulp-imagemin": "^5.0.3",
    "gulp-postcss": "^8.0.0",
    "gulp-replace": "^1.0.0",
    "gulp-sass": "^4.0.2",
    "gulp-sourcemaps": "^2.6.5",
    "gulp-wp-pot": "^2.3.4",
    "gulp-zip": "^4.2.0",
    "ts-loader": "^6.2.0",
    "vinyl-named": "^1.1.0",
    "webpack-stream": "^5.2.1",
    "wiredep": "^4.0.0",
    "yargs": "^13.2.2"
  },
  "description": ""
}

Este curso está bueno pero creo falta actualizarlo

Ayuda por favor. Me sale esto, por qué?:

lo que hizo el profe:

No sé si les pasa que al escribir gulp nombreTarea les crea una carpeta y no ejecuta la tarea. Luego de muchas pruebas la solución fue desinstalar gulp y luego forzar la instalación.

npm uninstall  gulp

 npm i -g gulp --force

Por otro lado, para sass les recomiendo usar la librería

gulp-dart-sass

Para instalarla utilizan el siguiente comando

npm i --save-dev gulp-dart-sass

Si es que tienen problemas les recomiendo que en vez de poner el
npm install gulp-sass pongan
npm install --save-dev sass y en vez de esto
var sass = require(‘gulp-sass’); pongan esto
var sass = require(‘gulp-sass’)(require(‘sass’)); 💚💚

Hola, yo de nuevo, pero esta vez les explicare como compilar Sass a CSS, para ello les propongo esta manera, es sencilla y eficiente:

Para compilar Sass a CSS

1. Descargar sass

Npm install  -g sass

1. Comprobar que la descarga

sass -V

1. A sass se le debe pasar el archivo que va a compilar, seguido del archivo que esperamos que quede después de la compilación

sass --watch main.scss main.css

Nota: si quieren que el archivo CSS quede en otra carpeta, pueden usar el siguiente comando:

sass --watch main.scss ./src/styles/main.css

• Esto en caso de que el archivo .CSS le queramos en esta ruta. Todo esto es a manera de ejemplo.

Si ambos archivos están en rutas diferentes pues es lo mismo, primero se coloca la ruta en la que se encuentra el archivo .scss y luego se coloca la ruta en la que queremos el archivo .css

Todo esto se hace desde la terminal y para acabar o cancelar el script hacemos lo mismo que en esta clase explican, usamos ctrl + c

Hola, honestamente me pareció que gulp o al menos en esta clase, no es la mejor forma de hacer la compilación, para ello les propongo esta manera, es sencilla y eficiente:

Para compilar pug a HTML

1. Descargar pug

Npm install pug-cli -g

1. Comprobar que la descarga

pug -V

1. Para que pug vea los cambios y se compile solo el archivo index.pug al mismo nivel del index.html

Pug --watch index.pug

Si quieren que la compilación de un HTML bonito, usen lo siguiente:

Pug --watch index.pug --pretty

Eso es todo lo que deben hacer en el caso de pug.

Nota: si quieren que el archivo html quede en otra carpeta, pueden usar el siguiente comando:

Pug --watch carpeta/index.pug --out "./" --pretty

• Entre comillas indicamos la ruta en la que queremos que quede el archivo html compilado

Todo esto se hace desde la terminal y para acabar o cancelar el script hacemos lo mismo que en esta clase explican, usamos ctrl + c

¿Es necesario usar SASS o se puede otro pre procesador?

f

yo lo hice así pero en la terminal ni si quiera me jala el gulp sass

var gulp = require(‘gulp’);
var sass = require(‘gulp-sass’);
var concat = require(‘gulp-concat’);
var minifyCSS = require(‘gulp-minify-css’);
var version = require(’./package.json’);

//npm install gulp --save --only=dev
gulp.task(‘hello’, async () => {
console.log('Hello ');
});
//npm install gulp-sass

gulp.task(‘sass’, async () => {
return gulp
.src(‘scss/**/*.scss’)
.pipe(sass()) // Converts Sass to CSS with gulp-sass
.pipe(gulp.dest(‘public/stylesheets’));
});

No es mas agil usar webpack que Express?

Antes de conocer Webpack usaba Gulp

Esta clase esta genial!!!

Aquí el repositorio del proyecto:

https://github.com/rulotico/Platzi_DS/

Buena esa programación Neo

Dentro de los parametros del generador de express al igual que el --view=pug existe el --css=sass, y de esa forma ya se genera el preprocesador, pero con gulp se le pueden añadir nuevas tareas como el de minificar css

Hola, buena noches, en donde pudo encontrar las funciones que se van escribiendo en el gulpfile.js?

para quienes quieran un poco de norte el curso de SASS vale la pena.

Inicié un repo del curso, y GitHub me marca un error de seguridad en un archivo clean-css

No estoy seguro qué significa, alguien?

En mi caso tuve algunos problemas intentando instalar gulp-sass (algo como un problema de permisos o de un archivo que no encontraba, súper raro). Los corregí borrando node_modules de la raíz del proyecto y volví a lanzar un npm install, y luego de nuevo intenté y me funcionó

En Windows funciona igual el hello? A mí no me sale

Gulp y gulp-sass se instalan como dependencias globales o locales del proyecto?

al ver el resultado a simple vista prefiero prepros o usar direcatemente webpack

He visto mucho gulp en varios proyectos y no sabia para que rayos quesiera yo gulp, pero ahora con esta buena explicado 😃, se puede hacer más rápido el trabajo con prepros pero no me gusta cuando se trabaja con varios procesos (express, react, etc) ya que sobrecarga al computador con una interfaz gráfica que hace perder rendimiento si no tienes buenas caracteristicas en tu computador, webpack también es una muy buena opción.

siento que esto usaban hace años atrás para compilar scss.
ahora hay más tecnologías que nos ayudan y son mas fáciles de implementar.

En lo posible es mejor hacerlo por medio de la consola con npm y las banderas -w para escuchar, -c para comprimir y -o para indicar la salida

Instale gulp, gulp-cli y gulp-sass y todo como el profesor pero me aparece este error:

Con el comando gulp-Sass también (Sass mayuscula porque así lo escribí no es un error) Código:

Yo por lo general trabajo con pug y sass, y compilo con prepros

Bebes de luz, Intenté por horas instalar sass, es mucho más fácil si van acá https://www.npmjs.com/package/gulp-sass

Si no quieren installar Gulp de manera global, pueden correrlo de la siguiente manera:
- con npx gulp hello
- o crear un comando personalizado en package.json dentro de los scripts como por ejemplo “gulp”: “gulp hello”, y solo ejecutan npm run gulp en la terminal.

Saludos, espero les ayude, cualquier inquietud no duden en consultar.

creo que el audio está mono.

Yo tuve este error al querer ejecutar en la ventana de comandos el gulp sass, como ven en esta imagen, afortunadamente, lo pude solucionar de la siguiente manera.
Primero me salí de la carpeta (en la ventana de comandos) con cd… y volví al directorio general de la ventana, ahí ejecuté npm update, para actualizar el npm, después de eso volví al directorio donde estamos trabajando a la carpeta raíz y ejecuté la siguiente instrución:
npm install gulp-sass --save–dev
y con eso Listo!! pude corrrer el gulp sass sin problemas

Fecha: 28 Ene 2021

1. Comando para instalar gulp: npm install gulp -g

2. Comando para instalar scss: npm install scss

3. comando para instalar gulp-sass: npm install gulp-sass

4. Codigo del archivo gulpfile.js:

   var gulp = require(‘gulp’);
   var sass = require(‘gulp-sass’);

   gulp.task(‘hello’, done => {
   console.log(‘Hello World!!’)
   done()
   });

   gulp.task(‘sass’, async () => {
   return gulp
   .src(‘scss/**/*.scss’)
   .pipe(sass())//Convert Sass to CSS with gulp-sass - npm install gulp-sass
   .pipe(gulp.dest(‘public/stylesheets’))
   });

5. Codigo del archivo main.scss

   .test{
   color:white;
   .test2{
   color:black;
   }
   }

Saludos

Para facilitarles MUCHO la vida les recomiendo la extensión de Live SASS compiler.
Este vídeo explica cómo usarla
Es muy sencillo y VS Code la maneja excelentemente.

Si estas utilizando windows y te sale error de asincronismo y no te finaliza… Lo puedes poner de este modo:

const gulp = require('gulp');

// npm install gulp --save --only=dev
gulp.task('hello', async function() {
  console.log('Hello!!!!! ');
})```