[refactor] add gulp build system

.gitignore

@@ -1 +1,3 @@
 .DS_Store
+build
+node_modules

gulpfile.js

@@ -0,0 +1,103 @@
+const {
+  src,
+  dest,
+  parallel
+} = require('gulp');
+
+const csso = require('gulp-csso');
+
+const concat = require('gulp-concat');
+
+const uglify = require('gulp-uglify');
+
+const replace = require('gulp-replace');
+
+const htmlmin = require('gulp-htmlmin');
+
+const folder = {
+  src: 'src',
+  build: 'build/web'
+}
+
+const filename = {
+  css: "nighttab.min.css",
+  js: "nighttab.min.js"
+}
+
+function manifest() {
+  return src(folder.src + '/manifest.json')
+    .pipe(dest(folder.build))
+}
+
+function html() {
+  return src(folder.src + '/index.html')
+    .pipe(replace(/\<\!\-\-\ css\-block\ \-\-\>([\s\S]*)\<\!\-\-\ end\-css\-block\ \-\-\>/mg, '<link rel="stylesheet" href="css/' + filename.css + '">'))
+    .pipe(replace(/\<\!\-\-\ js\-block\ \-\-\>([\s\S]*)\<\!\-\-\ end\-js\-block\ \-\-\>/mg, '<script src="js/' + filename.js + '"></script>'))
+    .pipe(htmlmin({
+      collapseWhitespace: true
+    }))
+    .pipe(dest(folder.build))
+}
+
+function fonts() {
+  return src(folder.src + '/fonts/**/*.*')
+    .pipe(dest(folder.build + '/fonts'))
+}
+
+function icons() {
+  return src(folder.src + '/icons/**/*.*')
+    .pipe(dest(folder.build + '/icons'))
+}
+
+function css() {
+  return src(folder.src + '/css/*.css')
+    .pipe(concat(filename.css))
+    .pipe(csso())
+    .pipe(dest(folder.build + '/css'))
+}
+
+function js() {
+  return src([
+      folder.src + '/js/vendor/*.js',
+      folder.src + '/js/helper.js',
+      folder.src + '/js/data.js',
+      folder.src + '/js/fontawesome.js',
+      folder.src + '/js/update.js',
+      folder.src + '/js/state.js',
+      folder.src + '/js/bookmarks.js',
+      folder.src + '/js/control.js',
+      folder.src + '/js/menu.js',
+      folder.src + '/js/header.js',
+      folder.src + '/js/modal.js',
+      folder.src + '/js/tip.js',
+      folder.src + '/js/shade.js',
+      folder.src + '/js/theme.js',
+      folder.src + '/js/date.js',
+      folder.src + '/js/greeting.js',
+      folder.src + '/js/transitional.js',
+      folder.src + '/js/clock.js',
+      folder.src + '/js/search.js',
+      folder.src + '/js/link.js',
+      folder.src + '/js/version.js',
+      folder.src + '/js/keyboard.js',
+      folder.src + '/js/background.js',
+      folder.src + '/js/layout.js',
+      folder.src + '/js/auto-suggest.js',
+      folder.src + '/js/pagelock.js',
+      folder.src + '/js/edge.js',
+      folder.src + '/js/init.js',
+    ])
+    .pipe(concat(filename.js))
+    .pipe(uglify())
+    .pipe(dest(folder.build + '/js', {
+      sourcemaps: '.'
+    }))
+}
+
+exports.manifest = manifest;
+exports.html = html;
+exports.fonts = fonts;
+exports.icons = icons;
+exports.css = css;
+exports.js = js;
+exports.default = parallel(manifest, html, fonts, icons, css, js);

package.json

@@ -0,0 +1,45 @@
+{
+  "name": "nighttab",
+  "version": "3.68.0",
+  "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "npm run clean; npm run build-web; npm run build-webext",
+    "build-web": "gulp",
+    "build-webext": "web-ext build -s build/web -a build/webext",
+    "lint-webext": "web-ext lint -s",
+    "clean": "rm -rf build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/zombieFox/nightTab.git"
+  },
+  "keywords": [
+    "startpage",
+    "start-page",
+    "newtabpage",
+    "new-tab-page",
+    "tab",
+    "chrome-extension",
+    "extension",
+    "bookmarks",
+    "links"
+  ],
+  "author": "zombieFox",
+  "license": "MPL-2.0",
+  "bugs": {
+    "url": "https://github.com/zombieFox/nightTab/issues"
+  },
+  "homepage": "https://github.com/zombieFox/nightTab#readme",
+  "devDependencies": {
+    "gulp": "^4.0.2",
+    "gulp-cli": "^2.2.0",
+    "gulp-concat": "^2.6.1",
+    "gulp-csso": "^3.0.1",
+    "gulp-replace": "^1.0.0",
+    "gulp-uglify": "^3.0.2",
+    "gulp-htmlmin": "^5.0.1",
+    "web-ext": "^3.1.1"
+  }
+}

src/css/typography.css

@@ -7,6 +7,7 @@ h6 {
   margin: 0 0 1em 0;
   font-weight: normal;
   line-height: 1.5;
+  color: rgb(var(--theme-gray-18));
 }
 
 h1 {
@@ -17,31 +18,26 @@ h1 {
 h2 {
   font-size: 1.2em;
   font-family: var(--font-regular);
-  color: rgb(var(--theme-gray-18));
 }
 
 h3 {
   font-size: 1.1em;
   font-family: var(--font-regular);
-  color: rgb(var(--theme-gray-18));
 }
 
 h4 {
   font-size: 1em;
   font-family: var(--font-regular);
-  color: rgb(var(--theme-gray-18));
 }
 
 h5 {
   font-size: 1em;
   font-family: var(--font-bold);
-  color: rgb(var(--theme-gray-18));
 }
 
 h6 {
   font-size: 0.75em;
   font-family: var(--font-bold);
-  color: rgb(var(--theme-gray-18));
 }
 
 p {

src/index.html

@@ -6,6 +6,7 @@
   <meta name="theme-color" content="#262831">
   <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
   <title>New Tab</title>
+  <!-- css-block -->
   <link rel="stylesheet" href="css/reset.css">
   <link rel="stylesheet" href="css/variables.css">
   <link rel="stylesheet" href="css/base.css">
@@ -34,6 +35,7 @@
   <link rel="stylesheet" href="css/link.css">
   <link rel="stylesheet" href="css/auto-suggest.css">
   <link rel="stylesheet" href="css/fontawesome.css">
+  <!-- end-css-block -->
 </head>
 
 <body>
@@ -1175,6 +1177,7 @@
 
 </body>
 
+<!-- js-block -->
 <!-- vendor -->
 <script src="js/vendor/html5sortable.min.js"></script>
 <script src="js/vendor/invert.min.js"></script>
@@ -1206,5 +1209,6 @@
 <script src="js/pagelock.js"></script>
 <script src="js/edge.js"></script>
 <script src="js/init.js"></script>
+<!-- end-js-block -->
 
 </html>