Error: File.contents can only be a Buffer, a Stream, or null

[DzmVasileusky]

node throws

Error: File.contents can only be a Buffer, a Stream, or null. at File.set (/Users/dzmvasilevsky/Work/Sites/inet-repos/campaign-casting/public/node_modules/vinyl/index.js:176:13)

what am I doing wrong?

var critical = require('critical');

gulp.task('criticalmain', function(cb) {
  critical.generate({
    inline: false,
    base: '.',
    src: 'html/main_page.html',
    css: ['css/all.css'],
    width: 1300,
    height: 900,
    dest: 'css/main.crit.css',
    minify: true,
    extract: true,
    ignore: ['font-face']
  }, cb);
});

[cvedson]

I got it working by downgrading to version 0.8.0

[DzmVasileusky]

@swlopes thanks for advice. I ended with using

var exec = require('child_process').exec;
gulp.task('criticalmain', function() {
  exec('node critical.js');
});

And in the critical.js all the critical generators.

[codewithpassion]

Same problem here. Fixed with downgrading to 0.8.

[bezoerb]

This may have been fixed in v0.8.4 Just tried in a similar setup with the current version and everything seems ok.

Gulp:

var critical = require('critical');
gulp.task('criticalmain', function(cb) {
    critical.generate({
        inline: false,
        base: '.',
        src: '.tmp/html/default/index.html',
        css: ['.tmp/styles/main.css'],
        width: 1300,
        height: 900,
        dest: 'tmp.css',
        minify: true,
        extract: true,
        ignore: ['font-face']
    }, cb);
});

File structure

├── .tmp
│   ├── html
│   │   └── default
│   │       └── index.html
│   │
│   └── styles
│       └── main.css
│
│
└── gulpfile.js

Could you try again with the current version? If it fails you might run the criticalmain task using

DEBUG='critical:*' gulp criticalmain

and post the output?

[SirBirdy]

with 0.8.4 I alos get this error

Unhandled rejection Error: File.contents can only be a Buffer, a Stream, or null.

edit: solved it also with exec ->

gulp.task('critical', function (cb) { exec('node critical.js', function (err, stdout, stderr) { console.log(stdout); console.log(stderr); cb(err); }); });

[ghost]

with v. 0.8.4 I have this problem too

[ghost]

Can someone help with this problem ?

[bezoerb]

@ArtyomSvinin could you run critical with the debug environment variable set as I mentioned above? This might give some insights about the issue. I'm currently on vacation but i could take another look when I'm home again.

[ghost]

@bezoerb sorry, but I did not really understand the task (probably due to the fact that I do not have a high level of programming), but I really like your plugin and I would like to work with it. Below I quote a link to the Gulp configurator and screenshots of how the project looks at the moment and what its structure is. If you need to take a more detailed look, I can upload the project to GitHub.

var gulp = require("gulp"),

    sass = require("gulp-sass"),
    pug = require("pug"),
    htmlmin = require("gulp-htmlmin"),
    gulpRemoveHtml = require('gulp-remove-html'),

    uncss = require("gulp-uncss"),
    autoprefixer = require("gulp-autoprefixer"),
    combineMq = require("gulp-combine-mq"),
    cleanCss = require("gulp-clean-css"),
    sourcemaps = require("gulp-sourcemaps"),

    useref = require('gulp-useref'),
    uglify = require('gulp-uglify'),
    gulpif = require('gulp-if'),
    cssnano = require('gulp-cssnano'),
    styleInject = require("gulp-style-inject"),
    rename = require("gulp-rename"),

    changed = require('gulp-changed'),
    cache = require("gulp-cache"),
    del = require("del"),

    imagemin = require("gulp-imagemin"),
    imageminSvgo = require("imagemin-svgo"),
    imageminPngquant = require('imagemin-pngquant'),
    imageminWebp = require('imagemin-webp'),
    imageminMozjpeg = require('imagemin-mozjpeg'),
    webp = require('gulp-webp'),

    notify = require("gulp-notify"),
    plumber = require("gulp-plumber"),

    browserSync = require("browser-sync"),
    connect = require('gulp-connect-php'),
    critical = require('critical'),

    runSequence = require("run-sequence");

var paths = {
    mainHtml: ".Full/index.html",
    allHtml: ".Full/**/*.html",
    mainScss: ".Full/scss/main__jump.scss",
    headerScss: ".Full/scss/header__jump.scss",
    footerScss: ".Full/scss/footer__jump.scss",
    allScss: ".Full/scss/**/*.scss",
    allJs: ".Full/js/**/*.js",
    mainPhp: ".Full/index.php",
    allPhp: ".Full/**/*.php",
    allCss: ".Full/css/*.css",

    destPath: ".Full/"
}

gulp.task("sassNow", function () {
    return gulp.src(paths.mainScss)
        .pipe(changed('.Full/css'))
        .pipe(sourcemaps.init())
        .pipe(sass()).on('error', console.log.bind(console))
        .pipe(autoprefixer({browsers: ['last 2 versions', '>5%', 'IE 8', 'IE 9']}))
        .pipe(cleanCss({compatibility: "ie8"}))
        .pipe(combineMq({
            beautify: true
        }))
        .pipe(uncss({
            html: [paths.mainHtml],
            ignore: [/\.is-active/, /\.is-hide/, /\.error/, /\.valid/, /\.animated/]
        }))
        .pipe(sourcemaps.write("./"))
        .pipe(gulp.dest(".Full/css"))
        .pipe(browserSync.reload({
            stream: true
        }))
});

gulp.task("sassHead", function () {
    return gulp.src(paths.headerScss)
        .pipe(changed('.Full/css'))
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(autoprefixer({browsers: ['last 2 versions', '>5%', 'IE 8', 'IE 9']}))
        .pipe(cleanCss({compatibility: "ie8"}))
        .pipe(combineMq({
            beautify: true
        }))
        .pipe(uncss({
            html: [paths.mainHtml],
            ignore: [/\.is-active/, /\.is-hide/, /\.error/, /\.valid/, /\.animated/]
        }))
        .pipe(sourcemaps.write("./"))
        .pipe(gulp.dest(".Full/css"))
        .pipe(browserSync.reload({
            stream: true
        }))
});
gulp.task("sassFooter", function () {
    return gulp.src(paths.footerScss)
        .pipe(changed('.Full/css'))
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(autoprefixer({browsers: ['last 2 versions', '>5%', 'IE 8', 'IE 9']}))
        .pipe(cleanCss({compatibility: "ie8"}))
        .pipe(combineMq({
            beautify: true
        }))
        .pipe(uncss({
            html: [paths.mainHtml],
            ignore: [/\.is-active/, /\.is-hide/, /\.error/, /\.valid/, /\.animated/]
        }))
        .pipe(sourcemaps.write("./"))
        .pipe(gulp.dest(".Full/css"))
        .pipe(browserSync.reload({
            stream: true
        }))
});

gulp.task("images", function () {
    return gulp.src(".Full/img/**/*.+(png|jpg|gif|svg|ico)")
        .pipe(cache(imagemin({
            progressive: true,
            progressive: true,
            imageminSvgo: {removeViewBox: false, cleanupAttrs: false},

            use: [
                    imageminPngquant({
                        verbose: "true",
                        quality: '50-65',
                        speed: 1
                    }),
                    // imageminSvgo({
                    //     plugins: [
                    //         {removeViewBox: false, cleanupAttrs: false}
                    //     ]
                    // }),
                    imageminMozjpeg({
                        progressive: true
                    })
                    // imageminWebp({
                    //     quality: 50,
                    //     method: 6
                    // })
                ]
            })
        ))
        .pipe(gulp.dest("Clean/img"));
});
gulp.task('convertInWebP', function () {
    return gulp.src('.Full/**/*.{jpg,png}')
        .pipe(webp({
            quality: 5,
            method: 1
        }))
        .pipe(gulp.dest('.Full/'))
});

gulp.task("fontsTransition", function () {
    return gulp.src(".Full/fonts/**/*")
        .pipe(gulp.dest("Clean/fonts"))
});
gulp.task("videoTransition", function () {
    return gulp.src(".Full/video/**/*")
        .pipe(gulp.dest("Clean/video"))
});
gulp.task("phpTransition", function () {
    return gulp.src(".Full/**/*.php")
        .pipe(gulp.dest("Clean/"))
});
gulp.task("baseFileTransition", function () {
    return gulp.src(".Full/*.+(png|jpg|txt|php|ttf)")
        .pipe(gulp.dest("Clean/"))
});
gulp.task("accessTransition", function () {
    return gulp.src(".Full/.htaccess")
        .pipe(gulp.dest("Clean/"))
});
gulp.task("webpTransition", function () {
    return gulp.src(".Full/**/*.+(webp)")
        .pipe(gulp.dest("Clean/"))
});

gulp.task("useref", function () {
    return gulp.src(".Full/*html")
        .pipe(useref())
        .pipe(gulpif('*.js', uglify()))
        .pipe(gulpif('*.css', cssnano({zindex: false})))
        // .pipe(gulpif('*.html', htmlmin({collapseWhitespace: true})))
        .pipe(gulp.dest('Clean'));
});
gulp.task("clean", function () {
    return del.sync("Clean").then(function (cb) {
        return cache.clearAll(cb);
    });
});
gulp.task("clean:dist", function () {
    return del.sync(['Clean/**/*']);
});
gulp.task("browserSync", function () {
    browserSync.init({
        server: {
            baseDir: ".Full/"
        }
        // proxy: "jump.dev"
    })
});

gulp.task("inlineStyle", function () {
    return gulp.src("Clean/index.html")
        .pipe(styleInject({
            encapsulated: true,
            read: false,
            path: 'Clean/'
        }))
        .pipe(gulp.dest("Clean"));
});
gulp.task('cleaningProductHtml', function () {
    return gulp.src('Clean/*.html')
        .pipe(gulpRemoveHtml())
        .pipe(gulp.dest('Clean/'));
});
gulp.task("createIndexPhp", function () {
    return gulp.src('Clean/index.html')
        .pipe(rename('index.php'))
        .pipe(gulp.dest('Clean/'));
})

gulp.task('critical', function (cb) {
    critical.generate({
        inline: true,
        base: '.',
        src: '.Full/index.html',
        css: '.Full/css/main__jump.css',
        dest: 'Full.css',
        minify: true,
        width: 320,
        height: 480,
        extract: true,
        ignore: ['font-face']
    }, cb);
});

gulp.task("watch", ["browserSync", "sassNow", "images", "fontsTransition", "videoTransition", "baseFileTransition"], function () {
    gulp.watch(paths.allScss, ["sassNow"]);
    gulp.watch(paths.allCss).on("change", browserSync.reload);

    // gulp.watch("Full/*.html", browserSync.reload);
    gulp.watch(paths.mainHtml).on("change", browserSync.reload);
    // gulp.watch(paths.allHtml).on("change", browserSync.reload);
    // gulp.watch(paths.mainPhp).on("change", browserSync.reload);
    gulp.watch(paths.allPhp).on("change", browserSync.reload);
    gulp.watch(paths.allJs).on("change", browserSync.reload);
});
gulp.task('default', function (callback) {
    runSequence(['sassNow', 'browserSync', 'critical', 'watch'],
        callback
    )
});
gulp.task('build', function (callback) {
    runSequence(
        'clean:dist',
        // ['sassHead', 'sassFooter'],
        ['sassNow', 'useref', 'images', 'fontsTransition', 'videoTransition', "baseFileTransition", "phpTransition", "webpTransition", "accessTransition"],
        // 'inlineStyle',
        'cleaningProductHtml',
        // Если нужен index.php
        // 'createIndexPhp',
        'critical',
        callback
    )
});

and screenshots: http://joxi.ru/Y2L4LnGcpW9w26 http://joxi.ru/4AkQwdxT68yKmq

[bezoerb]

Maybe this is related to https://github.com/addyosmani/critical/pull/219

[bezoerb]

Should be fixed in v1.0.0. Feel free to reopen if the error still exists.