gulp-webpack-tasks-ootb
Advanced tools
Gulp Webpack Tasks out-of-box
Get tired of doing webpack config, babel, karma and so on ? Just want to write es6/7 code without too much configuration ? This tool is what you are looking for.
Basiclly the tool can do these for you:
Basiclly, you can use the tool when you are:
You need to dev, build, or test your code, and each of these tasks is provided within a function, so you can use the tool with gulp (or other tools).
Your gulpfile may looks like:
const gulp = requir('gulp');
const tasks = requre('gulp-webpack-tasks-ootb');
const libTasks = tasks.libraryTasks({...options});
gulp.task('dev', libTasks.dev);
gulp.task('test', libTasks.test);
gulp.task('prepare', function(){
// your local tasks
})
4 tasks are provided when you are writing a library: the dev task, the build task, the compile task, the test task.
You need to create these tasks by call tasks.libraryTasks(options).
| name | description | type | default |
|---|---|---|---|
| port | dev server port | Number | 3000 |
| base | base directory of the project | Sting | process.cwd() |
| entry | library entry source code file | String | './src/index.js' |
| src | the source code directory | String | './src' |
| lib | the compiled (to es5, for publishing to npm) code directory | String | './lib' |
| demo | the demo pages directory (for development or present) | String | './demo' |
| dist | the build file directory (for umd files) | String | './dist' |
| umdName | the library's umd name | String | 'foo' |
| devSuffix | the bundle file's suffix for development enviroment | String | 'bundle' |
| buildSuffix | the bundle file's suffix for build target | String | 'min' |
| react | whether to transform JSX | Boolean | false |
| loaders | extra webpack loaders | Array | [] |
| plugins | extra webpack plugins | Array | [] |
| babelPolyfill | whether to import babelPolyfill | Boolean | false |
| devCors | whether to enable CORS on dev server | Boolean | true |
| watchTest | whether to use watch mode for test task | Boolean | false |
| testEntryPattern | file path pattern for test entries | String | 'src/**/*.spec.js' |
The main project's directory structure may looks like:
project
│ README.md
│ package.json
│ gulpfile.js
└───demo
│ foo.html
│ foo.js
│ bar.html
│ bar.js
└───dist
│ foo.min.js
└───lib
│ │ index.js
│ └───foo
│ foo.js
└───src
│ index.js
└───foo
foo.js
foo.spec.js
gulp.task('dev', libTasks.dev);
You need to put demo pages in the demo directory, which by default is './demo'. Each two files with the same basename compose a demo page, for example, foo.html and foo.js compose the foo demo. The html files looks like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="./foo.bundle.js"></script>
</body>
</html>
You can modify the html file as you like but the only one you should keep is the script tag <script src="/foo.bundle.js"></script>, which is the bundled file of foo.js. The bundle suffix could be changed by devSuffix option.
The js file looks like:
import MyLib from '../src/index';
// demo code
Run gulp dev, it will open your browser with http://127.0.0.1:3000 (by default) and show the list of demos as following:
Click link to enter link pages and do developing.
By configuring the testEntryPattern option, you can run tests in Karma and Chrome. A test file (foo.spec.js eg.) looks like:
import expect from 'expect';
import MyLib from '../src/index';
describe('mylib', function () {
it('mylib should be ok', function(){
expect(!!MyLib).toBeTruthy();
});
});
Run gulp test and the test result will be ouputed to console.
gulp.task('build', libTasks.build);
Run gulp build will pack your entry (by default is './src/index.js') to a umd style file and put it in dist directory. You need to provide a umdName, whick the file's name will be ${umdName.toLowercase()}.${buildSuffix}.js. If you load the umd script directly into html, then window.${umdName} is available.
gulp.task('build', libTasks.build);
If your source code contains only js file (which means you don't need extra webpack loaders to transform .less, .txt, .jpg), you can compile the source file from es6 / jsx to es5 and publish to npm for further use. At the time, you can also avoid pack dependencies to umd file. The compiled files will be put in lib directory(you can configure it by the lib option).
Run gulp compile, and compile task will be done.
3 tasks will be provided for developing an application: the dev task, the build task, the test task.
You need to create these tasks by call tasks.applicationTasks(options).
| name | description | type | default |
|---|---|---|---|
| port | dev server port | Number | 3000 |
| base | base directory of the project | Sting | process.cwd() |
| src | the source code directory | String | './src' |
| demo | the demo pages directory (for development or present) | String | './demo' |
| dist | the build file directory (for umd files) | String | './dist' |
| devSuffix | the bundle file's suffix for development enviroment | String | 'bundle' |
| buildSuffix | the bundle file's suffix for build target | String | 'bundle' |
| react | whether to transform JSX | Boolean | false |
| loaders | extra webpack loaders | Array | [] |
| plugins | extra webpack plugins | Array | [] |
| babelPolyfill | whether to import babelPolyfill | Boolean | false |
| devCors | whether to enable CORS on dev server | Boolean | true |
| watchTest | whether to use watch mode for test task | Boolean | false |
| testEntryPattern | file path pattern for test entries | String | 'src/**/*.spec.js' |
| commonsChunk | whether to enable commonsChunk plugin | Boolean | true |
Compared with libaray task options, there are several differences:
bundle but not min.The main project's directory structure may looks like:
project
│ README.md
│ package.json
│ gulpfile.js
└───demo
│ foo.html
│ foo.js
│ bar.html
│ bar.js
└───dist
│ foo.html
│ foo.bundle.js
│ bar.html
│ bar.bundle.js
└───src
│ index.js
└───foo
foo.js
foo.spec.js
Compared with library tasks, there are 2 main differences.
${umdName}.${buildSuffix}.js).<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="./commons.bundle.js"></script>
<script src="./foo.bundle.js"></script>
</body>
</html>
Dev task is exactly the same with library tasks.
Test task is exactly the same with library tasks.
Unlike library tasks, the build task for application will pack up every page (the demo) into dist directory. It will also copy html files from demo directory to dist directory. You can deploy the js files on server, and load the js on your own page. You can also deploy the whole dist directory to some static server (gh-pages, eg), it works too.
Notice that there's no
compiletask for application.
You may check the code in packages directory for more reference. Each of the project is an example how to use the tool.
FAQs
Gulp Webpack Tasks out-of-box
The npm package gulp-webpack-tasks-ootb receives a total of 1 weekly downloads. As such, gulp-webpack-tasks-ootb popularity was classified as not popular.
We found that gulp-webpack-tasks-ootb demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Critics call the Node.js EOL CVE a misuse of the system, sparking debate over CVE standards and the growing noise in vulnerability databases.
Security News
cURL and Go security teams are publicly rejecting CVSS as flawed for assessing vulnerabilities and are calling for more accurate, context-aware approaches.
Security News
Bun 1.2 enhances its JavaScript runtime with 90% Node.js compatibility, built-in S3 and Postgres support, HTML Imports, and faster, cloud-first performance.