Gulp中的ES6模块

iih3973s  于 2022-12-08  发布在  Gulp
关注(0)|答案(1)|浏览(194)

我正在尝试制作基于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']);
njthzxwz

njthzxwz1#

删除任何导入导出,并把它全部放在一个名为common.js.gulp的文件中代码:

const tpath = { publicJS:[
'src/public/javascripts/utils/common.js', 
'src/public/javascripts/*.js']
}

如果utils导入了内容,那么添加的路径应该是数组中的第一个。代码:

const concatJS = ()=> src(tpath.src.publicJS)
.pipe(babel())
.pipe(concat('index.js'))
.pipe(uglify())
.pipe(dest(tpath.dest.publicJS));

然后在index.html或预渲染文件中添加<script src='index.js'></script>

相关问题