Execute tasks during Webpack compilation
This plugin executes streaming tasks during Webpack compilation, and can be used to easily leverage Gulp plugins while using Webpack.
Install the plugin with npm:
$ npm install webpack-streaming-task-plugin --save-dev
Or with Yarn:
$ yarn add webpack-streaming-task-plugin --dev
The example below uses gulp-cssnano and gulp-rename to minify and rename a CSS file that is separate from the main Webpack bundle.
const WebpackStreamingTaskPlugin = require('webpack-streaming-task-plugin');
const cssnano = require('gulp-cssnano');
const rename = require('gulp-rename');
const WebpackConfig = {
entry: './src/js/index.js',
output: {
path: 'dist/js',
filename: 'index_bundle.js',
},
plugins: [
new WebpackStreamingTaskPlugin({
name: 'Minify and Rename CSS',
source: './src/css/stylesheet.css',
destination: './dist/css',
task: (task) => {
return task
.pipe(cssnano())
.pipe(rename({
suffix: '.min',
}));
},
}),
]
}
The options
object can contain the following properties:
source
: (String or Array) Glob string or array of glob strings describing task input.destination
: (String) Destination path for task output. Set tonull
to prevent piping output to the filesystem. (Optional, default'./'
)task
: (Function) Task function. Includes atask
parameter with which to pipe output.name
: (String) Name of task, used in log output (Optional)watchMode
: (Object) Configuration object for options related to Webpack's watch mode. (Optional)watchMode.includeSourceDirectories
: (Boolean) Only applies in watch mode. By default, Webpack only watches for changes to the files specified bysource
, but directory-level changes (new files, new child directories, etc.) are ignored. WhenincludeSourceDirectories
istrue
, changes to any directories that contain files specified insource
will trigger recompilation. (Optional, defaultfalse
)watchMode.skipInitialRun
: (Boolean) Only applies in watch mode. Whentrue
, this task is not executed upon Webpack's initial run. Instead, it will only run once changes to its source files are detected. (Optional, defaultfalse
)watchMode.alwaysRun
: (Boolean) Only applies in watch mode. Whentrue
, this task is always executed when Webpack runs, even if files specified insource
are unchanged. IfwatchMode.skipInitialRun
is alsotrue
,skipInitialRun
takes priority and the first run will be skipped despitealwaysRun
beingtrue
. (Optional, defaultfalse
)watchMode.changedFilesOnly
: (Boolean) Only applies in watch mode. Whentrue
, only files which have changed since last run will be included in the stream passed to this task. (Optional, defaultfalse
)
The following options should no longer be used and will be removed in future releases. They only exist for legacy compatibility.
always
: (Boolean) Deprecated. For watch mode only. Serves the same purpose aswatchMode.alwaysRun
. This option is deprecated. UsewatchMode.alwaysRun
instead.watchSourceDirectories
: (Boolean) Deprecated. For watch mode only. Serves the same purpose aswatchMode.includeSourceDirectories
. This option is deprecated. UsewatchMode.includeSourceDirectories
instead.