Lukas
3 Minuten

Die Sache mit den Styles ist eine Wissenschaft für sich — gibt es doch mittlerweile unheimlich viele Tools und Sprachen, um am Ende eine einfache CSS-Datei zu erzeugen. Wir haben lange Zeit SCSS genutzt und waren damit auch relativ happy. Doch seit wir PostCSS nutzen, wollen wir es nicht mehr missen und haben SCSS durch PostCSS ersetzt.

PostCSS ist im Grund ganz normales CSS, das durch JavaScript, sogenannte "PostCSS-Plugins" transformiert wird. Und es gibt richtig viele, in der Praxis enorm nützliche PostCSS-Plugins! Dadurch nimmt uns das Tool im alltäglichen Einsatz viel Arbeit ab. In unserer aktuellen Konfiguration haben wir nur wenige PostCSS-Plugins im Einsatz, doch das genügt für die meisten Projekte vollkommen.

Wie aus SCSS bekannt können wir im CSS Variablen verwenden, schön und gut, nix weltbewegendes. Doch das nächste PostCSS-Plugin wird schon interessanter: Denn das Plugin ergänzt alle gewünschten Prefixes für unterschiedliche Browser und Browserversionen — welche Prefixes überhaupt benötigt werden, kann in jedem Projekt individuell definiert werden. Als letzter Schritt wird das Stylesheet minifiziert und ist somit perfekt vorbereitet für den Produktiveinsatz.

gulpfile.js

var gulp            = require('gulp');
var postcss         = require('gulp-postcss');
var postcssImport   = require('postcss-import');
var precss          = require('precss');
var autoprefixer    = require('autoprefixer');
var cssnano         = require('cssnano');

gulp.task('css:build', function () {
  return gulp
    .src('./src/style.css')
    .pipe(postcss([
      postcssImport(),
      precss(),
      autoprefixer({browsers: ['last 1 version']}),
      cssnano(),
    ]))
    .pipe(gulp.dest('./dest'));
});

gulp.task('css:watch', function() {
  gulp.watch('./src/**/*.css', ['css:build'])
})

gulp.task('dev', gulp.parallel('css:watch'));

gulp.task('prod', gulp.parallel('css:build'));

Damit die benötigten Packages installiert werden, fügt eurer package.json die folgenden devDependencies hinzu.

package.json

{
  "name": "gulp-pipeline-postcss",
  "devDependencies": {
    "autoprefixer": "^9.4.10",
    "cssnano": "^4.1.10",
    "gulp": "^4.0.0",
    "gulp-postcss": "^8.0.0",
    "postcss-import": "^12.0.1",
    "precss": "^4.0.0"
  }
}
Kaffeekasse

Der Artikel hat Dir weitergeholfen?

Der Artikel hat Dir weitergeholfen? Sehr schön, so soll es sein! Wenn Dir unsere Snippets weiterhelfen, supporte uns auf Steady.com.

Supporte uns auf Steady.com