1

I'm trying to set up a gulp task to process rem unit automatically and add a pixel fallback. Here is my gulfile.js:

 // NPM install  gulp gulp-less gulp-watch gulp-plumber gulp-livereload  gulp-postcss autoprefixer-core css-mqpacker csswring --save-dev
// explanation task breakdown: http://stackoverflow.com/questions/23953779/gulp-watch-and-compile-less-files-with-import
var gulp = require('gulp');
var less = require('gulp-less');
var watch = require('gulp-watch');
var plumber = require('gulp-plumber');
var livereload = require('gulp-livereload');
var path = require('path');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer-core');
var mqpacker = require('css-mqpacker');
var csswring = require('csswring');
var pixrem = require('gulp-pixrem');

gulp.task('less', function() {
  var processors = [
    autoprefixer({browsers: ["last 8 version", "> 1%", "ie 9", "ie 8", "ie 7", "ios 6"]}),
    mqpacker,
    csswring({
      preserveHacks: true,
      removeAllComments: true
    })
  ];
  gulp.src('./style.less')  // only compile the entry file
  .pipe(plumber())
  .pipe(less({
    paths: ['./','./vendors/', './layouts', './partials/', './overrides/']
  } ))
  .pipe(pixrem('10px'))
  .pipe(postcss(processors))
  .pipe(plumber.stop())
  .pipe(gulp.dest('./'))
  .pipe(livereload());
});
gulp.task('watch', function() {
  gulp.watch('./**/*.less', ['less']);  // Watch all the .less files, then run the less task
});

gulp.task('default', ['watch']); // Default will run the 'entry' watch task

The task is now running and converting rems to pixel fallbacks thanks to gulp-pixrem. The thing I can't seem to enable is switching the default root value. .pipe(pixrem('10px')) or .pipe(pixrem({rootvalue: '10px'}) doesn't change the base unit conversion.

.pipe(pixrem({ rootvalue: '10px' })) actually return an error TypeError in plugin gulp-pixrem Cannot read property '1' of null

Edit

Don't mind me.

.pipe(pixrem(100%)) is working fine.

End Edit

gsamaras
  • 71,951
  • 46
  • 188
  • 305
Yannick Schall
  • 32,601
  • 6
  • 29
  • 42
  • Not to tangent off from the original question but IMO this isn't something you should use a taskrunner for. You totally can but do you use SASS or less? Why not use a [mixin](http://css-tricks.com/snippets/css/less-mixin-for-rem-font-sizing/) that does it for you? – aug Nov 01 '14 at 00:38
  • I'm just testing things to see if it makes for a better workflow. I agree that doing this with Sass would be better. It's easy to write function to convert any css property values. For what I understand, with Less you have to bind it to the property (aka font-size, etc). I have to work with less at work, and part of the job is updating sites that haven't been built with pre-processors in the first place. I also find it very liberating to just write CSS and not mixins for this kind of things. – Yannick Schall Nov 02 '14 at 12:21
  • Ah that makes complete sense. Either way thanks for sharing :) – aug Nov 02 '14 at 19:30

1 Answers1

0

.pipe(pixrem(100%)) is working fine

Yannick Schall
  • 32,601
  • 6
  • 29
  • 42