❤
npm
Sign UpSign In

gulp-flow-webpack

2.2.0 • Public • Published

gulp-flow-webpack

Webpack bundle for gulp-flow.

Requirements

Install

npm install --save-dev gulp-flow-webpack @babel/runtime

or

yarn add --dev gulp-flow-webpack @babel/runtime

@babel/runtime is a production dependency (since it's for the "runtime"). The transformation plugin is typically used only in development, but the runtime itself will be depended on by your deployed code.

Usage

Configure

By default this bundle is preconfigured in cfg.webpack, only the entry and the source path are required.

Example of a common use case with React.js:

yarn add --dev gulp-flow-webpack @babel/runtime

tasks/bundles/webpack.js

'use strict';
 
let path = require('path');
let flow = require('gulp-flow');
 
// load webpack bundle
require('gulp-flow-webpack');
 
let {cfg, utils} = flow;
let {webpack} = utils;
let {rootPath, srcDir, notSrcDir} = cfg;
 
// ignore JS(X) in files tasks
cfg.files.src.push(
  notSrcDir + '/app/**/*.{js, jsx}'
);
 
cfg.files.srcWatch.push(
  notSrcDir + '/app/**/*.{js, jsx}'
);
 
cfg.webpack.entry.app = './' + srcDir + '/app/index.js';
cfg.webpack.resolve.alias.app = path.join(rootPath, srcDir + '/app');
 
cfg.webpack.plugins.push(
  new webpack.ProvidePlugin({
    __: path.join(rootPath, srcDir + '/app/core'),
    _: 'lodash',
    React: 'react',
    ReactDOM: 'react-dom',
    autobind: 'autobind-decorator'
  }),
);
 
cfg.webpack.module.rules[0].include = [
  path.join(rootPath, srcDir + '/app'),
];

You can overwrite:

cfg.webpack.resolve.extensions = ['.js', '.jsx', '.json'/*,.other*/];
cfg.webpack.module.rules[0].use.presets = [
  [
    '@babel/preset-env',
    {
      useBuiltIns: 'usage',
      corejs: 3,
      targets: {
        browsers: ['last 2 versions']
      },
    },
  ],
  '@babel/preset-react',
  // 'other'
];
 
cfg.webpack.module.rules[0].use.plugins = [
  '@babel/plugin-transform-runtime',
  '@babel/plugin-transform-modules-commonjs',
  '@babel/plugin-syntax-dynamic-import',
  // ...
];

Or only change a specific config:

cfg.webpack.module.rules[0].use.options.presets[0][1].useBuiltIns = 'entry';
cfg.webpack.module.rules[0].use.options.presets[0][1]['corejs'] = '2';

eslint

eslint example:

{
  "parser": "babel-eslint",
  "extends": [
    "common-react"
  ],
  "env": {
    "browser": true,
    "commonjs": true,
    "es6": true
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "globals": {
    "autobind": false,
    "React": false,
    "ReactDOM": false
  },
  "rules": {
    "no-return-assign": 0
  }
}

Task

A simple example:

gulpfile.js

let gulp = require('gulp');
let flow = require('gulp-flow');
let {cfg, gp, utils} = flow;
 
// load (custom) webpack bundle
require('./tasks/bundles/webpack');
 
 
// build: JS
gulp.task('build.js', function buildJS() {
  return gulp.src(cfg.webpack.entry.app)
    .pipe(gp.webpack(cfg.webpack, utils.webpack))
    .pipe(gulp.dest(cfg.publicJsDir))
  ;
});

And run your task: gulp build.js

LICENSE

MIT (c) 2016, Nicolas Tallefourtane.

Author

Nicolas Tallefourtane - Nicolab.net
Nicolas Talle
Make a donation via Paypal

Readme

Keywords

Package Sidebar

Install

npm i gulp-flow-webpack

Repository

github.com/gulp-flow/gulp-flow-webpack

Homepage

github.com/gulp-flow/gulp-flow-webpack

Weekly Downloads

0

Version

2.2.0

License

MIT

Unpacked Size

10.1 kB

Total Files

4

Last publish

Collaborators

  • nicolab
Try on RunKit
Report malware