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
-var gulp            = require('gulp'),
-    autoprefixer    = require('gulp-autoprefixer'),
+'use strict'
+
+//----------------
+//:: Initiate npm-modules
+const   gulp            = require('gulp'),
+        sass            = require('gulp-sass'),
         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'),
+        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
-gulp.task('clean', function(cb) {
-    return rimraf(Config.outputDir, cb)
-});
-
-// render SASS
-gulp.task('sass', function() {
+// compile scss
+function scss() {
     var onError = function(err) {
         notify.onError({
             title:    'gulp',
@@ -50,56 +56,57 @@ gulp.task('sass', function() {
     ]))
     .pipe(concat('addons.css'))
     .pipe(gulp.dest(SassConfig.outputDir))
-        .pipe(cssnano())
+    .pipe(postcss(postcss_plugins))
     .pipe(rename({suffix: '.min'}))
     .pipe(gulp.dest(SassConfig.outputDir)),
 
     gulp.src(SassConfig.inputDir + '*.scss')
     .pipe(concat('styles.css'))
     .pipe(plumber({errorHandler: onError}))
+    .pipe(postcss(postcss_plugins))
     .pipe(sass(SassConfig.options).on('error', sass.logError))
-        .pipe(autoprefixer(SassConfig.autoprefixer))
     .pipe(gulp.dest(SassConfig.outputDir))
-        .pipe(cssnano())
     .pipe(rename({suffix: '.min'}))
     .pipe(gulp.dest(SassConfig.outputDir))
     .pipe(livereload())
     .pipe(notify({
         title:      'gulp',
         subtitle:   'Success!',
-            message:    '✅  SASS compiled',
+        message:    '✅  SCSS compiled',
         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/**/*'])
-        .pipe(gulp.dest(Config.outputDir + '/inc'))
-        .pipe(livereload())
-})
+    done();
+};
 
-gulp.task('watch', function() {
-    livereload.listen()
+// watch for changes
+function watch() {
+    livereload.listen();
+    gulp.watch(SassConfig.inputDir + '*.scss', scss);
+    gulp.watch(Config.inputDir + '*.html', copy);
+};
 
-    // Watch .scss files
-    gulp.watch(SassConfig.inputDir + '*.scss', ['sass']);
-    // Watch php files
-    gulp.watch(Config.inputDir + '*.php', ['copy'])
-    gulp.watch(Config.inputDir + 'inc/*.php', ['copy']);
-});
+// delete everything in _dist
+function cleanup(cb) {
+    return rimraf(Config.outputDir + '*', cb)
+};
 
-// Default: First 'clean', then the rest
-gulp.task('default', ['clean'], function() {
-    gulp.start('sass', 'copy');
-});
+//----------------
+//:: Export tasks
+
+// 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",
+	"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",
-		"gulp-autoprefixer": "^5.0.0",
+		"autoprefixer": "^9.6.5",
+		"cssnano": "^4.1.10",
+		"gulp": "^4.0.2",
 		"gulp-concat": "^2.6.1",
-		"gulp-cssnano": "^2.1.3",
-		"gulp-livereload": "^3.8.1",
+		"gulp-livereload": "^4.0.2",
 		"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",
-		"merge2": "^1.2.2",
-		"rimraf": "^2.6.2",
-		"sanitize.css": "^7.0.3"
-	}
+		"gulp-sass": "^4.0.2",
+		"merge2": "^1.3.0",
+		"rimraf": "^3.0.0",
+		"sanitize.css": "^11.0.0"
+	},
+	"browserslist": [
+		"last 2 version",
+		"> 2%",
+		"android >= 5.0",
+		"IE 11"
+	]
 }