Using PostCSS

[ebowers]

Hi @jackfranklin,

I am having a little trouble getting postCSS to work with this script. It looks like the error happens when I try to pass in an array of postCSS processors into the postCSS plugin itself. I tried adding the plugin. to these postCSS processors, but I am still getting an error. Any ideas?

module.exports = function (gulp, plugins) {
  return function () {
    var paths = {
        cssSource: 'dev/scss/',
        cssDestination: 'dist/css'
    };
    var processors = [
        plugins.lost({}),
        plugins.cssnano({}),
        plugins.autoprefixer({browsers:['last 2 versions']})
    ];
  return gulp.src(paths.cssSource + 'main.scss')
    .pipe(plugins.sourcemaps.init())
    .pipe(plugins.sass())
    .pipe(plugins.postcss(processors))
    .pipe(plugins.sourcemaps.write())
    .pipe(gulp.dest(paths.cssDestination));
  };
};

[jackfranklin]

Hey!

I think I might need a bit more info - what is plugins being passed in as? Is it just the result of calling gulp-load-plugins?

A bit of info on the exact error would be really useful too.

[ebowers]

Sure thing,

So the above code works if I comment out postCSS. When you call on it though, it requires postCSS processors to be loaded into it. So I tried prepending plugins to each of the postCSS processors since they live in the same directory as the gulp plugins themselves.

Below is the error I'm seeing if I use the code from my first message above.

ReferenceError: browserSync is not defined
at Gulp.<anonymous> (front-end-starter/gulp-tasks/serve.js:8:5)
at module.exports (front-end-starter/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:34:7)
at Gulp.Orchestrator._runTask (front-end-starter/node_modules/gulp/node_modules/orchestrator/index.js:273:3)
at Gulp.Orchestrator._runStep (front-end-starter/node_modules/gulp/node_modules/orchestrator/index.js:214:10)
at front-end-starter/node_modules/gulp/node_modules/orchestrator/index.js:279:18
at finish (front-end-starter/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:21:8)
at module.exports (front-end-starter/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:60:3)
at Gulp.Orchestrator._runTask (front-end-starter/node_modules/gulp/node_modules/orchestrator/index.js:273:3)
at Gulp.Orchestrator._runStep (front-end-starter/node_modules/gulp/node_modules/orchestrator/index.js:214:10)
at front-end-starter/node_modules/gulp/node_modules/orchestrator/index.js:279:18

If I were to remove plugin. from the array of processors like so ...

module.exports = function (gulp, plugins) {
  return function () {
    var paths = {
        cssSource: 'dev/scss/',
        cssDestination: 'dist/css'
    };
    var processors = [
        lost({}),
        cssnano({}),
        autoprefixer({browsers:['last 2 versions']})
    ];
  return gulp.src(paths.cssSource + 'main.scss')
    .pipe(plugins.sourcemaps.init())
    .pipe(plugins.sass())
    .pipe(plugins.postcss(processors))
    .pipe(plugins.sourcemaps.write())
    .pipe(gulp.dest(paths.cssDestination));
  };
};

I see this error ...

ReferenceError: lost is not defined
at Gulp.<anonymous> (front-end-starter/gulp-tasks/style.js:15:9)
at module.exports (front-end-starter/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:34:7)
at Gulp.Orchestrator._runTask (front-end-starter/node_modules/gulp/node_modules/orchestrator/index.js:273:3)
at Gulp.Orchestrator._runStep (front-end-starter/node_modules/gulp/node_modules/orchestrator/index.js:214:10)
at Gulp.Orchestrator.start (front-end-starter/node_modules/gulp/node_modules/orchestrator/index.js:134:8)
at /Users/userName/.npm-packages/lib/node_modules/gulp/bin/gulp.js:129:20
at process._tickCallback (node.js:355:11)
at Function.Module.runMain (module.js:503:11)
at startup (node.js:129:16)
at node.js:814:3

---

You can see my full gulpfile here ...

// ---------------------------------------
// Require Gulp & Plugins
// ---------------------------------------

var gulp = require('gulp');
var plugins = require('gulp-load-plugins')({lazy:false});
var browserSync = require('browser-sync'); // live reload & browser syncing
var reload = browserSync.reload; // browserSync specific variable

// ---------------------------------------
// Import Tasks
// ---------------------------------------

function getTask(task) {
  return require('./gulp-tasks/' + task)(gulp, plugins);
}
gulp.task('style', getTask('style'));
gulp.task('scripts', getTask('scripts'));
gulp.task('jshint', getTask('jshint'));
gulp.task('libscripts', getTask('libscripts'));
// gulp.task('serve', getTask('serve'));

// ---------------------------------------
// Task Running
// ---------------------------------------
gulp.task('default', ['style', 'scripts', 'jshint', 'libscripts']);

I really appreciate your help with this!

[callumacrae]

Check out the pattern option: https://github.com/jackfranklin/gulp-load-plugins#options

Basically, it's only looking for plugins starting with gulp, you need to tell it to look for postcss plugins, too.

See also https://github.com/jackfranklin/gulp-load-plugins/issues/77

[ebowers]

@callumacrae This looks to do the trick. A quick question for you.

I have it working when I enter the postCSS plugins in manually ...

var gulp = require('gulp');
var plugins = require('gulp-load-plugins')({
  pattern: ['gulp-*', 'gulp.*', 'lost', 'cssnano', 'autoprefixer'],
  lazy: false
});

I'm a little confused about what is going on in the #77 example ...

var requireAll = require('gulp-load-plugins');
var $          = requireAll();
var postcss    = requireAll({pattern: 'postcss-*', replaceString: /^postcss-/});

Is he manually renaming the plugin directories and prepending with postcss- and then removing it when it runs?

Thanks for your help, I'm a little new at all of this.

[callumacrae]

He's assuming that the plugins all start with postcss- (and to be fair, most of them do).

At this point, why not just require the plugins manually?

[ebowers]

Oh yeah, requiring them manually is what I was planning since I don't have a ton of them that I am using currently. I was just curious if there was a more automated way of doing things. I'll try out the method above if I start adding more. Thanks so much @callumacrae & @jackfranklin for your help!