Ich weiß über Sass und Gulp und ihre Vorteile Bescheid, aber ich habe keine Ahnung, wie ich sie tatsächlich verwenden soll

Natürlich weiß ich, dass sie Git brauchen, aber hier endet mein Wissen.

Angenommen, ich habe eine .scss-Datei, die ich bearbeitet habe, und ich möchte sie kompilieren und auf meinem Remote-Server ablegen, um zu sehen, wie sie aussieht. Was jetzt?

Es gibt nur sehr wenige Informationen darüber, wie dies tatsächlich zu tun ist. Gleiches gilt für Gulp.

Ich habe das Gefühl, dass mir hier eine Art Mittelsmann fehlt.

Kann mich jemand in die richtige Richtung weisen?

1. Installieren Sie Node.js.
2. Installieren Sie Gulp global mitnpm install gulp-cli --global
3. Erstellen Sie ein neues Verzeichnis für Ihre Gulp-Aufgaben und Sass-Dateien
4. In diesem Ordner initialisieren Sie npm mitnpm init
5. Installieren Sie Gulp und Sass mit npm install gulp gulp-sass --save-dev
6. Erstellen Sie eine gulpfile.jsmit folgendem Inhalt:

var gulp = erfordern ('gulp')

var sass = erfordern ('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. Erstellen Sie einen Ordner scssmit einer aufgerufenen Dateimain.scss
8. Jetzt können Sie es mit bauen und mit gulpansehengulp watch

Ich empfehle Ihnen, PostCSS mit cssnext auch zum automatischen Fixieren und gulp-clean-css zum Minimieren Ihres CSS zu verwenden. Um dies zu verwenden, müssen Sie die folgenden Dinge tun:

1. Installieren Sie sie mit npm install gulp-postcss postcss-cssnext gulp-clean-css --save-dev
2. Ändern Sie Ihre gulpfile.jszu folgenden:

var gulp = erfordern ('gulp')

var cssnext = require ('postcss-cssnext')
var cleancss = require ('gulp-clean-css')
var postcss = require ('gulp-postcss')
var sass = erfordern ('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'])
})

Ich empfehle Ihnen auch, dies zu lesen , um mehr über die Sass-Bascis zu erfahren.

Es gibt einige Websites mit Videos zur Verwendung verschiedener Webentwicklungskomponenten. Hier ist eine alphabetische Liste von Orten, an denen man eine Reihe von Videos zu verschiedenen Programmierthemen ansehen kann:

1. https://www.codeschool.com
2. https://www.lynda.com
3. https://www.khanacademy.org
4. https://www.youtube.com (Einfach nach Git oder Gulp, Webentwicklung usw. suchen)

Für Git sollten Sie sich eine dieser Software-Versionen zulegen, da sie über visuelle GUIs verfügen:

1. GitHub
2. SmartGit
3. Atlassian SourceTree

Die CLI (Command Line Interface) ist eher für Hauptbenutzer gedacht. Zumindest können Sie lernen, wie Git funktioniert, indem Sie sich ansehen, wie Verzweigen und Zusammenführen funktioniert. Hier ist die offizielle Seite darüber, wie Git Branching funktioniert. Die Abbildungen helfen dabei, die von der Software verwendeten Beschriftungen / Verzweigungs-Tags zu verstehen. Es ist kein einfacher Prozess, etwas über Git zu lernen ... aber mit etwas Arbeit und Geduld können Sie es als Fertigkeit für Ihre Fähigkeiten erlernen.

Saas ist ein flexibles Build-System für CSS-Dateien. Sie können Ihren CSS-Dateien ein wenig Logik als Vorlagen hinzufügen und das Ändern bestimmter Werte beim Erstellen vereinfachen. Ein Beispiel ist, wo Sie eine Schriftfarbe für eine große Anzahl von Elementen ändern möchten. Die vorherige Methode bestand darin, die CSS-Datei zu durchsuchen und jede CSS-Regel separat zu ändern. Wenn Sie diese verwenden, kann dies bei Saas sehr lange dauern Geben Sie den Wert in der .scss-Datei als Variable an und definieren Sie ihn oben im Dokument oder über eine Konfiguration. Wenn Sie die .scss-Dateien in .css-Dateien erstellen, werden die Variablen durch den Wert ersetzt, den sie darstellen. ( http://sass-lang.com/ )

Gulp ist nur ein Build-Automatisierungssystem. Gulp kann in einer Reihe von IDEs und einer Vielzahl von Sprachen verwendet werden und wird als Toolkit vermarktet, um zeitaufwändige Aufgaben im Entwicklungsworkflow zu automatisieren. ( http://gulpjs.com/ )