add gulp and configure build and deployment

zombispormedio · Nov 22, 2017 · d8478fe · d8478fe
1 parent 03203be
commit d8478fe
Show file tree

Hide file tree

Showing 7 changed files with 2,401 additions and 2 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+build
diff --git a/.travis.yml b/.travis.yml
@@ -0,0 +1,14 @@
+language: node_js
+branches:
+  only:
+    - master
+node_js:
+ - "node"
+install:
+ - npm install
+script:
+  - npm run build
+deploy:
+  provider: surge
+  project: ./build/
+  domain: awesome-pokedex.surge.sh  
diff --git a/gulpfile.js b/gulpfile.js
@@ -0,0 +1,52 @@
+const gulp = require('gulp')
+const merge = require('gulp-merge')
+const buffer = require('vinyl-buffer')
+const concat = require('gulp-concat')
+const download = require('gulp-download-stream')
+const size = require('gulp-size')
+const del = require('del')
+const inject = require('gulp-inject')
+const runSequence = require('run-sequence')
+const path  = require('path')
+const R = require('ramda')
+const config = require('./vendor.config')
+const defaultToEmpty = R.defaultTo([])
+const view = R.curry(R.view)
+
+gulp.task('build-clean', function (cb) {
+    return del(['build'])
+})
+
+const getJsFromCDN = () => R.pipe(view(R.lensPath(['fromCDN', 'js'])),
+    defaultToEmpty, download)(config)
+const getJsFromPackages = () => R.pipe(view(R.lensPath(['fromPackages', 'js'])),
+    defaultToEmpty, gulp.src)(config)
+
+gulp.task('build-js', function () {
+    return merge(
+            getJsFromCDN(),
+            getJsFromPackages()
+        )
+        .pipe(buffer())
+        .pipe(concat('vendor.bundle.js'))
+        .pipe(size())
+        .pipe(gulp.dest('./build'))
+})
+
+gulp.task('build-html', function () {
+    return gulp.src('index.html')
+        .pipe(inject(gulp.src('./build/**/*.js', {
+            read: false
+        }), {
+            transform: function (filepath) {
+                return ` <script src="${path.basename(filepath)}"></script>`
+            }
+        }))
+        .pipe(gulp.dest('./build'))
+})
+
+gulp.task('build', function (callback) {
+    runSequence('build-clean', ['build-js'],
+        'build-html',
+        callback);
+});
diff --git a/index.html b/index.html
@@ -0,0 +1,40 @@
+<!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>
+    <div id="root"></div>
+    <!-- inject:js -->
+    <!-- endinject -->
+    <script>
+        try {
+            const Title = styled.default.h1 `
+                font-size: 1.5em;
+	            text-align: center;
+	            color: palevioletred;
+            `;
+            const titleWithContent = React.createElement(Title, null, "React and Styled Components works fine! And Deploy Good!")
+
+            const Wrapper = styled.default.section `
+	            padding: 4em;
+	            background: papayawhip;
+            `;
+
+            const main = React.createElement(Wrapper, null, titleWithContent);
+            ReactDOM.render(
+                main,
+                document.getElementById('root')
+            );
+        } catch (e) {
+            document.writeln(e);
+        }
+    </script>
+</body>
+
+</html>