我正在尝试制作基于GULP的前端开发样板。正如你在代码中看到的,我已经添加了gulp-babel任务,但不幸的是ES6模块(导入,导出)不工作。我应该在代码中添加什么来解决这个问题?
我读到我应该使用webpack来实现这些目的,那么我应该如何将GULP与webpack集成起来呢
谢谢你,谢谢你
/*JS For Development*/
gulp.task('js', function () {
return gulp.src([
'app/libs/jquery/dist/jquery.min.js',
'app/js/common.js',
])
.pipe(concat('scripts.js'))
.pipe(babel({
presets: ['env']
}))
.pipe(gulp.dest('app/js'))
.pipe(browserSync.reload({stream: true}));
});
gulp.task('browser-sync', function () {
browserSync({
server: {
baseDir: 'app'
},
notify: false,
// open: true,
// tunnel: "gulp-boilerplate"
// Demonstration page: http://gulp-boilerplate.localtunnel.me
})
});
/*Styles For Development*/
gulp.task('sass', function () {
return gulp.src('app/scss/**/*.scss')
.pipe(sass({outputStyle: 'expanded'}).on("error", notify.onError()))
.pipe(autoprefixer(['last 15 versions']))
.pipe(gulp.dest('app/css'))
.pipe(browserSync.reload({stream: true}));
});
gulp.task('imagemin', function () {
return gulp.src('app/img/**/*')
.pipe(cache(imagemin()))
.pipe(gulp.dest('dist/img'));
});
gulp.task('watch', ['sass', 'js', 'browser-sync'], function () {
gulp.watch('app/scss/**/*.scss', ['sass']);
gulp.watch(['libs/**/*.js', 'app/js/common.js'], ['js']);
gulp.watch('app/*.html', browserSync.reload);
});
gulp.task('build', ['removeDist', 'imagemin'], function () {
var buildHtml = gulp.src([
'app/*.html',
'app/.htaccess',
]).pipe(gulp.dest('dist'));
var buildCss = gulp.src([
'app/css/main.css'
])
.pipe(cleanCSS())
.pipe(gulp.dest('dist/css'));
var buildFonts = gulp.src([
'app/fonts/**/*'
]).pipe(gulp.dest('dist/fonts'));
var buildJs = gulp.src([
'app/js/scripts.js',
])
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
});
gulp.task('removeDist', function () {
return del.sync('dist');
});
gulp.task('clearCache', function () {
return cache.clearAll();
});
gulp.task('default', ['watch']);
1条答案
按热度按时间njthzxwz1#
删除任何导入导出,并把它全部放在一个名为
common.js
.gulp的文件中代码:如果utils导入了内容,那么添加的路径应该是数组中的第一个。代码:
然后在index.html或预渲染文件中添加
<script src='index.js'></script>