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

8

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?

MeltingDog
quelle
Sie benötigen kein Git - aber Gulp und Grunt (und Browserify und Webpack) benötigen node.js. Sass benötigt Ruby. Nur um die Verwirrung zu verstärken;)
Tim Malone

Antworten:

2
  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'])
})
  1. Erstellen Sie einen Ordner scssmit einer aufgerufenen Dateimain.scss
  2. 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.

wb9688
quelle
2
Vielen Dank! So etwas brauchte ich. Mein Problem war, dass es jede Menge Anleitungen für jeden einzelnen gab, aber ich hatte keine Ahnung, wie ich sie kombinieren und zusammenarbeiten lassen sollte.
MeltingDog
5

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.

Clomp
quelle
2

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/ )

Chris Rutherfurd
quelle
3
Und keiner braucht Git.
DisgruntledGoat
Aber sie erfordern node.js ... Übrigens haben Sie Saas anstelle von Sass zweimal eingegeben.
wb9688
@ wb9688 nicht ganz wahr. Es gibt verschiedene Möglichkeiten, SASS zu kompilieren, beispielsweise LibSass.
Simon Hayter
Danke für die Antwort. Ich weiß, was sie tun - SASS klingt bei Variablen und Verschachtelungen sehr nützlich. Das macht Sinn. Aber was jetzt? Wie fange ich als Front-End-Entwickler (der Kenntnisse in HTML, CSS und JS hat) an, es tatsächlich zu verwenden? Ich kenne Git oder Command Line nicht - es ist nicht mein Bereich.
MeltingDog
@MeltingDog benötigt / verwendet Git nicht, übrigens, um Ihnen zu helfen, damit zu beginnen, müssen Sie erwähnen, welches Betriebssystem Sie verwenden ...
wb9688