13

When working on a client application, we often have requirements that the application should support the latest browsers or IE10 for example. I would like to share a solution that can be helpful for some of you (I assume that some of you know this solution). It's a plugin called Autoprefixer that we can add to Gulp. This plugin adds prefixes to the CSS properties depending on the given configuration. In short, tell the Autorefixer which browsers you want to support and it adds only relevant prefixes to the stylesheet. It's easy and I don’t have to remember it when developing. To add Autoprefixer in our Gulp workflow, we only need to pipe it after SASS has done its thing. Then Autoprefixer updates the stylesheets to add prefixes.   1. Install Autoprefixer (in main project directory) npm install --save-dev gulp-autoprefixer   2. Then we can add it to our task We need to load our plugin in Gulp.js file  (last line) var gulp = require ('gulp'), sass = require ('gulp-sass'), browserSync = require ('browser-sync'). create (), path = require ('path'), sourcemaps = require ('gulp-sourcemaps'), autoprefixer = require ('gulp-autoprefixer');   Next add a new pipe to gulp task (example, please provide your configuration): gulp.task('build-sass', function () { return gulp.src(sourceSassFolder + '**/*.scss') .pipe(sass({ outputStyle: 'expanded' }).on('error', sass.logError)) .pipe(autoprefixer({ browsers: ['last 2 versions, IE 10'], cascade: false })) .pipe(gulp.dest(sourceCssFolder)) .pipe(gulp.dest(deploymentCssFolder)); });   I haved added code to the following tasks: build-sass build browsersync-sass   3. Save and run the task! I hope that someone will help.   Documentation: I based on Gulp for Mendix theming https://github.com/mendix/ux-theming Link to Auotprefixer https://www.npmjs.com/package/gulp-autoprefixer

asked 2019-01-25

1 answers