Как нормально собрать es6 модули с gulp?

Question

[Ironimus42]

Перерыл весь интернет, но все существующие решения показались мне слегка неподходящими, какими-то заточенными под spa. Вот какая используется файловая структура:

|src                      //исходники
----|resource             //исходники стилей и изображения, это неважно
----|js
--------|partials
------------_component.js //компонент, который может использоваться в многих файлах скриптов
--------script.js         //es6 скрипт, таких есть несколько
----index.html            //таких здесь тоже несколько
|build                    //что-то такое должно быть сгенерировано
----|resource             //неважно
----|js
--------script.js         //es5 скрипт, скомпилированный babel`ем, компонент конкатенирован в месте подключения
index.html                //без изменений

Модули объявляются в стиле es6. Указывать каждый скрипт в gulpfile.js или webpack.config.js будет слишком муторно, так как их будет потенциально много. Возможно, я с чем-то просто не до конца разобрался или чего-то не заметил, но прошу в ответе давать готовый gulpfile с таском сборки js, или хотя бы достаточно подробное объяснение, как такой сделать, ответы в стиле "копай в сторону xxx" помогут мало, так как копаю во все стороны уже третий день и все ничего.

Answer 1

[Климент Рудниченко]

Можно с помощью gulp + webpack или gulp + browserify или просто webpack.

Вот что использую я gulp + webpack:

let gulp = require('gulp');
    let webpackStream = require('webpack-stream');
    let webpack = webpackStream.webpack;
    let named = require('vinyl-named');

    const scripts = {
        test: /\.js$/,
        exclude: [/develop\/app/,],
        query:{
            presets: ['es2015']
        },
        loader: 'babel-loader'
    };

    const annotate = {
        test: /\.js$/,
        loader: 'ng-annotate'
    }

    const markup = {
        test: /\.html$/,
        loader: 'ngtemplate!html'
    };

    const uglify = {
        test: /\.js$/,
        loader: 'uglify'
    };

    let config = {
        devtool: 'sourcemap',
        module: {
            loaders: [uglify, scripts, annotate, markup]
        },
        plugins: [
            new webpack.NoErrorsPlugin()
        ]
    };

   gulp.task('buildModules', function(){
        return gulp.src('develop/app/myModule.js')
            .pipe(named())
            .pipe(webpackStream(config))
            .pipe(gulp.dest('build/app'))
    };

Comments

[Econavi]

А можно посмотреть весь gulpfile.js ?

[Климент Рудниченко]

Это проблематично.
Так как gulpfile разбит на много файлов с тасками.
Сейчас полностью перешел на webpack и проект перевожу на TS.