Parcel: Using with gulp?

[dfhdfhdfhkovirolik]

Just a little question. I want to use Parcel with Gulp. How I can do it? Just run parcel command with gulp?

[dfhdfhdfhkovirolik]

Ah, I can use it programmaticaly.

[dartess]

Need more information ....

[dfhdfhdfhkovirolik]

@dartess idk lol

[Hfimy]

what? gulp-parcel didn't work

[riklamme]

we used parcel in our gulp this way:

'use strict';

/**
 * Import gulp module
 */
const gulp = require('gulp');
const exec = require('gulp-exec');

/**
 * Import config(s) and other functions
 */
const config = require('./../config');
const vendors = config.scripts.vendor;


const options = {
    continueOnError: true, // default = false, true means don't emit error event
    pipeStdout: true // default = false, true means stdout is written to file.contents
};
const reportOptions = {
    err: true, // default = true, false means don't write err
    stderr: true, // default = true, false means don't write stderr
    stdout: true // default = true, false means don't write stdout
};


function parcel_bundler(done) {
    gulp.src([`${config.sources.script_bundles}/*.js`, `!${config.sources.script_bundles}/app.js`])
        .pipe(exec(`parcel build <%= file.path %>  --out-dir ${config.dist}/${config.build.scripts} --no-minify --log-level 3`, options))
        .pipe(exec.reporter(reportOptions));

    done();
}

function parcel_app_bundler(done) {
    gulp.src(`${config.sources.script_bundles}/app.js`)
        .pipe(exec(`parcel build <%= file.path %>  --out-dir ${config.dist_episode}/${config.build.scripts} --no-minify --log-level 3`, options))
        .pipe(exec.reporter(reportOptions));

    done();
}

function vendor(done) {
    for (let dest in vendors) {
        gulp.src(vendors[dest])
            .pipe(gulp.dest(`${config.dist}/${config.build.script_vendor}`));
    }

    done();
}

/**
 * Gulp tasks
 */
gulp.task('scripts:clean', require(`${config.sources.at}/gulp/tasks/scripts/clean`));
gulp.task('scripts:lint', require(`${config.sources.at}/gulp/tasks/scripts/lint`));
gulp.task('scripts:bundles', parcel_bundler);
gulp.task('scripts:bundles:app', parcel_app_bundler);
gulp.task('scripts:vendor', vendor);
gulp.task('scripts', gulp.series(
    'scripts:clean',
    'scripts:vendor',
    'scripts:lint',
    'scripts:bundles',
    'scripts:bundles:app'
));

We use also browsersync, reloading is a pain in the ass because building files is in a gulp pipe way. anyone a better solution?

[VicPopescu]

For anyone that needs to run parcel for production, without the watchers, and then use gulp to move the files or do another tasks, you can use native node child_process to run parcel with exec or spawn, like in the example below.
But for parcel develop mode, even if you can run it in parallel with other gulp tasks, you won't see any output logs from parcel because the output is logged only when the child process is finished.

const { parallel, series } = require('gulp');
const { exec } = require('child_process');

/**
 * Build solution using parcel
 */
const parcelBuild = () => {
    return exec('parcel build index.html', (error, stdout, stderr) => {
        if (error) {
            console.error(`exec error: ${error}`);
            return;
        }
        console.log(`stdout: ${stdout}`);
        console.log(`stderr: ${stderr}`);
    });
};

const task1= () => {
    return gulpTask1;
};

const task2 = () => {
    return gulpTask2;
};

// "gulp prod" will execute parcel build first, then after parcel is finished, run parallel gulp tasks
exports.prod = series(parcelBuild, parallel(gulpTask1, gulpTask2));