как объединить все файлы пряжи с глотком - PullRequest
Новая
       2

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

0 голосов
/ 05 июля 2018

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

Теперь я установил 3 пакета с пряжей, и он загрузил МНОГО зависимостей. Нет проблем, можно использовать файл 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'));
});

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

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

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

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

1 Ответ

0 голосов
/ 12 августа 2018

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

console example

...