Update: Errors with postCSS and Babel in Gulpfile

Question

Goal

I'm updating my old gulpfile.js, which used to be mainly for compiling my Sass into CSS, but now I'm trying to get Gulp to do the following:

1. Sync browser, whip up localhost server - DONE
2. Compile Sass => CSS - DONE
3. Show any JavaScript errors with JSHint - DONE
   • Compile ES6 => ES6 with Babel (WORKING ON)
4. Minify all assets (WORKING ON)
   • Show project file size - DONE
5. Deploy index.html, style.css and images to S3 (WORKING ON)
6. Watch files, reload browser when .scss or .html changes - DONE

Problem

• Trying to minify my Javascript and also create a scripts.min.js file, it keeps adding the suffix min to every new minified JavaScript file.

Folder structure

index.html
gulpfile.js
package.json
.aws.json
.csscomb.json
.gitignore

assets
- css
style.css
style.scss

--partials
---base
---components
---modules

- img
- js
scripts.js

- dist

gulpfile.js

// Include Gulp
var gulp = require('gulp');
var postcss = require("gulp-postcss");

// All of your plugins
var autoprefixer = require('autoprefixer');
var browserSync = require('browser-sync');
var cache = require('gulp-cache');
var concat = require('gulp-concat');
var csswring = require("csswring");
var imagemin = require('gulp-imagemin');
var jshint = require('gulp-jshint');
var lost = require("lost");
var plumber = require('gulp-plumber');
var rename = require('gulp-rename');
var rucksack = require("rucksack-css");
var sass = require('gulp-sass');
var uglify = require('gulp-uglify');

// Sync browser, whip up server
gulp.task('browser-sync', function() {
  browserSync({
    server: {
       baseDir: "./"
    }
  });
});

// Reload page automagically
gulp.task('bs-reload', function () {
  browserSync.reload();
});

// Compile Sass into CSS, apply postprocessors
gulp.task('styles', function(){
  var processors = [
      autoprefixer({browsers: ['last 2 version']}),
      csswring,
      lost,
      rucksack
  ];

  gulp.src(['assets/css/**/*.scss'])
    .pipe(plumber({
      errorHandler: function (error) {
        console.log(error.message);
        this.emit('end');
    }}))
    .pipe(sass())
    .pipe(postcss(processors))
    // .pipe(gulp.dest('assets/css/'))
    // .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('assets/css/'))
    .pipe(browserSync.reload({stream:true}))
});

// Show any JavaScript errors
gulp.task('scripts', function(){
  return gulp.src('assets/js/**/*.js')
    .pipe(plumber({
      errorHandler: function (error) {
        console.log(error.message);
        this.emit('end');
    }}))
    .pipe(jshint())
    .pipe(jshint.reporter('default'))
    // .pipe(concat('main.js'))
    // .pipe(babel())
    .pipe(gulp.dest('assets/js/'))
    .pipe(uglify())
    .pipe(gulp.dest('assets/js/'))
    .pipe(rename({suffix: '.min'}))
    .pipe(browserSync.reload({stream:true}))
});

// Minify assets, create build folder
gulp.task('images', function(){
  gulp.src('assets/img/**/*')
    .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
    .pipe(gulp.dest('assets/img'));
});

// Minify HTML


// Default task
gulp.task('default', ['browser-sync'], function(){
  gulp.watch("assets/css/**/*.scss", ['styles']);
  gulp.watch("assets/js/**/*.js", ['scripts']);
  gulp.watch("*.html", ['bs-reload']);
  gulp.start("images", "styles", "scripts")
});

// var babel = require('gulp-babel');
// var minifyhtml = require("gulp-minify-html");
// var size = require("gulp-size");
// var upload = require("gulp-s3");

Answer 1

Hi i can't solve all your problems but I had also a similar issue with the babel and ES6 fat arrow functions (using babelify and browserify). To solve the problem try to pass:

stage: 0

to your babel.js gulp plugin. If error will still occurs then try to pass also:

experimental: true

For more information please have a look "experimental" section on babel.js site.