CODEWITHSUNDEEP
node.jssassgulpwebpack
Steven
Steven

Reputation: 19425

Need help understanding how gulp and webpack-stream works

So I have a Gulp file (working) and a Webpack file (working). Now I want to combine these to so that I only have to run webpack in order to watch and compile SCSS files.

Looking at webpack home page I can use something called webpack-stream

var gulp = require('gulp');
var webpack = require('webpack-stream');
gulp.task('default', function() {
  return gulp.src('src/entry.js')
    .pipe(webpack())
    .pipe(gulp.dest('dist/'));
});

I don't understand what I'm reading here. And I'm not to familier with piping.
- The first piece of code, does this go into gulpfile.js?
- What is entry.js?
- What does this piece of code do?

The above will compile src/entry.js into assets with webpack into dist/ with the output filename of [hash].js (webpack generated hash of the build).

Or just pass in your webpack.config.js:

return gulp.src('src/entry.js')
  .pipe(webpack( require('./webpack.config.js') ))
  .pipe(gulp.dest('dist/'));

I'm guessing this goes into my gulpfile.js?

I think I need this handed to me with a tea spoon :-/

Update

I got it working with help from @kannix and @JMM. Here are my config files:

Gulp

var gulp = require('gulp');
var sass = require('gulp-sass');
var webpack = require('webpack-stream');

gulp.task('default', [
    'webpacker',
    'sass',
    'watch'
]);

gulp.task('webpacker', function() {
    return gulp.src('./src/index.js')
        .pipe(webpack(require('./webpack.config.js')))
        .pipe(gulp.dest('dist/'));
});


gulp.task('sass', function () {
    return gulp
        .src('./src/sass/main.scss')
        .pipe(sass())
        .pipe(gulp.dest('./css/'));
});

gulp.task('watch', function() {
        gulp.watch('./src/sass/*.scss', ['sass']);
        gulp.watch('./src/components/*.jsx', ['webpacker']);
});

webpack.config.js

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: "./src/index.js",
    output: {
        path: __dirname + "/js/",
        filename: "bundle.js"
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {
                    cacheDirectory: true,
                    presets: ['es2015', 'react']
                }
            }
        ]
    }
};

Upvotes: 3

Views: 3977

Answers (2)

kannix
kannix

Reputation: 5157

gulp.task('default', function() {
  return gulp.src('src/entry.js')
    .pipe(webpack())
    .pipe(gulp.dest('dist/'));
});

Yes, this is code from gulpfile.js. This tells gulp to read src/entry.js and stream the content of the file to the webpack-stream gulp plugin. The output from webpack-stream is then written to dist/

entry.js is the webpack entry point

The second example does nearly the same but it will most likley read additional webpack configuration from your webpack.config.js

Upvotes: 1

JMM
JMM

Reputation: 26797

  1. Yes, that code is designed for a gulpfile.

  2. What is entry.js?

    Ordinarily when bundling with something like Webpack you'll have a script that runs your app and is the entry to your dependency graph. That's what entry.js refers to.

  3. What does this piece of code do?

    Here's a commented version: 

    var gulp = require('gulp');
var webpack = require('webpack-stream');
gulp.task('default', function() {
  // Read `src/entry.js` in as a vinyl file
  return gulp.src('src/entry.js')
    // Send `entry.js` to this `webpack-stream` module.
    .pipe(webpack())
    // Send the output of `webpack-stream` to `dist/`
    .pipe(gulp.dest('dist/'));
});

Upvotes: 1

Related Questions