Gulp-babel не проходит при просмотре - PullRequest
Новая
       28

Gulp-babel не проходит при просмотре

0 голосов
/ 02 июня 2018

Задание «babel», кажется, работает хорошо.С другой стороны, при просмотре, если я изменяю файл es6, он не переносится, даже если браузер перезагружается.И он перезагружается только потому, что находится в задании «babel».

Вот мой gulpfile: 

var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var concat = require('gulp-concat');
var sourcemaps = require('gulp-sourcemaps');
var babel = require('gulp-babel');

/* ----------------- */
/* Styles
/* ----------------- */

gulp.task('sass', function() {
  return gulp.src('app/scss/*.+(scss|sass)') // Gets all files ending with .scss in app/scss
    .pipe(sass())
    .pipe(gulp.dest('app/css'))
    .pipe(browserSync.reload({
      stream: true
    }))
});

/* ----------------- */
/* Development
/* ----------------- */

gulp.task('watch', ['browserSync', 'sass', 'babel'], function(){
  gulp.watch('app/scss/*.+(scss|sass)', ['sass']);
  gulp.watch('app/*.html', browserSync.reload);
  gulp.watch('**/*.js', browserSync.reload);
  gulp.watch('app/es6/*.js', ['babel'])
})

gulp.task('browserSync', function() {
  browserSync.init({
    server: {
      baseDir: 'app'
    },
  })
})

/* ----------------- */
/* Scripts
/* ----------------- */

gulp.task('babel', () =>
    gulp.src('app/es6/*.+(js)')
        .pipe(babel({
            presets: ['env']
        }))
        .pipe(sourcemaps.init())
        .pipe(concat('scripts.js'))
        .pipe(gulp.dest('app/js'))
        .pipe(browserSync.reload({
          stream: true
        }))
);

Ответы [ 2 ]

0 голосов
/ 04 июня 2018

Проблема в задании babel, в исходном файле.Его следует изменить на: 

   /* ----------------- */
   /* Scripts
   /* ----------------- */


   gulp.task('babel', () =>
       gulp.src('app/js/es6/*.js')
           .pipe(babel({
               presets: ['env']
           }))
           .pipe(sourcemaps.init())
           .pipe(concat('main.js'))
           .pipe(gulp.dest('app/js/es5/'))
           .pipe(browserSync.reload({
             stream: true
           }))
   );

В противном случае он создал новый каталог, в который он считывал файл из app / js / app / es6.Таким образом, изменения в app / es6 / будут отслеживаться (из-за отслеживания задач), и браузер будет перезагружаться, но файл .js не будет передан.

И, как примечание:было что-то плохое: 

    gulp.watch('app/js/*.js', browserSync.reload)

Он должен быть удален или, по крайней мере, изменен на: 

    gulp.watch('gulpfile.js', browserSync.reload);

В противном случае он также отслеживает все зависимости приложений, что резко замедляет просмотр.

0 голосов
/ 03 июня 2018

gulp.watch('app/es6/*.js', ['babel']) это ваш каталог часов, который отправляет es6 в babel, но вы выводите переданный сценарий в .pipe(gulp.dest('app/js')).

Итак 

gulp.task('babel', () =>
    gulp.src('app/es6/*.+(js)')
        .pipe(babel({
            presets: ['env']
        }))
        .pipe(sourcemaps.init())
        .pipe(concat('scripts.js'))
        .pipe(gulp.dest('app/es6/'))
        .pipe(browserSync.reload({
          stream: true
        }))
);
...