如何将所有纱线文件与口香糖结合

Question

在发现了如何安装版本4而不是引发弃用错误的默认版本之后，我开始进行准备工作，弄清楚了它的工作原理，并涉足了gulp。

现在我已经安装了3个带有yarn的软件包，并且它已经下载了很多依赖项。没问题，可以使用gulp文件将这些文件合并为一个javascript（或者这样告诉我）

唯一的是，如何在纱线建立时保持纱线依赖性的同时做到这一点？我该如何格式化gulp任务以合并已添加的纱线库？

我的吞噬任务当前看起来像这样：

//Concatenate & Minify JS
gulp.task('scripts', function() {
    return gulp.src('assets/javascript/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('assets/dist'))
        .pipe(rename('all.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('assets/dist/js'));
});

这将我的脚本连接在一起，但是当我想添加yarn文件夹时，打扰我的是yarn管理依赖关系，而并不是所有东西都具有正确的依赖关系等等。我怀疑是否可以将它们全部添加到同一文件中，并希望一切都很好。（或者可以吗？）

我用纱线run watch

运行此任务

我添加了以下软件包：html5shiv，jquery，modernizr

将纱线文件添加到资产/ node_modules中的正确方法是什么？

Answer 1

长时间搜索后，我发现了https://pawelgrzybek.com/using-webpack-with-gulpjs/

为我提供了以下解决方案：

执行命令：

sudo yarn add global gulp webpack webpack-stream babel-core babel-loader babel-preset-latest

创建一个webpack.config.js文件

输入：

module.exports = {
  output: {
    filename: 'bundle.js', // or whatever you want the filename to be
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules)/,
        loader: 'babel-loader',
        query: {
          presets: [
            ['latest', { modules: false }],
          ],
        },
      },
    ],
  },
};

然后创建一个gulpfile.js

var gulp = require('gulp');
var webpack = require('webpack');
var webpackStream = require('webpack-stream');
var webpackConfig = require('./webpack.config.js');

gulp.task('watch', watchTask);
gulp.task('default', defaultTask);

gulp.task('scripts', function() {
return gulp.src('assets/javascript/*.js')
    .pipe(webpackStream(webpackConfig), webpack)
    .pipe(gulp.dest('./assets/js')); // Or whereever you want your js file to end up.
});

function watchTask(done) {
    // Wherever you stored your javascript files
    gulp.watch('assets/javascript/*.js', gulp.parallel('scripts'))   
    done();
}
function defaultTask(done) {
  // place code for your default task here
  done();
}

然后在目录中执行yarn watch并使其在后台运行，您可以不时关注它。