Conheço Sass e Gulp e seus benefícios, mas não faço ideia de como usá-los.

Obviamente, eu sei que eles exigem git, mas é aí que o meu conhecimento termina.

Digamos que tenho um arquivo .scss que editei e desejo compilá-lo e colocá-lo no meu servidor remoto para ver sua aparência. E agora?

Há muito pouca informação sobre como realmente fazer isso. Mesmo com Gulp.

Sinto que estou sentindo falta de algum intermediário aqui.

Alguém pode me apontar na direção certa?

1. Instale o Node.js
2. Instale o Gulp globalmente comnpm install gulp-cli --global
3. Crie um novo diretório para suas tarefas Gulp e arquivos Sass
4. Dentro dessa pasta, inicialize o npm comnpm init
5. Instale Gulp e Sass com npm install gulp gulp-sass --save-dev
6. Crie um gulpfile.jscom o seguinte conteúdo:

var gulp = require ('gulp')

var sass = require ('gulp-sass')

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

gulp.task ('padrão', ['scss'])

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

7. Crie uma pasta chamada scsscom um arquivo chamadomain.scss
8. Agora você pode construí-lo gulpe assisti-lo comgulp watch

Eu recomendo que você também use o PostCSS com cssnext para autoprefixing e gulp-clean-css para reduzir seu CSS. Para usar isso, você deve fazer o seguinte:

1. Instale-os com npm install gulp-postcss postcss-cssnext gulp-clean-css --save-dev
2. Mude gulpfile.jspara o seguinte:

var gulp = require ('gulp')

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 ('padrão', ['scss'])

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

Também recomendo que você leia isso para aprender sobre o Sass bascis.

Existem alguns sites com vídeos sobre como usar vários componentes de desenvolvimento da web. Aqui está uma lista alfabética de lugares, onde é possível assistir a uma série de vídeos sobre vários assuntos de programação:

1. https://www.codeschool.com
2. https://www.lynda.com
3. https://www.khanacademy.org
4. https://www.youtube.com (basta pesquisar por Git ou Gulp, desenvolvimento da Web etc.)

Para o Git , você precisará obter um desses softwares, pois eles têm GUIs visuais:

1. GitHub
2. SmartGit
3. Atlassian SourceTree

A CLI (Command Line Interface) é mais para usuários avançados. Pelo menos você pode começar a aprender como o Git funciona, observando como a ramificação e a fusão funcionam. Aqui está a página oficial sobre como o Git Branching funciona. As ilustrações ajudarão a entender as etiquetas / ramificações usadas pelo software. Não é um processo fácil aprender sobre o Git ... mas com algum trabalho e paciência, você pode aprender como uma habilidade para o seu conjunto de habilidades.

Saas é um sistema de compilação flexível para arquivos CSS. Ele permite que você adicione um pouco de lógica aos seus arquivos CSS como modelos e facilita a alteração de certos valores no momento da construção. Um exemplo é o local em que você deseja alterar a cor da fonte para um grande número de elementos; o método anterior era passar pelo arquivo CSS e alterar cada regra CSS separadamente e, por outro lado, poderia demorar muito tempo. especifique o valor no arquivo .scss como uma variável e para defini-lo na parte superior do documento ou por meio de uma configuração. Quando você cria os arquivos .scss em arquivos .css, as variáveis ​​são substituídas pelo valor que elas representam. ( http://sass-lang.com/ )

Gulp é apenas um sistema de automação de construção. O Gulp pode ser usado em vários IDEs e em uma ampla variedade de linguagens e é comercializado como um kit de ferramentas para ajudar a automatizar tarefas demoradas no fluxo de trabalho de desenvolvimento. ( http://gulpjs.com/ )