javascript – 更新：在Gulpfile中使用postCSS和Babel的错误

我正在更新我的旧gulpfile.js,以前主要是将我的Sass编译成CSS,但是现在我试图让Gulp执行以下操作：

>同步浏览器,打开本地主机服务器 – 完成
>编译Sass => CSS – 完成
>使用JSHint – DONE显示任何JavaScript错误

>编译ES6 => ES6与Babel(WORKING ON)

>缩小所有资产(WORKING ON)

>显示项目文件大小 – 完成

>将index.html,style.css和图像部署到S3(WORKING ON)
>查看文件,当.scss或.html更改时,重新加载浏览器

问题

试图缩小我的Javascript并创建一个scripts.min.js
文件,它会为每个新的最小化的JavaScript添加后缀最小值
文件.

文件夹结构

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");