CODEWITHSUNDEEP
javascriptyarnpkg
Tschallacka
Tschallacka

Reputation: 28722

how to combine all yarn files with gulp

I have yarn up and running, have figured out a bit how it works, and made my inroads into figuring out gulp, after having discovered how to install version 4 instead of the default version that throws deprecation errors.

Now I have installed 3 packages with yarn, and it has downloaded a LOT of dependencies. No problem, one can use a gulp file to combine those into one javascript(or so i'm told)

The only thing is, how do I do that whilst maintaining the yarn dependencies as yarn builds those up? How would I format my gulp task for combining the yarn libaries i've added?

My gulp task currently looks like this:

//Concatenate & Minify JS
gulp.task('scripts', function() {
    return gulp.src('assets/javascript/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('assets/dist'))
        .pipe(rename('all.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('assets/dist/js'));
});

And this concatenates my scripts as it should, but when I wanted to add the yarn folder it hit me that yarn manages dependencies and what not so everything has it's correct dependency and such. I doubt I can just add them all to the same file and hope all is well.(or can I?)

I run this task with yarn run watch

I've added the following packages: html5shiv, jquery, modernizr

What would be the correct way to add the yarn files in in assets/node_modules?

Upvotes: 1

Views: 1414

Answers (1)

Tschallacka
Tschallacka

Reputation: 28722

After long searching I found https://pawelgrzybek.com/using-webpack-with-gulpjs/

which gave me the following solution:

Execute the command:

sudo yarn add global gulp webpack webpack-stream babel-core babel-loader babel-preset-latest

create a webpack.config.js file

enter in it:

module.exports = {
  output: {
    filename: 'bundle.js', // or whatever you want the filename to be
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules)/,
        loader: 'babel-loader',
        query: {
          presets: [
            ['latest', { modules: false }],
          ],
        },
      },
    ],
  },
};

Then create a gulpfile.js

var gulp = require('gulp');
var webpack = require('webpack');
var webpackStream = require('webpack-stream');
var webpackConfig = require('./webpack.config.js');

gulp.task('watch', watchTask);
gulp.task('default', defaultTask);

gulp.task('scripts', function() {
return gulp.src('assets/javascript/*.js')
    .pipe(webpackStream(webpackConfig), webpack)
    .pipe(gulp.dest('./assets/js')); // Or whereever you want your js file to end up.
});

function watchTask(done) {
    // Wherever you stored your javascript files
    gulp.watch('assets/javascript/*.js', gulp.parallel('scripts'))   
    done();
}
function defaultTask(done) {
  // place code for your default task here
  done();
}

Then in the directory execute yarn watch and have it run in the background where you can throw an eye on it now and then.

console example

Upvotes: 1

Related Questions