Der einfachste Weg, Autoprefixer zu verwenden?

Question

Was ich tun möchte, ist einfach ein Werkzeug, das meine CSS beobachten und automatisch voranstellen kann. Zuvor ich pleeease.io wurde mit, es ist sehr einfach für Anfänger wie mich, nachdem es durch NPM installieren, was ich tun muss, ist eine Optionsdatei (.pleeeaserc) zu erstellen, dann

pleeease watch 

tun Danach kann ich Focus auf meine CSS, jedes Mal, wenn ich Änderungen an meiner CSS-Datei vornehmen, wird es verarbeitet und ausgegeben.

Leider scheint es, der Autor hat es aufgehört beibehalten, wenn ich

npm install pleeease 

auf meinem neuen Server zu tun bekam ich viele Fehler und die Installation fehlgeschlagen.

Ich denke, es ist Zeit für mich zu lernen, wie man autoprefixer direkt verwendet, was ich glaube, pleeease integriert als eine seiner Abhängigkeiten.

Allerdings finde ich die Lernkurve ist ein bisschen zu viel für mich: Um Autoprefixer zu verwenden, muss ich PostCSS lernen; und PostCSS läuft normalerweise mit Grunt oder Gulp; Um Aufgabenläufer zu verwenden, muss ich etwas über npm und node.js wissen. Ich weiß, dass dies alles nützliche Werkzeuge sind, die viel Zeit sparen können, mit denen ich viel mehr als nur Autoprefixing machen kann. Ich werde später tiefer in sie eintauchen, aber unter meinem gegenwärtigen Druck brauche ich wirklich eine Abkürzung wie pleeease, um autoprefixer zum Laufen zu bringen, ohne alle Dokumente und Artikel über PostCSS verdauen zu müssen. Ich hoffe, ich kann so etwas tun

[postcss|autoprefixer|something else] watch 

unter meinem scss Ordner und jedes Mal, wenn ich Änderungen vornehmen zu und speichern input.scss, eine output.scss-Datei generiert wird.

So habe ich einige Fragen, zum Teil meiner Bemühungen auf PostCSS Lernen und/oder sich autoprefixer Arbeit so einfach wie möglich:

1) Um zu klären, was die Beziehung zwischen PostCSS und PostCSS-cli ist? Hängt letzteres von dem ersteren ab oder schließt es ein?

2) Und ermöglicht die Installation des letzteren nur die Möglichkeit, den Befehl postcss in der Befehlszeilenschnittstelle zu verwenden?

3) Ich habe npm install -g postcss-cli, aber ich kann immer noch nicht verwenden postcss Befehl, was habe ich falsch gemacht?

4) Um Dateiänderungen zu sehen und automatisch kompilieren zu können, muss ich Task Runner wie Grunt oder Gulp zusammen mit PostCSS verwenden?

5) Was ist der Unterschied zwischen npm install postcss und npm install grunt-postcss?

Answer 1

"What I want to do is simply have a tool that can watch and auto prefix my css."

Ja, Sie können dies mit Zug leicht tun, die Sie und läuft in wenigen Minuten bekommen. Es gibt viele "erste Schritte" Walkthroughs online. Sie müssen wirklich nichts über PostCSS wissen, um Autoprefixer zu verwenden. Diese Aufgabe unten kompiliert alle Ihre Sass, führen Sie Autoprefixer und geben Sie eine entsprechende CSS-Datei, immer wenn Sie eine. SCSD-Datei speichern:

gulpfile.js

var gulp = require('gulp'), 
     $ = require('gulp-load-plugins')(); 


    gulp.task('watch',() => { 
     gulp.watch('src/**/*.scss', ['sass']); 
    }); 

    gulp.task('sass',() => { 
     return gulp.src('src/**/*.scss') 
      .pipe($.sass()) 
      .pipe($.autoprefixer()) 
      .pipe(gulp.dest('dest')); 
    }); 

Answer 2

1) Um zu klären, was ist die Beziehung zwischen PostCSS und PostCSS-cli? Hängt letzteres von dem ersteren ab oder schließt es ein?

Die Antwort auf Frage 5 beantwortet diese Frage teilweise, für was postcss verwendet wird. Der andere soll von der Befehlszeile aus ausgeführt werden. PostCSS-cli ist eine Binärdatei, die andere ist ein in Javascript geschriebenes NPM-Paket.

2) Und ermöglicht die Installation der letzteren nur die Möglichkeit, den postcss-Befehl in der Befehlszeilenschnittstelle zu verwenden?

Ja.

3) Ich habe npm installiert -g postcss-cli, aber ich kann immer noch nicht postcss Befehl verwenden, was habe ich falsch gemacht?

Es ist besser, lokal zu installieren, etwa so:

npm i postcss-cli --save-dev 

Dann können Sie wie so verwenden:

node_modules/postcss-cli/bin/postcss -c config.json 

Oder fügen Sie ein Skript in package.json wie so:

"scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1", 
    "build": "node_modules/postcss-cli/bin/postcss -c config.json", 
    "watch": "node_modules/postcss-cli/bin/postcss -c config.json -w", 
    "minify": "node_modules/postcss-cli/bin/postcss -c config-minify.json" 
}, 

Hinweis: Relative Pfade sind im Abschnitt scripts nicht erforderlich. Ich stelle sie ein, um die lokale Verwendung von postcss-cli anzuzeigen. Sie könnten einfach verwenden:

... 
"build": "postcss -c config.json" 
... 

Sie können dann laufen:

npm run build 

4) Dateiänderung zu beobachten und automatisch kompilieren, muss ich Aufgabe Läufer wie Grunt verwenden müssen oder Gulp zusammen mit PostCSS ?

Nein. PostCSS-cli kann dies tun:

node_modules/postcss-cli/bin/postcss -c config.json -w 

Oder, wie Skript package.json hinzufügen wie oben in meinem Beispiel zu sehen. Dann führen Sie einfach:

npm run watch 

5) Was ist der Unterschied zwischen npm installieren postcss und npm Grunzen-postcss installieren?

Die später für Schluck verwendet wird, wird die erstere verwendet grunt-postcss, postcss-brunch usw. zu bauen

Um autoprefixer mit postcss-cli auf der Kommandozeile Sie tun zu verwenden:

postcss --use autoprefixer --autoprefixer.browsers "> 5%" -o output.css input.css 

Diese in the docs aufgeführt und ist recht einfach zu folgen.