From 0e0fcb08cb0904bbf879c60d3868de39feba7713 Mon Sep 17 00:00:00 2001 From: f0x Date: Tue, 22 Jan 2019 12:21:35 +0100 Subject: [PATCH] gulpfile build --- .gitignore | 2 +- gulpfile.js | 90 ++++++++++++++++++++++++++++++++++++++++++---------- index.html | 11 ------- package.json | 12 +++++++ 4 files changed, 86 insertions(+), 29 deletions(-) delete mode 100644 index.html diff --git a/.gitignore b/.gitignore index de4d1f0..e3fbd98 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,2 @@ -dist +build node_modules diff --git a/gulpfile.js b/gulpfile.js index fab3ded..bfc4b4a 100644 --- 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() +}])) diff --git a/index.html b/index.html deleted file mode 100644 index f174319..0000000 --- a/index.html +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - -
-
- - - diff --git a/package.json b/package.json index b6a814f..41810a8 100644 --- 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": {