I have integrated Gulp into my project and am looking to utilize the autoprefixer feature.
Here is a glimpse of my current gulp file:
// Including gulp
var gulp = require('gulp');
// Including necessary plugins
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var sass = require('gulp-ruby-sass');
var autoprefixer = require('gulp-autoprefixer');
var imagemin = require('gulp-imagemin');
var cache = require('gulp-cache');
// Concatenating & Minifying JS
gulp.task('scripts', function() {
return gulp.src('js/*.js')
.pipe(concat('main.js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('build/js'));
});
gulp.task('sass', function() {
return sass('scss/style.scss', {style: 'compressed'})
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('build/css'));
});
gulp.task('images', function() {
return gulp.src('images/**/*')
.pipe(cache(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true })))
.pipe(gulp.dest('build/img'));
});
gulp.task('watch', function() {
// Watching .js files
gulp.watch('js/*.js', ['scripts']);
// Watching .scss files
gulp.watch('scss/*.scss', ['sass']);
// Watching image files
gulp.watch('images/*', ['images']);
});
// Default Task
gulp.task('default', ['scripts', 'sass', 'images', 'watch']);
In the above code snippet, I have a .sass task that performs as expected. Recently, I incorporated the following lines:
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
Prior to the minification into a min.css file. Upon running this, everything seemed to be in order. However, after trying to save the following code:
.test{
transform: scale(.5);
}
I anticipated having the prefixed versions added to my min.css file, but unfortunately, they were not included. Any suggestions on where I might have gone wrong?