diff --git a/app/nativefier.json b/app/nativefier.json
index 3b16d7e..5979c3e 100644
--- a/app/nativefier.json
+++ b/app/nativefier.json
@@ -1,6 +1,6 @@
 {
   "name": "Google",
-  "targetUrl": "http:\/\/www.google.com",
+  "targetUrl": "file:///Users/JiaHao/Desktop/lab4.html",
   "badge": false,
   "width": 1280,
   "height": 800,
diff --git a/gulp/build.js b/gulp/build.js
new file mode 100644
index 0000000..5bbcef3
--- /dev/null
+++ b/gulp/build.js
@@ -0,0 +1,19 @@
+import gulp from 'gulp';
+import PATHS from './helpers/src-paths';
+
+import del from 'del';
+import runSequence from 'run-sequence';
+
+gulp.task('build', callback => {
+    runSequence('clean', ['build-cli', 'build-app', 'build-tests'], callback);
+});
+
+gulp.task('clean', callback => {
+    del(PATHS.CLI_DEST).then(() => {
+        del(PATHS.APP_DEST).then(() => {
+            del(PATHS.TEST_DEST).then(() => {
+                callback();
+            });
+        });
+    });
+});
diff --git a/gulp/build/build-app.js b/gulp/build/build-app.js
new file mode 100644
index 0000000..8ba2083
--- /dev/null
+++ b/gulp/build/build-app.js
@@ -0,0 +1,10 @@
+import gulp from 'gulp';
+import PATHS from './../helpers/src-paths';
+
+import webpack from 'webpack-stream';
+
+gulp.task('build-app', ['build-static'], () => {
+    return gulp.src(PATHS.APP_MAIN_JS)
+        .pipe(webpack(require('./../../webpack.config.js')))
+        .pipe(gulp.dest(PATHS.APP_DEST));
+});
diff --git a/gulp/build/build-cli.js b/gulp/build/build-cli.js
new file mode 100644
index 0000000..f28aa6d
--- /dev/null
+++ b/gulp/build/build-cli.js
@@ -0,0 +1,13 @@
+import gulp from 'gulp';
+import PATHS from './../helpers/src-paths';
+import sourcemaps from 'gulp-sourcemaps';
+import babel from 'gulp-babel';
+
+gulp.task('build-cli', done => {
+    return gulp.src(PATHS.CLI_SRC_JS)
+        .pipe(sourcemaps.init())
+        .pipe(babel())
+        .on('error', done)
+        .pipe(sourcemaps.write('.'))
+        .pipe(gulp.dest('lib'));
+});
diff --git a/gulp/build/build-static.js b/gulp/build/build-static.js
new file mode 100644
index 0000000..4d10f6f
--- /dev/null
+++ b/gulp/build/build-static.js
@@ -0,0 +1,21 @@
+import gulp from 'gulp';
+import PATHS from './../helpers/src-paths';
+
+import babel from 'gulp-babel';
+import sourcemaps from 'gulp-sourcemaps';
+
+gulp.task('build-static-not-js', () => {
+    return gulp.src([PATHS.APP_STATIC_ALL, '!**/*.js'])
+        .pipe(gulp.dest(PATHS.APP_STATIC_DEST));
+});
+
+gulp.task('build-static-js', done => {
+    return gulp.src(PATHS.APP_STATIC_JS)
+        .pipe(sourcemaps.init())
+        .pipe(babel())
+        .on('error', done)
+        .pipe(sourcemaps.write('.'))
+        .pipe(gulp.dest(PATHS.APP_STATIC_DEST));
+});
+
+gulp.task('build-static', ['build-static-js', 'build-static-not-js']);
diff --git a/gulp/ci.js b/gulp/ci.js
new file mode 100644
index 0000000..c2c8f02
--- /dev/null
+++ b/gulp/ci.js
@@ -0,0 +1,6 @@
+import gulp from 'gulp';
+import runSequence from 'run-sequence';
+
+gulp.task('ci', callback => {
+    return runSequence('test', 'lint', callback);
+});
diff --git a/gulp/helpers/gulp-helpers.js b/gulp/helpers/gulp-helpers.js
new file mode 100644
index 0000000..ad7af57
--- /dev/null
+++ b/gulp/helpers/gulp-helpers.js
@@ -0,0 +1,13 @@
+import shellJs from 'shelljs';
+
+function shellExec(cmd, silent, callback) {
+    shellJs.exec(cmd, {silent: silent}, (code, stdout, stderr) => {
+        if (code) {
+            callback(JSON.stringify({code, stdout, stderr}));
+            return;
+        }
+        callback();
+    });
+}
+
+export default {shellExec};
diff --git a/gulp/helpers/src-paths.js b/gulp/helpers/src-paths.js
new file mode 100644
index 0000000..933716b
--- /dev/null
+++ b/gulp/helpers/src-paths.js
@@ -0,0 +1,22 @@
+import path from 'path';
+
+const paths = {
+    APP_SRC: 'app/src',
+    APP_DEST: 'app/lib',
+    CLI_SRC: 'src',
+    CLI_DEST: 'lib',
+    TEST_SRC: 'test',
+    TEST_DEST: 'built-tests'
+};
+
+paths.APP_MAIN_JS = path.join(paths.APP_SRC, '/main.js');
+paths.APP_ALL = paths.APP_SRC + '/**/*';
+paths.APP_STATIC_ALL = path.join(paths.APP_SRC, 'static') + '/**/*';
+paths.APP_STATIC_JS = path.join(paths.APP_SRC, 'static') + '/**/*.js';
+paths.APP_STATIC_DEST = path.join(paths.APP_DEST, 'static');
+paths.CLI_SRC_JS = paths.CLI_SRC + '/**/*.js';
+paths.CLI_DEST_JS = paths.CLI_DEST + '/**/*.js';
+paths.TEST_SRC_JS = paths.TEST_SRC + '/**/*.js';
+paths.TEST_DEST_JS = paths.TEST_DEST + '/**/*.js';
+
+export default paths;
diff --git a/gulp/release.js b/gulp/release.js
new file mode 100644
index 0000000..9075da6
--- /dev/null
+++ b/gulp/release.js
@@ -0,0 +1,14 @@
+import gulp from 'gulp';
+import runSequence from 'run-sequence';
+import helpers from './helpers/gulp-helpers';
+
+const {shellExec} = helpers;
+
+gulp.task('publish', done => {
+    shellExec('npm publish', false, done);
+});
+
+gulp.task('release', callback => {
+    return runSequence('test', 'lint', 'build', 'publish', callback);
+});
+
diff --git a/gulp/test.js b/gulp/test.js
new file mode 100644
index 0000000..a0dcd42
--- /dev/null
+++ b/gulp/test.js
@@ -0,0 +1,13 @@
+import gulp from 'gulp';
+import runSequence from 'run-sequence';
+import helpers from './helpers/gulp-helpers';
+
+const {shellExec} = helpers;
+
+gulp.task('prune', done => {
+    shellExec('npm prune', true, done);
+});
+
+gulp.task('test', callback => {
+    return runSequence('prune', 'mocha', callback);
+});
diff --git a/gulp/tests/build-tests.js b/gulp/tests/build-tests.js
new file mode 100644
index 0000000..de3f792
--- /dev/null
+++ b/gulp/tests/build-tests.js
@@ -0,0 +1,14 @@
+import gulp from 'gulp';
+import PATHS from './../helpers/src-paths';
+
+import sourcemaps from 'gulp-sourcemaps';
+import babel from 'gulp-babel';
+
+gulp.task('build-tests', done => {
+    return gulp.src(PATHS.TEST_SRC_JS)
+        .pipe(sourcemaps.init())
+        .pipe(babel())
+        .on('error', done)
+        .pipe(sourcemaps.write('.'))
+        .pipe(gulp.dest(PATHS.TEST_DEST));
+});
diff --git a/gulp/tests/lint.js b/gulp/tests/lint.js
new file mode 100644
index 0000000..e748aa5
--- /dev/null
+++ b/gulp/tests/lint.js
@@ -0,0 +1,9 @@
+import gulp from 'gulp';
+import eslint from 'gulp-eslint';
+
+gulp.task('lint', () => {
+    return gulp.src(['**/*.js', '!node_modules/**', '!app/node_modules/**', '!app/lib/**', '!lib/**', '!built-tests/**', '!coverage/**'])
+        .pipe(eslint())
+        .pipe(eslint.format())
+        .pipe(eslint.failAfterError());
+});
diff --git a/gulp/tests/mocha.js b/gulp/tests/mocha.js
new file mode 100644
index 0000000..2a9f9d5
--- /dev/null
+++ b/gulp/tests/mocha.js
@@ -0,0 +1,22 @@
+import gulp from 'gulp';
+import PATHS from './../helpers/src-paths';
+
+import istanbul from 'gulp-istanbul';
+import mocha from 'gulp-mocha';
+
+gulp.task('mocha', ['build'], done => {
+    gulp.src(PATHS.CLI_DEST_JS)
+        .pipe(istanbul({includeUntested: true}))
+        .on('finish', () => {
+            return gulp.src(PATHS.TEST_DEST_JS, {read: false})
+                .pipe(mocha())
+                .pipe(istanbul.writeReports({
+                    dir: './coverage',
+                    reporters: ['lcov'],
+                    reportOpts: {dir: './coverage'}
+                }))
+                .on('finish', () => {
+                    done();
+                });
+        });
+});
diff --git a/gulp/watch.js b/gulp/watch.js
new file mode 100644
index 0000000..c1d5433
--- /dev/null
+++ b/gulp/watch.js
@@ -0,0 +1,16 @@
+import gulp from 'gulp';
+import PATHS from './helpers/src-paths';
+
+gulp.task('watch', ['build'], () => {
+    var handleError = function(error) {
+        console.error(error);
+    };
+    gulp.watch(PATHS.APP_ALL, ['build-app'])
+        .on('error', handleError);
+
+    gulp.watch(PATHS.CLI_SRC_JS, ['build-cli'])
+        .on('error', handleError);
+
+    gulp.watch(PATHS.TEST_SRC_JS, ['build-tests'])
+        .on('error', handleError);
+});
diff --git a/gulpfile.babel.js b/gulpfile.babel.js
index 7d64c17..912b3d4 100644
--- a/gulpfile.babel.js
+++ b/gulpfile.babel.js
@@ -1,162 +1,9 @@
 import gulp from 'gulp';
-import del from 'del';
-import sourcemaps from 'gulp-sourcemaps';
-import webpack from 'webpack-stream';
-import babel from 'gulp-babel';
-import runSequence from 'run-sequence';
-import path from 'path';
-import eslint from 'gulp-eslint';
-import mocha from 'gulp-mocha';
-import istanbul from 'gulp-istanbul';
-import shellJs from 'shelljs';
+import requireDir from 'require-dir';
 
-const PATHS = setUpPaths();
+requireDir('./gulp', {
+    recurse: true,
+    duplicates: true
+});
 
 gulp.task('default', ['build']);
-
-gulp.task('build', callback => {
-    runSequence('clean', ['build-cli', 'build-app', 'build-tests'], callback);
-});
-
-gulp.task('build-app', ['build-static'], () => {
-    return gulp.src(PATHS.APP_MAIN_JS)
-        .pipe(webpack(require(PATHS.WEBPACK_CONFIG)))
-        .pipe(gulp.dest(PATHS.APP_DEST));
-});
-
-gulp.task('clean', callback => {
-    del(PATHS.CLI_DEST).then(() => {
-        del(PATHS.APP_DEST).then(() => {
-            del(PATHS.TEST_DEST).then(() => {
-                callback();
-            });
-        });
-    });
-});
-
-gulp.task('build-cli', done => {
-    return gulp.src(PATHS.CLI_SRC_JS)
-        .pipe(sourcemaps.init())
-        .pipe(babel())
-        .on('error', done)
-        .pipe(sourcemaps.write('.'))
-        .pipe(gulp.dest('lib'));
-});
-
-gulp.task('build-static', ['build-static-js', 'build-static-not-js']);
-
-gulp.task('build-static-not-js', () => {
-    return gulp.src([PATHS.APP_STATIC_ALL, '!**/*.js'])
-        .pipe(gulp.dest(PATHS.APP_STATIC_DEST));
-});
-
-gulp.task('build-static-js', done => {
-    return gulp.src(PATHS.APP_STATIC_JS)
-        .pipe(sourcemaps.init())
-        .pipe(babel())
-        .on('error', done)
-        .pipe(sourcemaps.write('.'))
-        .pipe(gulp.dest(PATHS.APP_STATIC_DEST));
-});
-
-gulp.task('watch', ['build'], () => {
-    var handleError = function(error) {
-        console.error(error);
-    };
-    gulp.watch(PATHS.APP_ALL, ['build-app'])
-        .on('error', handleError);
-
-    gulp.watch(PATHS.CLI_SRC_JS, ['build-cli'])
-        .on('error', handleError);
-
-    gulp.watch(PATHS.TEST_SRC_JS, ['build-tests'])
-        .on('error', handleError);
-});
-
-gulp.task('publish', done => {
-    shellExec('npm publish', false, done);
-});
-
-gulp.task('release', callback => {
-    return runSequence('test', 'lint', 'build', 'publish', callback);
-});
-
-gulp.task('lint', () => {
-    return gulp.src(['**/*.js', '!node_modules/**', '!app/node_modules/**', '!app/lib/**', '!lib/**', '!built-tests/**', '!coverage/**'])
-        .pipe(eslint())
-        .pipe(eslint.format())
-        .pipe(eslint.failAfterError());
-});
-
-gulp.task('build-tests', done => {
-    return gulp.src(PATHS.TEST_SRC_JS)
-        .pipe(sourcemaps.init())
-        .pipe(babel())
-        .on('error', done)
-        .pipe(sourcemaps.write('.'))
-        .pipe(gulp.dest(PATHS.TEST_DEST));
-});
-
-gulp.task('prune', done => {
-    shellExec('npm prune', true, done);
-});
-
-gulp.task('test', callback => {
-    return runSequence('prune', 'mocha', callback);
-});
-
-gulp.task('mocha', ['build'], done => {
-    gulp.src(PATHS.CLI_DEST_JS)
-        .pipe(istanbul({includeUntested: true}))
-        .on('finish', () => {
-            return gulp.src(PATHS.TEST_DEST_JS, {read: false})
-                .pipe(mocha())
-                .pipe(istanbul.writeReports({
-                    dir: './coverage',
-                    reporters: ['lcov'],
-                    reportOpts: {dir: './coverage'}
-                }))
-                .on('finish', () => {
-                    done();
-                });
-        });
-});
-
-gulp.task('ci', callback => {
-    return runSequence('test', 'lint', callback);
-});
-
-function setUpPaths() {
-    const paths = {
-        WEBPACK_CONFIG: './webpack.config.js',
-        APP_SRC: 'app/src',
-        APP_DEST: 'app/lib',
-        CLI_SRC: 'src',
-        CLI_DEST: 'lib',
-        TEST_SRC: 'test',
-        TEST_DEST: 'built-tests'
-    };
-
-    paths.APP_MAIN_JS = path.join(paths.APP_SRC, '/main.js');
-    paths.APP_ALL = paths.APP_SRC + '/**/*';
-    paths.APP_STATIC_ALL = path.join(paths.APP_SRC, 'static') + '/**/*';
-    paths.APP_STATIC_JS = path.join(paths.APP_SRC, 'static') + '/**/*.js';
-    paths.APP_STATIC_DEST = path.join(paths.APP_DEST, 'static');
-    paths.CLI_SRC_JS = paths.CLI_SRC + '/**/*.js';
-    paths.CLI_DEST_JS = paths.CLI_DEST + '/**/*.js';
-    paths.TEST_SRC_JS = paths.TEST_SRC + '/**/*.js';
-    paths.TEST_DEST_JS = paths.TEST_DEST + '/**/*.js';
-
-    return paths;
-}
-
-function shellExec(cmd, silent, callback) {
-    shellJs.exec(cmd, {silent: silent}, (code, stdout, stderr) => {
-        if (code) {
-            callback(JSON.stringify({code, stdout, stderr}));
-            return;
-        }
-        callback();
-    });
-}
-
diff --git a/package.json b/package.json
index 2d5298e..5634e2a 100644
--- a/package.json
+++ b/package.json
@@ -71,6 +71,7 @@
     "gulp-mocha": "^2.2.0",
     "gulp-sourcemaps": "^1.6.0",
     "lodash": "^4.0.0",
+    "require-dir": "^0.3.0",
     "run-sequence": "^1.1.5",
     "shelljs": "^0.5.3",
     "tmp": "0.0.28",