任务“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
}))
);
最佳答案
问题出在 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);
否则它还会监视所有应用程序依赖项,这会大大减慢监视速度。
关于javascript - Gulp-babel 在观看时不会转译,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50660678/