PostCSS

[VentyCZ]

Hey there, how am I supposed to use PostCSS with this awesome module ? My gulp task is as follows:

return gulp.src('styles/bundle.less') .pipe(less({ sourceMap: { sourceMapRootpath: './styles' // Optional absolute or relative path to your LESS files } })) .on('error', function (error) { gutil.log(gutil.colors.red(error.message)) }) //.pipe(postcss(processors)) .pipe(gulp.dest('web/public/css'));

As you can see, I commented out the postcss pipe, cuz it was failing, because it could not parse the sourcemap (as it should not) throwing "Missing semicolon" error. I'm quite a Gulp noobie, so I think of two options: Separate generation of the sourcemap to different task or separate the postcss pipe.

What should I do ?

[radist2s]

Hi, here is my gulp tasks.

var gulp = require('gulp');
var path = require('path');
var notifier = require('node-notifier');
var gutil = require('gulp-util');

var lessSourceFiles = '../../static/less/*.less'
var cssOutDir = '../../static/css'

gulp.task('less', function () {
    var less = require('gulp-less-sourcemap');
    var LessPluginCleanCSS = require('less-plugin-clean-css');
    var cache = require('gulp-cached');

    return gulp
        .src(lessSourceFiles)
        .pipe(less({
            ieCompat: true,
            sourceMap: {
                sourceMapRootpath: path.relative(cssOutDir, path.dirname(lessSourceFiles))
            },
            plugins: [
                new LessPluginCleanCSS({
                    advanced: true
                })
            ]
        }))
        .on('error', function (error) {
            gutil.log(gutil.colors.red(error.message))
            notifier.notify({title: 'Less compilation error', message: error.message})
            this.emit('end');
        })
        .pipe(cache(cssOutDir)) // store in cache css content, it prevents triggering of next task every time, even if css file wasn`t changed: same as previous
        .pipe(gulp.dest(path.join(cssOutDir)))
});

gulp.task('autoprefixer', function () {
    var postcss = require('gulp-postcss');
    var postcssMath = require('postcss-math');
    var sourcemaps = require('gulp-sourcemaps');
    var autoprefixer = require('autoprefixer');
    var cache = require('gulp-cached');

    var postCssPipe = postcss([
        postcssMath,
        autoprefixer({browsers: ['last 2 version', '> 1%', 'ie >= 8', 'Firefox > 15', 'iOS >= 5', 'Android >= 2.3']})
    ])

    var cacheKey = cssOutDir + '-prefixed'

    return gulp.src(path.join(cssOutDir, '*.css'))
        .pipe(cache(cacheKey)) // store and check input css file in cache. it prevents twice postcssing
        .pipe(sourcemaps.init())
        .pipe(postCssPipe.on('error', function (error) {
            notifier.notify({title: 'Autoprefixer compilation error', message: error.message.replace(/"+/, "'")})
            gutil.log(gutil.colors.red(error.message))
            this.emit('end');
        }))
        .pipe(sourcemaps.write('.'))
        .pipe(cache(cacheKey)) // after postcss store again new css content. It's useful, if you use multiple css files in one dir.
        .pipe(gulp.dest(cssOutDir));
});

And my package.json:

{
  "name": "boilerplate-gulpfile-less",
  "private": true,
  "version": "0.0.0",
  "description": "",
  "main": "gulpfile.js",
  "dependencies": {
    "autoprefixer": "*",
    "gulp-cached": "*",
    "gulp-less-sourcemap": "*",
    "gulp-postcss": "*",
    "gulp-sourcemaps": "*",
    "less-plugin-clean-css": "*",
    "postcss-math": "*",
    "node-notifier": "*"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}