As a beginner in the world of Node.js and post processors for CSS, I recently took the time to install the following tools after going through multiple articles:
My goal is to utilize the 'pxtorem' plugin to convert my pixel units to rems for various CSS properties like font-size, margin, padding, border, width, height, etc. and generate a new CSS stylesheet with these changes.
Query: What specific commands should be included in my gulpfile.js to achieve this functionality?
To clarify, I'm still novice when it comes to defining variables and dependencies, relying on video tutorials and blog guides which lack the precise instructions for converting pixels to rems using PostCSS plugins.
This snippet showcases the content of my current gulpfile.js:
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var pxtorem = require('gulp-pxtorem');
gulp.task('css', function() {
gulp.src('./css-1/*.css')
.pipe(pxtorem())
.pipe(gulp.dest('./dest'));
});
The mentioned code essentially copies my "styles-1.css" file from the "css-1" directory to the "dest" folder. While I crafted this script based on an article for understanding PostCSS, it lacks the correct configuration for pixel to rem conversion.
P.S. Operating on Windows 10 O/S currently.