Sé sobre Sass y Gulp y sus beneficios, pero no tengo idea de cómo usarlos.

Obviamente, sé que requieren git, pero ahí es donde termina mi conocimiento.

Digamos que tengo un archivo .scss que he editado y quiero compilarlo y colocarlo en mi servidor remoto para ver cómo se ve. ¿Ahora que?

Hay muy poca información sobre cómo hacer esto realmente. Lo mismo con Gulp.

Siento que me falta algún tipo de intermediario aquí.

¿Alguien puede señalarme en la dirección correcta?

1. Instalar Node.js
2. Instale Gulp globalmente connpm install gulp-cli --global
3. Cree un nuevo directorio para sus tareas de Gulp y archivos Sass
4. Dentro de esa carpeta, inicialice npm connpm init
5. Instale Gulp y Sass con npm install gulp gulp-sass --save-dev
6. Cree un gulpfile.jscon el siguiente contenido:

var gulp = require ('trago')

var sass = require ('gulp-sass')

gulp.task ('scss', function () {
  gulp.src ('scss / main.scss')
  .pipe (sass ())
  .pipe (gulp.dest ('./ build / css'))
})

gulp.task ('predeterminado', ['scss'])

gulp.task ('watch', function () {
  gulp.watch ('scss / ** / *. scss', ['scss'])
})

7. Cree una carpeta llamada scsscon un archivo llamadomain.scss
8. Ahora puedes construirlo gulpy verlo congulp watch

Le recomiendo que también use PostCSS con cssnext para la corrección automática y gulp-clean-css para minimizar su CSS. Para usar eso tienes que hacer lo siguiente:

1. Instalarlos con npm install gulp-postcss postcss-cssnext gulp-clean-css --save-dev
2. Cambie su gulpfile.jsa lo siguiente:

var gulp = require ('trago')

var cssnext = require ('postcss-cssnext')
var cleancss = require ('gulp-clean-css')
var postcss = require ('gulp-postcss')
var sass = require ('gulp-sass')

gulp.task ('scss', function () {
  gulp.src ('scss / main.scss')
  .pipe (sass ())
  .pipe (postcss ([cssnext ()]))
  .pipe (cleancss ())
  .pipe (gulp.dest ('./ build / css'))
})

gulp.task ('predeterminado', ['scss'])

gulp.task ('watch', function () {
  gulp.watch ('scss / ** / *. scss', ['scss'])
})

También te recomiendo que leas esto para aprender sobre Sass bascis.

Hay algunos sitios web que tienen videos sobre cómo usar varios componentes de desarrollo web. Aquí hay una lista alfabética de lugares, donde uno puede ver una serie de videos sobre varios temas de programación:

1. https://www.codeschool.com
2. https://www.lynda.com
3. https://www.khanacademy.org
4. https://www.youtube.com (Simplemente busque Git o Gulp, Desarrollo web, etc.)

Para Git , querrás obtener una de estas piezas de software, ya que tienen GUI visuales:

1. GitHub
2. SmartGit
3. Atlassian SourceTree

La CLI (interfaz de línea de comandos) es más para usuarios avanzados. Al menos puede comenzar a aprender cómo funciona Git, observando cómo funciona la ramificación y la fusión. Aquí está la página oficial sobre cómo funciona Git Branching . Las ilustraciones ayudarán a dar sentido a las etiquetas / etiquetas de ramificación, que utiliza el software. No es un proceso fácil de aprender sobre Git ... pero con un poco de trabajo y paciencia, puedes elegirlo como una habilidad para tu conjunto de habilidades.

Saas es un sistema de compilación flexible para archivos CSS. Le permite agregar un poco de lógica a sus archivos CSS como plantillas y facilitar el cambio de ciertos valores en el momento de la compilación. Un ejemplo es donde desea cambiar un color de fuente para una gran cantidad de elementos, el método anterior era revisar el archivo CSS y cambiar cada regla CSS por separado y podría llevar mucho tiempo, el nuevo método con Saas si lo usa es especifique el valor en el archivo .scss como una variable y para definirlo en la parte superior del documento o mediante una configuración, luego, cuando cree los archivos .scss en archivos .css, las variables se reemplazarán con el valor que representan. ( http://sass-lang.com/ )

Gulp es solo un sistema de automatización de compilación. Gulp se puede utilizar desde varios IDE y una amplia gama de idiomas y se comercializa como un conjunto de herramientas para ayudar a automatizar tareas que requieren mucho tiempo en el flujo de trabajo de desarrollo. ( http://gulpjs.com/ )