gulp-webpack-tasks-ootb
v0.1.4
Published
Gulp Webpack Tasks out-of-box
Downloads
7
Readme
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:
- config webpack within some default loaders, plugins; config babel within confortable presets.
- automatically find entries and specify dist through given rules (you are still able to customize).
- run mocha tests in karma and chrome without much configuration.
- provide a development enviroment using webpack-dev-middleware and express.
- compile or pack files up when you want to publish or deploy.
Usage
Basiclly, you can use the tool when you are:
- Writing a front-end application.
- Writing a front-end library.
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
})
Tasks for writing an library
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)
.
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' |
directory structure
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
dev task
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.
test task
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.
build task
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.
compile task
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.
Tasks for writing an appliction
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)
.
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:
- You don't need to provide entry option.
- You don't need to provide umdName option.
- You don't need to provide lib option.
- Default option of buildSuffix is
bundle
but notmin
. - You can use commonsChunk option to enable commonsChunk plugin.
directory structure
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.
- lib directory is not necessary anymore.
- dist directory is a map to demo directory (for library tasks there's only 1 file
${umdName}.${buildSuffix}.js
). - if you enable commonsChunk plugin, the html file should also include commons file, 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="./commons.bundle.js"></script>
<script src="./foo.bundle.js"></script>
</body>
</html>
dev task
Dev task is exactly the same with library tasks.
test task
Test task is exactly the same with library tasks.
build task
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
compile
task for application.
If you are still confused
You may check the code in packages
directory for more reference. Each of the project is an example how to use the tool.