Conosco Sass e Gulp e i loro benefici, ma non ho idea di come usarli

Ovviamente, so che richiedono git, ma è lì che finisce la mia conoscenza.

Supponi di avere un file .scss che ho modificato e voglio compilarlo e posizionarlo sul mio server remoto per vedere come appare. E adesso?

Ci sono pochissime informazioni su come farlo effettivamente. Lo stesso con Gulp.

Sento che mi manca una specie di intermediario qui.

Qualcuno può indicarmi la giusta direzione?

1. Installa Node.js
2. Installa Gulp a livello globale connpm install gulp-cli --global
3. Crea una nuova directory per le tue attività Gulp e i file Sass
4. All'interno di quella cartella inizializzare npm connpm init
5. Installa Gulp e Sass con npm install gulp gulp-sass --save-dev
6. Crea un gulpfile.jscon il seguente contenuto:

var gulp = request ('gulp')

var sass = request ('gulp-sass')

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

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

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

7. Crea una cartella chiamata scsscon un file chiamatomain.scss
8. Ora puoi costruirlo con gulpe guardarlo congulp watch

Ti consiglio di usare anche PostCSS con cssnext per la correzione automatica e gulp-clean-css per minimizzare il tuo CSS. Per usarlo devi fare le seguenti cose:

1. Installali con npm install gulp-postcss postcss-cssnext gulp-clean-css --save-dev
2. Cambia il tuo gulpfile.jsin quanto segue:

var gulp = request ('gulp')

var cssnext = request ('postcss-cssnext')
var cleancss = require ('gulp-clean-css')
var postcss = require ('gulp-postcss')
var sass = request ('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 ('default', ['scss'])

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

Ti consiglio anche di leggere questo per conoscere il Sass Bascis.

Ci sono alcuni siti Web che contengono video su come utilizzare vari componenti di sviluppo web. Ecco un elenco alfabetico di luoghi, dove è possibile guardare una serie di video su vari argomenti di programmazione:

1. https://www.codeschool.com
2. https://www.lynda.com
3. https://www.khanacademy.org
4. https://www.youtube.com (cerca semplicemente Git o Gulp, sviluppo Web, ecc ...)

Per Git , ti consigliamo di ottenere uno di questi software in quanto hanno GUI visive:

1. GitHub
2. SmartGit
3. Atlassian SourceTree

La CLI (Command Line Interface) è più per utenti esperti. Almeno puoi iniziare a imparare come funziona Git, osservando come funzionano le ramificazioni e le fusioni. Ecco la pagina ufficiale su come funziona Git Branching . Le illustrazioni aiuteranno a dare un senso alle etichette / tag di derivazione, utilizzate dal software. Non è un processo facile da imparare su Git ... ma con un po 'di lavoro e pazienza, puoi prenderlo come un'abilità per il tuo skillset.

Saas è un sistema di compilazione flessibile per i file CSS. Ti consente di aggiungere un po 'di logica ai tuoi file CSS come modelli e rendere più semplice la modifica di determinati valori al momento della creazione. Un esempio è dove vuoi cambiare un colore di carattere per un gran numero di elementi, il metodo precedente era quello di passare attraverso il file CSS e cambiare ciascuna regola CSS separatamente e potrebbe richiedere molto tempo, un nuovo metodo con Saas se lo usi è quello di specificare il valore nel file .scss come una variabile e definirlo nella parte superiore del documento o attraverso una configurazione, quindi quando si creano i file .scss in file .css le variabili vengono sostituite con il valore che rappresentano. ( http://sass-lang.com/ )

Gulp è solo un sistema di automazione della build. Gulp può essere utilizzato da un numero di IDE e da una vasta gamma di lingue ed è commercializzato come un kit di strumenti per aiutare ad automatizzare le attività che richiedono tempo nel flusso di lavoro di sviluppo. ( http://gulpjs.com/ )