Merge pull request #713 from 0dp/gulp4

Gulp4

gulpconfig.json

@@ -1,6 +1,6 @@
 {
   "browserSyncOptions" : {
-    "proxy": "localhost/wordpress/",
+    "proxy": "localhost/",
     "notify": false
   },
   "browserSyncWatchFiles" : [

gulpfile.js

@@ -1,193 +1,107 @@
 // Defining requirements
-var gulp = require( 'gulp' );
+var autoprefixer = require( 'autoprefixer' ),
-var plumber = require( 'gulp-plumber' );
+    browserSync = require('browser-sync').create(),
-var sass = require( 'gulp-sass' );
+    cleanCSS = require( 'gulp-clean-css' ),
-var watch = require( 'gulp-watch' );
+    concat = require( 'gulp-concat' ),
-var cssnano = require( 'gulp-cssnano' );
+    del = require( 'del' ),
-var rename = require( 'gulp-rename' );
+    gulp = require( 'gulp' ),
-var concat = require( 'gulp-concat' );
+    imagemin = require( 'gulp-imagemin' ),
-var uglify = require( 'gulp-uglify' );
+    postcss = require( 'gulp-postcss' ),
-var merge2 = require( 'merge2' );
+    rename = require( 'gulp-rename' ),
-var imagemin = require( 'gulp-imagemin' );
+    replace = require( 'gulp-replace' ),
-var ignore = require( 'gulp-ignore' );
+    sass = require( 'gulp-sass' ),
-var rimraf = require( 'gulp-rimraf' );
+    sourcemaps = require( 'gulp-sourcemaps' ),
-var clone = require( 'gulp-clone' );
+    uglify = require( 'gulp-uglify' ),
-var merge = require( 'gulp-merge' );
+    rev = require('gulp-rev'),
-var sourcemaps = require( 'gulp-sourcemaps' );
+    revDel = require('rev-del');
-var browserSync = require( 'browser-sync' ).create();
+
-var del = require( 'del' );
-var cleanCSS = require( 'gulp-clean-css' );
-var gulpSequence = require( 'gulp-sequence' );
-var replace = require( 'gulp-replace' );
-var autoprefixer = require( 'gulp-autoprefixer' );
-var rev = require('gulp-rev');
-var revDel = require('rev-del');
 
 // Configuration file to keep your code DRY
-var cfg = require( './gulpconfig.json' );
+const cfg = require( './gulpconfig.json' );
-var paths = cfg.paths;
+const paths = cfg.paths;
 
-gulp.task( 'watch-scss', ['browser-sync'], function() {
+// Compile SCSS to CSS
-    gulp.watch( paths.sass + '/**/*.scss', ['scss-for-dev'] );
+function scss( ) {
-});
+    return gulp.src( paths.sass + '/*.scss' )
-
-// Run:
-// gulp sass
-// Compiles SCSS files in CSS
-gulp.task( 'sass', function() {
-    var stream = gulp.src( paths.sass + '/*.scss' )
-        .pipe( plumber( {
-            errorHandler: function( err ) {
-                console.log( err );
-                this.emit( 'end' );
-            }
-        } ) )
         .pipe(sourcemaps.init({loadMaps: true}))
-        .pipe( sass( { errLogToConsole: true } ) )
+        .pipe(sass()).on('error', sass.logError)
-        .pipe( autoprefixer( 'last 2 versions' ) )
+        .pipe(postcss([
+            autoprefixer()
+        ]))
         .pipe(sourcemaps.write(undefined, { sourceRoot: null }))
+        .pipe( gulp.dest( paths.css ) );
+
+}
+
+exports.scss = scss;
+
+// Minify CSS
+function minifycss( done ) {
+    gulp.src( paths.css + '/theme.css' )
+        .pipe( sourcemaps.init( { loadMaps: true } ) )
+        .pipe( cleanCSS( { compatibility: '*' } ) )
+        .pipe( rename( { suffix: '.min' } ) )
+        .pipe( sourcemaps.write( './' ) )
         .pipe( gulp.dest( paths.css ) )
-    return stream;
-});
 
-// Run:
+        gulp.src( paths.css + '/custom-editor-style.css' )
-// gulp watch
+        .pipe( sourcemaps.init( { loadMaps: true } ) )
-// Starts watcher. Watcher runs gulp sass task on changes
+        .pipe( cleanCSS( { compatibility: '*' } ) )
-gulp.task( 'watch', function() {
+        .pipe( rename( { suffix: '.min' } ) )
-    gulp.watch( paths.sass + '/**/*.scss', ['styles'] );
+        .pipe( sourcemaps.write( './' ) )
-    gulp.watch( [paths.dev + '/js/**/*.js', 'js/**/*.js', '!js/theme.js', '!js/theme.min.js'], ['scripts'] );
+        .pipe( gulp.dest( paths.css ) );
 
-    //Inside the watch task.
+    done();
-    gulp.watch( paths.imgsrc + '/**', ['imagemin-watch'] );
+};
-});
 
-/**
+exports.minifycss = minifycss;
- * Ensures the 'imagemin' task is complete before reloading browsers
- * @verbose
- */
-gulp.task( 'imagemin-watch', ['imagemin'], function( ) {
-  browserSync.reload();
-});
 
-// Run:
+// Concatinate scripts and minify them
-// gulp imagemin
+function scripts( done ) {
-// Running image optimizing task
-gulp.task( 'imagemin', function() {
-    gulp.src( paths.imgsrc + '/**' )
-    .pipe( imagemin() )
-    .pipe( gulp.dest( paths.img ) );
-});
-
-// Run:
-// gulp cssnano
-// Minifies CSS files
-gulp.task( 'cssnano', function() {
-  return gulp.src( paths.css + '/theme.css' )
-    .pipe( sourcemaps.init( { loadMaps: true } ) )
-    .pipe( plumber( {
-            errorHandler: function( err ) {
-                console.log( err );
-                this.emit( 'end' );
-            }
-        } ) )
-    .pipe( rename( { suffix: '.min' } ) )
-    .pipe( cssnano( { discardComments: { removeAll: true } } ) )
-    .pipe( sourcemaps.write( './' ) )
-    .pipe( gulp.dest( paths.css ) );
-});
-
-gulp.task( 'rev', function() {
-  // by default, gulp would pick `assets/css` as the base,
-  // so we need to set it explicitly:
-  gulp.src([paths.css + '/theme.min.css', paths.js + '/theme.min.js'], {base: './'})
-    .pipe(rev())
-    .pipe(gulp.dest('./'))  // write rev'd assets to build dir
-    .pipe(rev.manifest())
-    .pipe(revDel({dest: './'}))
-    .pipe(gulp.dest('./'));  // write manifest to build dir
-});
-
-gulp.task( 'minifycss', function() {
-  return gulp.src( paths.css + '/theme.css' )
-  .pipe( sourcemaps.init( { loadMaps: true } ) )
-    .pipe( cleanCSS( { compatibility: '*' } ) )
-    .pipe( plumber( {
-            errorHandler: function( err ) {
-                console.log( err ) ;
-                this.emit( 'end' );
-            }
-        } ) )
-    .pipe( rename( { suffix: '.min' } ) )
-     .pipe( sourcemaps.write( './' ) )
-    .pipe( gulp.dest( paths.css ) );
-});
-
-gulp.task( 'cleancss', function() {
-  return gulp.src( paths.css + '/*.min.css', { read: false } ) // Much faster
-    .pipe( ignore( 'theme.css' ) )
-    .pipe( rimraf() );
-});
-
-gulp.task( 'styles', function( callback ) {
-    gulpSequence( 'sass', 'minifycss', 'rev' )( callback );
-} );
-
-// Run:
-// gulp browser-sync
-// Starts browser-sync task for starting the server.
-gulp.task( 'browser-sync', function() {
-    browserSync.init( cfg.browserSyncWatchFiles, cfg.browserSyncOptions );
-} );
-
-// Run:
-// gulp watch-bs
-// Starts watcher with browser-sync. Browser-sync reloads page automatically on your browser
-gulp.task( 'watch-bs', ['browser-sync', 'watch', 'scripts', 'rev'], function() {
-} );
-
-// Run:
-// gulp scripts.
-// Uglifies and concat all JS files into one
-gulp.task( 'scripts', function() {
     var scripts = [
 
-        // Start - All BS4 stuff
         paths.dev + '/js/bootstrap4/bootstrap.js',
 
-        // End - All BS4 stuff
-
         paths.dev + '/js/skip-link-focus-fix.js',
-
         // Adding currently empty javascript file to add on for your own themes´ customizations
         // Please add any customizations to this .js file only!
         paths.dev + '/js/custom-javascript.js'
     ];
-  gulp.src( scripts )
-    .pipe( concat( 'theme.min.js' ) )
-    .pipe( uglify() )
-    .pipe( gulp.dest( paths.js ) )
-    rev();
 
-  gulp.src( scripts )
+    gulp.src( scripts )
-    .pipe( concat( 'theme.js' ) )
+        .pipe( concat( 'theme.js' ) )
-    .pipe( gulp.dest( paths.js ) );
+        .pipe( gulp.dest( paths.js ) )
-});
 
-// Deleting any file inside the /src folder
+    gulp.src( scripts )
-gulp.task( 'clean-source', function() {
+        .pipe( concat( 'theme.min.js' ) )
-  return del( ['src/**/*'] );
+        .pipe( uglify() )
-});
+        .pipe( gulp.dest( paths.js ) );
+
+    done();
+}
+
+exports.scripts = scripts;
+
+// Compress image assets
+function imagemin() {
+    return gulp.src( paths.imgsrc + '/**' )
+        .pipe( imagemin() )
+        .pipe( gulp.dest( paths.img ) );
+}
+
+exports.imagemin = imagemin;
 
 // Run:
 // gulp copy-assets.
 // Copy all needed dependency assets files from bower_component assets to themes /js, /scss and /fonts folder. Run this task after bower install or bower update
 
 ////////////////// All Bootstrap SASS  Assets /////////////////////////
-gulp.task( 'copy-assets', function() {
+gulp.task( 'copy-assets', function(done) {
+
 
 ////////////////// All Bootstrap 4 Assets /////////////////////////
 // Copy all JS files
-    var stream = gulp.src( paths.node + 'bootstrap/dist/js/**/*.js' )
+    gulp.src( paths.node + 'bootstrap/dist/js/**/*.js' )
         .pipe( gulp.dest( paths.dev + '/js/bootstrap4' ) );
 
 // Copy all Bootstrap SCSS files
@@ -210,46 +124,78 @@ gulp.task( 'copy-assets', function() {
 
 // _s JS files into /src/js
     gulp.src( paths.node + 'undescores-for-npm/js/skip-link-focus-fix.js' )
-        .pipe( gulp.dest( paths.dev + '/js' ) );
+.pipe( gulp.dest( paths.dev + '/js' ) );
 
 // Copy Popper JS files
     gulp.src( paths.node + 'popper.js/dist/umd/popper.min.js' )
         .pipe( gulp.dest( paths.js + paths.vendor ) );
     gulp.src( paths.node + 'popper.js/dist/umd/popper.js' )
         .pipe( gulp.dest( paths.js + paths.vendor ) );
-    return stream;
+
+    done();
 });
 
-// Deleting the files distributed by the copy-assets task
+// Deleting any file inside the /src folder
-gulp.task( 'clean-vendor-assets', function() {
+gulp.task( 'clean-source', function() {
-  return del( [paths.dev + '/js/bootstrap4/**', paths.dev + '/sass/bootstrap4/**', './fonts/*wesome*.{ttf,woff,woff2,eot,svg}', paths.dev + '/sass/fontawesome/**', paths.dev + '/sass/underscores/**', paths.dev + '/js/skip-link-focus-fix.js', paths.js + '/**/skip-link-focus-fix.js', paths.js + '/**/popper.min.js', paths.js + '/**/popper.js', ( paths.vendor !== ''?( paths.js + paths.vendor + '/**' ):'' )] );
+  return del( ['src/**/*', '!src'] );
+});
+
+// Deleting any file inside the /dist folder
+gulp.task( 'clean-dist', function() {
+  return del( ['dist/**/*', '!dist'] );
+});
+
+gulp.task('revision', function(done) {
+  // by default, gulp would pick `assets/css` as the base,
+  // so we need to set it explicitly:
+  gulp.src([paths.css + '/theme.min.css', paths.js + '/theme.min.js'], {base: './'})
+    .pipe(rev())
+    .pipe(gulp.dest('./'))  // write rev'd assets to build dir
+    .pipe(rev.manifest())
+    .pipe(gulp.dest('./'));  // write manifest to build dir
+done();
 });
 
 // Run
 // gulp dist
 // Copies the files to the /dist folder for distribution as simple theme
-gulp.task( 'dist', ['clean-dist'], function() {
+gulp.task( 'dist', gulp.series( 'clean-dist', 'revision', function(done) {
-  return gulp.src( ['**/*', '!' + paths.bower, '!' + paths.bower + '/**', '!' + paths.node, '!' + paths.node + '/**', '!' + paths.dev, '!' + paths.dev + '/**', '!' + paths.dist, '!' + paths.dist + '/**', '!' + paths.distprod, '!' + paths.distprod + '/**', '!' + paths.sass, '!' + paths.sass + '/**', '!readme.txt', '!readme.md', '!package.json', '!package-lock.json', '!gulpfile.js', '!gulpconfig.json', '!CHANGELOG.md', '!.travis.yml', '!jshintignore',  '!codesniffer.ruleset.xml',  '*'], { 'buffer': false } )
+
+  gulp.src( ['**/*', '!' + paths.bower, '!' + paths.bower + '/**', '!' + paths.node, '!' + paths.node + '/**', '!' + paths.dev, '!' + paths.dev + '/**', '!' + paths.dist, '!' + paths.dist + '/**', '!' + paths.distprod, '!' + paths.distprod + '/**', '!' + paths.sass, '!' + paths.sass + '/**', '!readme.txt', '!readme.md', '!package.json', '!package-lock.json', '!gulpfile.js', '!gulpconfig.json', '!CHANGELOG.md', '!.travis.yml', '!jshintignore',  '!codesniffer.ruleset.xml', 'rev-manifest.json', '*'], { 'buffer': false } )
   .pipe( replace( '/js/jquery.slim.min.js', '/js' + paths.vendor + '/jquery.slim.min.js', { 'skipBinary': true } ) )
   .pipe( replace( '/js/popper.min.js', '/js' + paths.vendor + '/popper.min.js', { 'skipBinary': true } ) )
-  .pipe( replace( '/js/skip-link-focus-fix.js', '/js' + paths.vendor + '/skip-link-focus-fix.js', { 'skipBinary': true } ) )
+  .pipe( gulp.dest( paths.dist ) );
-    .pipe( gulp.dest( paths.dist ) );
+  done();
+
+}));
+
+// BrowserSync reload helper function
+function reload( done ){
+    browserSync.reload();
+    done();
+}
+
+// BrowserSync main task
+gulp.task( 'watch-bs', function( done ) {
+    browserSync.init( cfg.browserSyncWatchFiles, cfg.browserSyncOptions );
+    gulp.watch( paths.sass + '/**/*.scss', gulp.series(scss, minifycss, reload) );
+    gulp.watch( [paths.dev + '/js/**/*.js', 'js/**/*.js', '!js/theme.js', '!js/theme.min.js'], gulp.series( scripts, reload ) );
+
+    //Inside the watch task.
+    gulp.watch( paths.imgsrc + '/**', gulp.series( imagemin, reload ) );
+    done();
+
 });
 
-// Deleting any file inside the /dist folder
+gulp.task( 'revision', function(done) {
-gulp.task( 'clean-dist', function() {
+  // by default, gulp would pick `assets/css` as the base,
-  return del( [paths.dist + '/**'] );
+  // so we need to set it explicitly:
-});
+  gulp.src([paths.css + '/theme.min.css', paths.js + '/theme.min.js'], {base: './'})
+    .pipe(rev())
+    .pipe(gulp.dest('./'))  // write rev'd assets to build dir
+    .pipe(rev.manifest())
+    .pipe(revDel({dest: './'}))
+    .pipe(gulp.dest('./'));  // write manifest to build dir
+    done();
 
-// Run
+});
-// gulp dist-product
-// Copies the files to the /dist-prod folder for distribution as theme with all assets
-gulp.task( 'dist-product', ['clean-dist-product'], function() {
-  return gulp.src( ['**/*', '!' + paths.bower, '!' + paths.bower + '/**', '!' + paths.node, '!' + paths.node + '/**', '!' + paths.dist, '!' + paths.dist +'/**', '!' + paths.distprod, '!' + paths.distprod + '/**', '*'] )
-    .pipe( gulp.dest( paths.distprod ) );
-} );
-
-// Deleting any file inside the /dist-product folder
-gulp.task( 'clean-dist-product', function() {
-  return del( [paths.distprod + '/**'] );
-} );

package.json

@@ -27,33 +27,26 @@
   },
   "homepage": "https://understrap.com",
   "dependencies": {
-    "bootstrap": "4.1.0",
+    "autoprefixer": "^8.6.2",
-    "browser-sync": "^2.23.6",
+    "bootstrap": "4.0.0",
+    "browser-sync": "^2.24.4",
     "del": "^3.0.0",
     "font-awesome": "^4.7.0",
-    "gulp": "3.9.1",
+    "gulp": "^4.0.0",
-    "gulp-clean-css": "^3.9.2",
+    "gulp-clean-css": "^3.9.3",
-    "gulp-clone": "2.0.1",
     "gulp-concat": "^2.6.1",
-    "gulp-cssnano": "^2.1.2",
-    "gulp-ignore": "^2.0.2",
     "gulp-imagemin": "^4.1.0",
-    "gulp-merge": "^0.1.1",
+    "gulp-postcss": "^7.0.1",
-    "gulp-plumber": "^1.2.0",
+    "gulp-rename": "^1.3.0",
-    "gulp-rename": "^1.2.2",
     "gulp-replace": "^0.6.1",
     "gulp-rev": "^8.1.1",
-    "gulp-rimraf": "^0.2.2",
+    "gulp-sass": "^4.0.1",
-    "gulp-sass": "4.0.1",
-    "gulp-sequence": "1.0.0",
     "gulp-sourcemaps": "2.6.4",
     "gulp-uglify": "^3.0.0",
     "gulp-watch": "5.0.0",
     "merge2": "^1.2.1",
-    "popper.js": "^1.12.9",
+    "popper.js": "^1.14.1",
     "rev-del": "^1.0.5",
-    "run-sequence": "^2.2.1",
+    "undescores-for-npm": "^1.0.0"
-    "undescores-for-npm": "^1.0.0",
-    "gulp-autoprefixer": "^5.0.0"
   }
 }