v3.0.0 - gulp v4

changelog.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 3.0.0 (2019-10-17)
+
+- Rewritten for gulp v4
+
 ## 2.0.1 (2018-09-29)
 
 - Replaced `del` package with `rimraf`

gulpfile.js

@@ -1,39 +1,45 @@
-// Initiate npm-modules
+'use strict'
-var gulp            = require('gulp'),
-    autoprefixer    = require('gulp-autoprefixer'),
-    concat          = require('gulp-concat'),
-    cssnano         = require('gulp-cssnano'),
-    livereload      = require('gulp-livereload'),
-    notify          = require('gulp-notify'),
-    plumber         = require('gulp-plumber'),
-    rename          = require('gulp-rename'),
-    sass            = require('gulp-sass'),
-    merge2          = require('merge2'),
-    rimraf          = require('rimraf');
 
+//----------------
+//:: Initiate npm-modules
+const   gulp            = require('gulp'),
+        sass            = require('gulp-sass'),
+        concat          = require('gulp-concat'),
+        livereload      = require('gulp-livereload'),
+        notify          = require('gulp-notify'),
+        plumber         = require('gulp-plumber'),
+        rename          = require('gulp-rename'),
+        postcss         = require('gulp-postcss'),
+        autoprefixer    = require('autoprefixer'),
+        cssnano         = require('cssnano'),
+        merge2          = require('merge2'),
+        rimraf          = require('rimraf');
+
+//----------------
+//:: configs
 var Config = {
     inputDir: '_source/',
     outputDir: '_dist/'
 }
 
 var SassConfig = {
-    inputDir:    '_source/sass/',
+    inputDir:    '_source/scss/',
     outputDir:   '_dist/css/',
     options: {
         outputStyle:   'expanded'
-    },
+    }
-    autoprefixer:      ['last 2 version', 'IE 11', 'Firefox ESR', 'ios 10', 'android 4.4']
 }
 
+var postcss_plugins = [
+    cssnano,
+    autoprefixer
+];
+
+//----------------
 //:: Tasks
 
-// delete the output folder
+// compile scss
-gulp.task('clean', function(cb) {
+function scss() {
-    return rimraf(Config.outputDir, cb)
-});
-
-// render SASS
-gulp.task('sass', function() {
     var onError = function(err) {
         notify.onError({
             title:    'gulp',
@@ -47,59 +53,60 @@ gulp.task('sass', function() {
     return merge2(
         gulp.src([
             'node_modules/sanitize.css/sanitize.css'
-        ]))
+    ]))
-        .pipe(concat('addons.css'))
+    .pipe(concat('addons.css'))
-        .pipe(gulp.dest(SassConfig.outputDir))
+    .pipe(gulp.dest(SassConfig.outputDir))
-        .pipe(cssnano())
+    .pipe(postcss(postcss_plugins))
-        .pipe(rename({suffix: '.min'}))
+    .pipe(rename({suffix: '.min'}))
-        .pipe(gulp.dest(SassConfig.outputDir)),
+    .pipe(gulp.dest(SassConfig.outputDir)),
 
-        gulp.src(SassConfig.inputDir + '*.scss')
+    gulp.src(SassConfig.inputDir + '*.scss')
-        .pipe(concat('styles.css'))
+    .pipe(concat('styles.css'))
-        .pipe(plumber({errorHandler: onError}))
+    .pipe(plumber({errorHandler: onError}))
-        .pipe(sass(SassConfig.options).on('error', sass.logError))
+    .pipe(postcss(postcss_plugins))
-        .pipe(autoprefixer(SassConfig.autoprefixer))
+    .pipe(sass(SassConfig.options).on('error', sass.logError))
-        .pipe(gulp.dest(SassConfig.outputDir))
+    .pipe(gulp.dest(SassConfig.outputDir))
-        .pipe(cssnano())
+    .pipe(rename({suffix: '.min'}))
-        .pipe(rename({suffix: '.min'}))
+    .pipe(gulp.dest(SassConfig.outputDir))
-        .pipe(gulp.dest(SassConfig.outputDir))
+    .pipe(livereload())
-        .pipe(livereload())
+    .pipe(notify({
-        .pipe(notify({
+        title:      'gulp',
-            title:      'gulp',
+        subtitle:   'Success!',
-            subtitle:   'Success!',
+        message:    '✅  SCSS compiled',
-            message:    '✅  SASS compiled',
+        timeout:    '2'
-            timeout:    '2'
+    }));
-        }));
+};
-});
-
-gulp.task('sass-only', function() {
-    return gulp
-        .src(SassConfig.inputDir + '*.scss')
-        .pipe(sass(SassConfig.options).on('error', sass.logError))
-        .pipe(gulp.dest(SassConfig.outputDir));
-});
 
 // Copy those other files
-gulp.task('copy', function() {
+function copy(done) {
     gulp.src([Config.inputDir + '*.*'])
         .pipe(gulp.dest(Config.outputDir))
         .pipe(livereload())
-    gulp.src([Config.inputDir + 'inc/**/*'])
+    done();
-        .pipe(gulp.dest(Config.outputDir + '/inc'))
+};
-        .pipe(livereload())
-})
 
-gulp.task('watch', function() {
+// watch for changes
-    livereload.listen()
+function watch() {
+    livereload.listen();
+    gulp.watch(SassConfig.inputDir + '*.scss', scss);
+    gulp.watch(Config.inputDir + '*.html', copy);
+};
 
-    // Watch .scss files
+// delete everything in _dist
-    gulp.watch(SassConfig.inputDir + '*.scss', ['sass']);
+function cleanup(cb) {
-    // Watch php files
+    return rimraf(Config.outputDir + '*', cb)
-    gulp.watch(Config.inputDir + '*.php', ['copy'])
+};
-    gulp.watch(Config.inputDir + 'inc/*.php', ['copy']);
-});
 
-// Default: First 'clean', then the rest
+//----------------
-gulp.task('default', ['clean'], function() {
+//:: Export tasks
-    gulp.start('sass', 'copy');
+
-});
+// complex tasks
+const build = gulp.series(cleanup, gulp.parallel(copy, scss));
+
+// export tasks
+exports.scss = scss;
+exports.copy = copy;
+exports.watch = watch;
+exports.cleanup = cleanup;
+exports.build = build;
+exports.default = build;

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "Website_Template",
 	"description": "npm & gulp development template",
-	"version": "2.0.1",
+	"version": "3.0.0",
 	"author": "Jan Jastrow",
 	"license": "MIT",
 	"homepage": "https://jan.jastrow.me",
@@ -15,19 +15,25 @@
 		"type": "git",
 		"url": "https://dienste.schwerkraftlabor.de/gitea/jan/Website_Template"
 	},
-	"dependencies": {},
 	"devDependencies": {
-		"gulp": "^3.9.1",
+		"autoprefixer": "^9.6.5",
-		"gulp-autoprefixer": "^5.0.0",
+		"cssnano": "^4.1.10",
+		"gulp": "^4.0.2",
 		"gulp-concat": "^2.6.1",
-		"gulp-cssnano": "^2.1.3",
+		"gulp-livereload": "^4.0.2",
-		"gulp-livereload": "^3.8.1",
 		"gulp-notify": "^3.2.0",
-		"gulp-plumber": "^1.2.0",
+		"gulp-plumber": "^1.2.1",
+		"gulp-postcss": "^8.0.0",
 		"gulp-rename": "^1.4.0",
-		"gulp-sass": "^4.0.1",
+		"gulp-sass": "^4.0.2",
-		"merge2": "^1.2.2",
+		"merge2": "^1.3.0",
-		"rimraf": "^2.6.2",
+		"rimraf": "^3.0.0",
-		"sanitize.css": "^7.0.3"
+		"sanitize.css": "^11.0.0"
-	}
+	},
+	"browserslist": [
+		"last 2 version",
+		"> 2%",
+		"android >= 5.0",
+		"IE 11"
+	]
 }