gulp-webpack-tasks-ootb

v0.1.4

Published

3 years ago

Gulp Webpack Tasks out-of-box

Downloads

0High
0Medium
0Low

xieguanglei

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:

dev-ui

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 not min.
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.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Usage

Tasks for writing an library

options

directory structure

dev task

test task

build task

compile task

Tasks for writing an appliction

options

directory structure

dev task

test task

build task

If you are still confused