gulpfile build

5 years ago · 0e0fcb08cb
parent 4ad9d1ad4f
commit 0e0fcb08cb
4 changed files with 86 additions and 29 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,2 +1,2 @@
-dist
+build
 node_modules
--- a/gulpfile.js
+++ b/gulpfile.js
@ -1,17 +1,26 @@
-const gulp = require('gulp');
-const sass = require('gulp-sass');
-const concat = require('gulp-concat');
-const gutil = require('gulp-util');
+const gulp = require('gulp')
+const sass = require('gulp-sass')
+const concat = require('gulp-concat')
+const gutil = require('gulp-util')
+const imagemin = require('gulp-imagemin')
+const cache = require('gulp-cache')
+const gulpIf = require('gulp-if')
+const browserify = require('browserify')
+const del = require('del')

-var budo = require('budo')
-var babelify = require('babelify')
+const source = require('vinyl-source-stream')
+const buffer = require('vinyl-buffer')
+const sourcemaps = require('gulp-sourcemaps')

-const cssFiles = 'public/scss/**/*.?(s)css';
+const budo = require('budo')
+const babelify = require('babelify')
+
+const cssFiles = 'public/scss/**/*.?(s)css'

 let css = gulp.src(cssFiles)
    .pipe(sass())
    .pipe(concat('style.css'))
-    .pipe(gulp.dest('assets'));
+    .pipe(gulp.dest('build'))

 gulp.task('watch', function(cb) {
  budo("app.js", {
@ -20,12 +29,59 @@ gulp.task('watch', function(cb) {
  browserify: {
    transform: babelify
  }
-  }).on('exit', cb);
-  gulp.watch(cssFiles, function() {
-    console.log("Compiling CSS")
-    return gulp.src(cssFiles)
-      .pipe(sass())
-      .pipe(concat('style.css'))
-      .pipe(gulp.dest('./dist'))
-    });
-});
+  }).on('exit', cb)
+  gulp.watch(cssFiles, gulp.series(["sass"]))
+})
+
+gulp.task("clean", function(done) {
+  del.sync('build')
+  done()
+})
+
+gulp.task("sass", function() {
+  return gulp.src(cssFiles)
+    .pipe(sass())
+    .pipe(concat('style.css'))
+    .pipe(gulp.dest('./build'))
+})
+
+gulp.task("assets", function() {
+  return gulp.src(["public/**/*", "!public/scss", "!public/scss/**/*"])
+    .pipe(gulpIf('*.+(png|jpg|jpeg|gif|svg)',
+      cache(imagemin({
+        interlaced: true
+      }))
+    ))
+    .pipe(gulp.dest('build'))
+})
+
+gulp.task('js', function() {
+  return gulp.src(['app.js', "components/**/*"])
+    .pipe(babel({
+      presets: [
+        ['@babel/env', {
+          modules: false
+        }]
+      ]
+    }))
+    .pipe(gulp.dest('build'))
+})
+
+gulp.task('js', function() {
+  let b = browserify({
+    entries: 'app.js',
+    debug: false,
+    transform: [babelify.configure({
+      presets: ['@babel/preset-env', '@babel/preset-react']
+    })]
+  })
+  return b.bundle()
+    .pipe(source('app.js'))
+    .pipe(buffer())
+    .pipe(sourcemaps.init({ loadMaps: true }))
+    .pipe(gulp.dest('build'))
+})
+
+gulp.task('build', gulp.parallel(['clean', 'assets', 'js', 'sass', function(done) {
+  done()
+}]))
--- a/index.html
+++ b/index.html
@ -1,11 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-    <head>
-      <link rel="stylesheet" href="/dist/style.css">
-    </head>
-    <body>
-      <div id='root'>
-      </div>
-      <script src="app.js"></script>
-    </body>
-</html>
--- a/package.json
+++ b/package.json
@ -14,17 +14,29 @@
    "@babel/preset-react": "^7.0.0",
    "babelify": "^10.0.0",
    "bluebird": "^3.5.3",
+    "browserify": "^16.2.3",
    "budo": "^11.5.0",
    "create-react-class": "^15.6.3",
    "debounce": "^1.2.0",
+    "del": "^3.0.0",
    "gulp": "^4.0.0",
+    "gulp-babel": "^8.0.0",
+    "gulp-browserify": "^0.5.1",
+    "gulp-cache": "^1.1.0",
    "gulp-cli": "^2.0.1",
    "gulp-concat": "^2.6.1",
+    "gulp-copy": "^4.0.1",
+    "gulp-if": "^2.0.2",
+    "gulp-imagemin": "^5.0.3",
    "gulp-sass": "^4.0.2",
+    "gulp-sourcemaps": "^2.6.4",
    "gulp-util": "^3.0.8",
    "jdenticon": "^2.1.1",
+    "livereactload": "^4.0.0-beta.2",
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
+    "vinyl-buffer": "^1.0.1",
+    "vinyl-source-stream": "^2.0.0",
    "webpack": "^4.27.1"
  },
  "devDependencies": {