Ein einfacher Schluck ' y Workflow für Sass

Key Takeaways

• Ein Gulp -Workflow kann die SASS -Kompilierungszeit in großen Schienenprojekten verbessern, sich von der Asset -Pipeline entfernen und die Geschwindigkeit von Libssas umarmen.
• Der Gulp -Workflow enthält eine SASS -Kompilierung mit libas, generiert Sourcemaps zum einfacheren Debuggen, Präfixing von CSS mit Autoprefixer und Generierung von SASS -Dokumentation mit SassDoc.
• Der Workflow kann weiter optimiert werden, indem eine Uhrenaufgabe hinzugefügt wird, die Änderungen der Stylesheets überwacht, um sie neu zu kompilieren, und die Notwendigkeit, die SASS -Aufgabe nach jeder Speicherdatei manuell auszuführen
Eine "prod" -Ag -Aufgabe kann für die Bereitstellung für die Produktion erstellt werden, die SASS im komprimierten Modus kompiliert, CSS mit Autoprefixer vorfixiert, die SassDOC -Dokumentation regeneriert und alle Sourcemaps vermieden werden.

Ich war kürzlich für die Optimierung der Sass -Seite eines ziemlich großen Rails -Projekts verantwortlich, und eines der wichtigsten Dinge war, die Zusammenstellungszeit zu verbessern. Aufgrund der vorhandenen Sass -Architektur und der Tatsache, dass Ruby Sass (durch die Rails Asset Pipeline in diesem Fall) im Umgang mit einer großen Anzahl von Dateien tendenziell langsam ist, könnte es bis zu 40 Sekunden dauern, die Stylesheets zu kompilieren. Sprechen Sie über einen schnellen Entwicklungsprozess. :)

Meine Idee war es, mich von der Asset -Pipeline zu entfernen und die Geschwindigkeit der Bibliotheken zu umarmen. Um die Dinge zu erleichtern, entschied ich mich für einen einfachen Gulp -Workflow. Es war das erste Mal, dass ich Schluck benutze, und ich muss sagen, dass es eine ziemlich unterhaltsame Erfahrung war (was für mich nicht der Fall war).

.

Machen wir in diesem kurzen Artikel nur eine kurze Tour, wie Sie einen schlupfenden Workflow für die Arbeit mit SASS einrichten. Hier ist, was wir einschließen werden:

• nicht überraschend, Sass Compilation mit libasser
• Sourcemaps generieren, um
zu erleichtern
• CSS mit autoprefixer
vorangestellt
Sass -Dokumentation mit Sassdoc

generieren

sass kompilieren Beobachten Sie Atoz: Sass Lernen Sie Sass Letter nach Brief

Sehen Sie sich diesen Kurs an Sehen Sie sich diesen Kurs an

Das erste, was zu tun ist, ist, die Abhängigkeiten zu installieren und eine gulpfile.js zu erstellen. Wir brauchen Schlucken (keine Scheiße, Sherlock), aber auch Schluck-Sass, um unsere Stylesheets zu kompilieren:

$ <span>npm install gulp gulp-sass --save-dev</span>

Diese Zeile sagt, dass NPM sowohl Gulp- als auch Gulp-SASS-Pakete als Entwicklungsabhängigkeiten installieren soll. Sie können sie jetzt im Objekt Ihres Pakets Ihres Pakets finden.json. Und die gulpfile.js:

<span>var gulp = require('gulp');
</span><span>var sass = require('gulp-sass');</span>

wow, das war kurz. Was wir jetzt brauchen, ist eine Aufgabe

, um Sass (eigentlich Gulp-Sass) in unserem Stylesheets-Ordner auszuführen.

$ <span>npm install gulp gulp-sass --save-dev</span>

Das ist es! Dank einer sehr minimalen Gulp -Aufgabe können wir jetzt unsere Stylesheets mit Libas zusammenstellen. Was ist damit? Wir können Optionen an Gulp-SAss übergeben, um Stylesheets im erweiterten Modus zu kompilieren und Fehler in der Konsole zu drucken:

<span>var gulp = require('gulp');
</span><span>var sass = require('gulp-sass');</span>

Sourcemaps

hinzufügen

so weit, so gut. Was ist nun mit der Erzeugung von Sourcemaps? Falls Sie nicht wissen, was Sourcemaps sind, ist dies im Grunde eine Möglichkeit, komprimierte Produktionsquellen mit erweiterten Entwicklungsquellen zu kartieren, um das Debugging -Live -Code zu erleichtern. Sie sind überhaupt nicht auf CSS beschränkt, Sourcemaps können auch in JavaScript verwendet werden.

Wir haben einen schönen Artikel über Sourcemaps hier auf SitePoint. Fühlen Sie sich frei, es zu lesen, bevor Sie das Verständnis von Sourcemaps ein bisschen kurz fühlen.

Okay, um unserer Aufgabe die Erzeugung von Sourcemaps hinzuzufügen, müssen wir Gulp-Sourcemaps installieren:

<span>var input = './stylesheets/**/*.scss';
</span><span>var output = './public/css';
</span>
gulp<span>.task('sass', function () {
</span>  <span>return gulp
</span>    <span>// Find all `.scss` files from the `stylesheets/` folder
</span>    <span>.src(input)
</span>    <span>// Run Sass on those files
</span>    <span>.pipe(sass())
</span>    <span>// Write the resulting CSS in the output folder
</span>    <span>.pipe(gulp.dest(output));
</span><span>});</span>

Und jetzt optimieren wir unsere Aufgabe:

<span>var sassOptions = {
</span>  <span>errLogToConsole: true,
</span>  <span>outputStyle: 'expanded'
</span><span>};
</span>
gulp<span>.task('sass', function () {
</span>  <span>return gulp
</span>    <span>.src(input)
</span>    <span>.pipe(sass(sassOptions).on('error', sass.logError))
</span>    <span>.pipe(gulp.dest(output));
</span><span>});</span>

standardmäßig schreibt Gulp-Sourcemaps die Sourcemaps-Inline in den kompilierten CSS-Dateien. Abhängig vom Projektaufbau möchten wir sie möglicherweise in separaten Dateien schreiben. In diesem Fall können wir einen Pfad relativ zum Ziel gulp.dest () in der Sourcemaps.Write () -Funktion wie:

angeben:

$ <span>npm install gulp-sourcemaps --save-dev</span>

Autoprefixer in die Party

bringen

Ich werde nicht viel Details darüber eingehen, warum die Verwendung von Autoprefixer besser ist, als Anbieter von Hand zu schreiben (oder mit einem Mixin, das im Grunde dasselbe ist), aber grob Autoprefixer ist ein Nachbearbeitungsschritt, was bedeutet Stylesheets zum Hinzufügen relevanter Präfixe basierend auf einer aktuellen Datenbank und einer bestimmten Konfiguration. Mit anderen Worten, Sie teilen Autoprefixer mit, welche Browser Sie unterstützen möchten, und es fügt den Stylesheets nur relevante Präfixe hinzu. Null Mühe, perfekte Unterstützung (bitte erinnern Sie mich daran, diesen Fangausdruck zu patentieren). Um den Autoprefixer in unseren schlupfenden Workflow aufzunehmen, brauchen wir ihn nur für

pipe

IT, nachdem Sass seine Sache getan hat. Dann aktualisiert Autoprefixer die Stylesheets, um Präfixe hinzuzufügen.

<span>var gulp = require('gulp');
</span><span>var sass = require('gulp-sass');
</span><span>var sourcemaps = require('gulp-sourcemaps');
</span>
<span>// ... variables
</span>
gulp<span>.task('sass', function () {
</span>  <span>return gulp
</span>    <span>.src(input)
</span>    <span>.pipe(sourcemaps.init())
</span>    <span>.pipe(sass(sassOptions).on('error', sass.logError))
</span>    <span>.pipe(sourcemaps.write())
</span>    <span>.pipe(gulp.dest(output));
</span><span>});</span>

Erstens installieren wir es (Sie erhalten das Gist inzwischen):

gulp<span>.task('sass', function () {
</span>  <span>return gulp
</span>    <span>.src(input)
</span>    <span>.pipe(sourcemaps.init())
</span>    <span>.pipe(sass(sassOptions).on('error', sass.logError))
</span>    <span>.pipe(sourcemaps.write('./stylesheets/maps'))
</span>    <span>.pipe(gulp.dest(output));
</span><span>});</span>

Dann fügen wir es unserer Aufgabe hinzu:

Im Moment laufen wir mit der Standardkonfiguration von autoprefixer, die
• ist
• Browser mit über 1% Marktanteil,
• Letzte 2 Versionen aller Browser,
• Firefox ESR,

Opera 12.1

$ <span>npm install gulp-autoprefixer --save-dev</span>

Wir können unsere eigene Konfiguration wie SO verwenden:

Veröffentlichen Sie die Dokumente!

Das letzte, aber nicht zuletzt Tool, um unseren Workflow, Sass -Dokumentationsgenerierung mit Sassdoc hinzuzufügen. Sassdoc soll Sass, was JSDOC für JavaScript ist: ein Dokumentationstool. Es analysiert Ihre Stylesheets, die nach Kommentarblöcken suchen, in denen Variablen, Mixins, Funktionen und Platzhalter dokumentiert werden.

Wenn Ihr Projekt SASSDOC verwendet (es sollte!), Können Sie die automatische Dokumentationsgenerierung in Ihren Gulp -Workflow hinzufügen.

Das coole Ding mit Sassdoc ist, dass es direkt in Schluck gelobt werden kann, da seine API geschliffen ist. Sie haben also kein Gulp-Sassdoc-Plugin.

$ <span>npm install gulp gulp-sass --save-dev</span>

<span>var gulp = require('gulp');
</span><span>var sass = require('gulp-sass');</span>

Beachten separate Aufgabe dafür.

<span>var input = './stylesheets/**/*.scss';
</span><span>var output = './public/css';
</span>
gulp<span>.task('sass', function () {
</span>  <span>return gulp
</span>    <span>// Find all `.scss` files from the `stylesheets/` folder
</span>    <span>.src(input)
</span>    <span>// Run Sass on those files
</span>    <span>.pipe(sass())
</span>    <span>// Write the resulting CSS in the output folder
</span>    <span>.pipe(gulp.dest(output));
</span><span>});</span>

Auch hier verwenden wir die Standardkonfiguration, können aber unsere eigenen verwenden, wenn wir möchten.

<span>var sassOptions = {
</span>  <span>errLogToConsole: true,
</span>  <span>outputStyle: 'expanded'
</span><span>};
</span>
gulp<span>.task('sass', function () {
</span>  <span>return gulp
</span>    <span>.src(input)
</span>    <span>.pipe(sass(sassOptions).on('error', sass.logError))
</span>    <span>.pipe(gulp.dest(output));
</span><span>});</span>

Ich beobachte dich

Es gibt immer noch etwas, das wir vor dem Abbruch tun können: Erstellen einer Uhrenaufgabe. In diesem Grund wäre es, nach Änderungen in Stylesheets zu achten, um sie erneut zu kompilieren. Es ist sehr bequem, wenn Sie auf der SASS -Seite des Projekts arbeiten, sodass Sie die SASS -Aufgabe nicht jedes Mal von Hand ausführen müssen, wenn Sie eine Datei speichern.

$ <span>npm install gulp-sourcemaps --save-dev</span>

Hier ist ein weiterer Grund, warum ich empfehle, Sassdoc in die SASS -Aufgabe nicht aufzunehmen: Sie möchten die Dokumente wahrscheinlich nicht jedes Mal regenerieren, wenn Sie ein Stylesheet berühren. Dies ist wahrscheinlich etwas, das Sie auf Build oder Push tun möchten, vielleicht mit einem Vorkommachthaken.

Hinzufügen des letzten Touchs

Eine letzte und doch wichtige Sache, über die man nachdenken sollte: Sass in der Standardaufgabe ausführen.

<span>var gulp = require('gulp');
</span><span>var sass = require('gulp-sass');
</span><span>var sourcemaps = require('gulp-sourcemaps');
</span>
<span>// ... variables
</span>
gulp<span>.task('sass', function () {
</span>  <span>return gulp
</span>    <span>.src(input)
</span>    <span>.pipe(sourcemaps.init())
</span>    <span>.pipe(sass(sassOptions).on('error', sass.logError))
</span>    <span>.pipe(sourcemaps.write())
</span>    <span>.pipe(gulp.dest(output));
</span><span>});</span>

Das Array als zweites Argument der Funktion (..) ist eine Liste von Abhängigkeitsaufgaben. Grundsätzlich fordert es Gulp auf, diese Aufgaben auszuführen, bevor das als dritte Argument angegebene (falls vorhanden) ausgeführt wird.

Außerdem könnten wir wahrscheinlich eine Produktaufgabe erstellen, die kurz vor der Bereitstellung für die Produktion ausgeführt werden könnte (möglicherweise mit einem Git -Haken). Diese Aufgabe sollte:

• SASS im komprimierten Modus
kompilieren
• Präfix -CSS mit autoprefixer
• Sassdoc -Dokumentation
regenerieren
• Vermeiden Sie Sourcemaps

gulp<span>.task('sass', function () {
</span>  <span>return gulp
</span>    <span>.src(input)
</span>    <span>.pipe(sourcemaps.init())
</span>    <span>.pipe(sass(sassOptions).on('error', sass.logError))
</span>    <span>.pipe(sourcemaps.write('./stylesheets/maps'))
</span>    <span>.pipe(gulp.dest(output));
</span><span>});</span>

endgültige Gedanken

Das ist es, Leute! In nur wenigen Minuten und ein paar Zeilen JavaScript haben wir es geschafft, einen leistungsstarken Little Gulp Workflow zu erstellen. Hier finden Sie die vollständige Datei. Was würdest du dazu hinzufügen?

häufig gestellte Fragen (FAQs) zu Gulp und Sass Workflow

Wie installiere ich Gulp und SASS für mein Projekt? Sobald Sie diese haben, können Sie Gulp global installieren, indem Sie den Befehl npm install-GloBal Gulp-Cli in Ihrem Terminal ausführen. Navigieren Sie danach zu Ihrem Projektverzeichnis und führen Sie NPM Init aus, um eine Paket.json -Datei zu erstellen. Installieren Sie dann Gulp und Gulp-Sass in Ihrem Projekt, indem Sie NPM installieren-Save-dev Gulp Gulp-Sass.

Wie kompile ich meine SASS -Dateien mit Gulp? In Ihrem gulpFile.js können Sie eine Aufgabe namens "SASS" erstellen, die Ihre SASS -Dateien in CSS zusammenstellt. Hier ist ein einfaches Beispiel dafür: ('Sass', function () {

return gulp.src ('./ Sass/** /*. scss ')

.pipe (Sass (). On (' Fehler ', Sass.logerror))
.pipe (gulp.dest (' ./ CSS '));
}) ;

Diese Aufgabe nimmt alle .scSS-Dateien in Ihr SASS-Verzeichnis auf, kompiliert sie mit Gulp-SAS Ihr CSS -Verzeichnis. So können Sie die Aufgabe "Sass" ändern, um nach Änderungen zu achten:

gulp.task ('Sass', function () {
gulp.watch ('./ Sass/**/*. scss',, ['SASS']); 🎜>
Wie behandle ich Fehler in meinen Sass -Dateien? Sie können diese Fehler mithilfe der von Gulp-SASS bereitgestellten Methode behandeln. So können Sie die Aufgabe "SASS" ändern, um Fehler zu protokollieren:

gulp.task ('SASS', function () {
return gulp.src ('./ Sass/**/*. scss ')

.pipe (Sass (). On (' Fehler ', Sass.logerror))

.pipe (gulp.dest ('./ CSS')); Aufgabe.

Wie verwende ich Gulp, um meine CSS -Dateien zu minimieren? Plugin namens Gulp-Clean-CSS. Installieren Sie es zunächst in Ihrem Projekt, indem Sie NPM installieren-Save-Dev-Gulp-C-CSS. Anschließend können Sie eine Aufgabe erstellen, die Ihre CSS-Dateien minimiert:

var cleanCSS = Request ('Gulp-CLEAN-CSS');

gulp.task ('Minify-CSS', () => {
return gulp.src ('styles/*. CSS')
.pipe (CleanCSS ({Kompatibilität: 'IE8'}))

.pipe (gulp.dest ('dist'); GULP-CLEAN-CSS und geben Sie die resultierenden Minimified CSS-Dateien in Ihrem DIST-Verzeichnis aus.

Das obige ist der detaillierte Inhalt vonEin einfacher Schluck ' y Workflow für Sass. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!