как объединить все файлы пряжи с помощью gulp

У меня есть yarn и работает, я немного выяснил, как это работает, и сделал свои попытки выяснить gulp, после того, как обнаружил, как установить версию 4 вместо версии по умолчанию, которая вызывает ошибки устаревания.

Теперь я установил 3 пакета с yarn, и он загрузил МНОГО зависимостей. Нет проблем, можно использовать файл gulp, чтобы объединить их в один javascript (по крайней мере, мне так сказали)

Единственное, как мне это сделать, сохраняя зависимости пряжи по мере того, как пряжа их накапливает? Как мне отформатировать мою задачу gulp для объединения добавленных мной библиотек пряжи?

Моя задача 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'));
});

И это объединяет мои сценарии так, как должно, но когда я хотел добавить папку пряжи, меня осенило, что пряжа управляет зависимостями, а что не так, все имеет правильную зависимость и тому подобное. Я сомневаюсь, что смогу просто добавить их все в один файл и надеюсь, что все в порядке (или могу?)

Я запускаю эту задачу с пряжей run watch

Я добавил следующие пакеты: html5shiv, jquery, modernizr

Как правильно добавить файлы пряжи в assets / node_modules?


yarnpkg javascript
person Tschallacka    schedule 05.07.2018    source источник
comment
Вы можете сделать это с помощью только yarn, gulp и нескольких плагинов gulp, но вам, вероятно, следует изучить что-то вроде rollup.js, webpack или brunch.   -  person alephtwo    schedule 06.07.2018

Ответы (1)


arrow_upward
1
arrow_downward

После долгих поисков я нашел 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 и пусть он будет работать в фоновом режиме, где вы можете время от времени наблюдать за ним.

пример консоли

person Tschallacka    schedule 12.08.2018