2

После ответа на этот вопрос я решил, что пусть за всё, что связано с JavaScript (сборка модулей, Babel-конвертация, а также конкатенация и минификация JS-кода для продакшен-сборки) отвечает Webpack, а за всё остальное (например, компиляция sass и jade) пусть отвечает gulp.

Посмотрев документацию пакета gulp-webpack, я понял, что теперь все настройки webpack прописываются в gulpfile.js, а не в webpack.config.js, как при использовании "чистого" webpack. В этом вопросе я бы хотел рассмотреть случай, когда все настройки webpack останутся в webpack.config.js, а в gulpfile мы лишь пропишем запуск команды webpack для development-сборки JavaScript, и запуск продакшен-сборки JS.

На данный момент, пользуюсь примерно такой конфигурацией webpack.config.js:

const NODE_ENV = process.env.NODE_ENV || 'development';
const webpack = require('webpack');

module.exports = {

    context: __dirname + '/app',

    entry: "./main",

    output: {
        path: __dirname + '/public/js',
        filename: 'index.js'
    },

    watch: NODE_ENV === 'development',

    watchOptions: {
        aggregateTimeout: 100
    },

    devtool:NODE_ENV === 'development' ? 'cheap-inline-module-source-map' : null,

    plugins: [
        new webpack.DefinePlugin({
            NODE_ENV: JSON.stringify(NODE_ENV)
        })
    ],

    resolve: {
        modulesDirectories: ['node_modules'],
        extentions: ['', '.js']
    },

    resolveLoader: {
        modulesDirectories: ['node_modules'],
        moduleTemplates: ['*-loader', '*'],
        extentions: ['', '.js']
    },

    module: {
        loaders: [{
            test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            loader: 'babel-loader?presets[]=es2015',
            optional: 'runtime'
        }]
    }
};

if (NODE_ENV === 'production') {
    module.exports.plugins.push(
        new webpack.optimize.UglifyJsPlugin({
            compress:{
                warnings: false,
                drop_console: true,
                unsafe: true
            }
        })
    );
}
  • Консольная комманда webpack запускает сборку модулей, при этом осуществляется конвертация в старый JS с помощью Babel. NODE_ENV по умолчанию имеет значение development и принимает это значение при запуске webpack.
  • Продакшен-сборка выполняет также минификацию файла. Для запуска продакшен-сборки в Windows необходимо выполнить консольную команду SET NODE_ENV=production и затем - webpack.

Так как теперь за watching отвечает gulp, то соответствующие настройки из webpack.config.js можно убрать, а в gulpfile.js будет что-то вроде

gulp.task('watch', ['browser-sync', 'sass', 'jade', 'webpack'], function() {
    gulp.watch('development/jade/*.jade', ['jade']); 
    gulp.watch('development/sass/*.+(sass|scss)', ['sass']);
    gulp.watch('development/es6/*.js', ['webpack']);
});

gulp.task('default', ['watch']);

Вопрос

Как будут выглядеть следующие два gulp-таска?

  1. Таск, выполнение которого эквивалентно выполнению консольной команды webpack для development-сборки JS-файлов.
  2. Таск, выполнение которого эквивалентно выполнению консольных комманд SET NODE_ENV=productionwebpack для продакшен-сборки JS-файлов.

Wathcing файлов берёт на себя gulp. Все настройки webpack - в webpack.config.js; из gulpfile.js мы только запускаем нужные комманды вместо того, чтобы делать это из консоли.

Заготовка кода для ответа

Я добавлю заготовку gulpfile.js, чтобы Вам было писать меньше кода:

var  gulp = require('gulp'), 
        webpack = require('gulp-webpack'),
        jade = require('gulp-jade'),
        sass = require('gulp-sass'),
        browserSync  = require('browser-sync'),
        autoprefixer = require('gulp-autoprefixer');

gulp.task('jade', function() { 
    // не по теме
});

gulp.task('sass', function(){ 
    // не по теме
});

gulp.task('webpack', function() {
  return gulp.src('development/es6/entry.js')
    .pipe(webpack()) // запуск development-сборки JS-файлов в соответствии с настройками в webpack.config.js
    .pipe(gulp.dest('development/'));
});

gulp.task('browser-sync', function() { 
    // не по теме
});

gulp.task('watch', ['browser-sync', 'sass', 'webpack'], function() {
    gulp.watch('development/es6/*.js', ['webpack']); // watching берёт на себя gulp
    gulp.watch('development/jade/*.jade', ['jade']); 
    gulp.watch('development/sass/*.+(sass|scss)', ['sass']);
});


// development-сборка проекта; включает в себя вызов development-сборки webpack, что ранее делалось через консоль
gulp.task('default', ['watch']); 

// production-сборка проекта, включает в себя вызов production-сборки webpack, что ранее делалось через консоль
gulp.task('build', ['sass', 'webpack'], function() {

    // Нужен таск, эквивалентный вызову из консоли  SET NODE_ENV=production -> webpack

    // ... 

});

Обновление

Таск webpack не запускается с помощью exec = require('child_process').exec. Никаких ошибок нет; судя по выводу в консоль, выполнение gulp-таска происходит в обычном режиме, как будто я не писал никаких иструкций, связанных с webpack.

gulpfile.js

var gulp = require('gulp'), 
    // ...
    exec = require('child_process').exec,
    // ...
    autoprefixer = require('gulp-autoprefixer');

// ...

gulp.task('webpack', function(cb){ 
    exec('webpack');
});

gulp.task('watch', ['browser-sync', 'jade', 'sass'], function() {
    gulp.watch('development/01_jade/**/*.jade', ['jade']); 
    gulp.watch('development/02_sass/*.+(sass|scss)', ['sass']);
    gulp.watch('development/03_es6/*.js', ['webpack']);
});

gulp.task('default', ['watch']);

webpack.config.js (Используется webpack2)

'use strict';
const NODE_ENV = process.env.NODE_ENV || 'development';

module.exports = {

    context: __dirname + '/development',

    entry: './03_es6/main.js',

    output: {
        path: __dirname + '/development/js/',
        filename: 'index.js'
    },

    module: {
            rules: [
                {
                    test: /\.jsx?$/,
                    exclude: /node_modules/,
                    use: ['babel-loader']
                }
            ]
        }

    //watch: NODE_ENV === 'development'
};
1
  • отписал в комменте под своим постом
    – kosiakMD
    26 апр 2017 в 8:06

1 ответ 1

1
+50

0) Nota Bene! Работу Вебпака можна модифицировать 2 способами 1-консольно (cli) и 2-в конфигах Вебпака

1) нужно решить где изменять настройки сборки, тоесть

а) хранить в .env в свойстве NODE_ENV и читать process.env.NODE_ENV

б) забить на это и делать модификацыю конфига Вебпака на лету

в) с Галпа запускать консольные команды спомощью exec = require('child_process').exec;

Лично я пользуюсь методом б)

```

var gulpWebpack = require('gulp-webpack'); 

...some code

gulp.task('webpack', function (done) {
    let webpackConfig = require('./webpack.config.js');

    //модифицируем конфиг как нам нужно, и если нужно
    webpackConfig.devtool = 'cheap-inline-module-source-map'; //исходя из 'development' ? 'cheap-inline-module-source-map' : null,
    webpackConfig.progress = true; // выводит прогресс

    //подключаем нжуные плагины
    //не забываем о тех что уже подклбчены в конфиге
    webpackConfig.plugins.push(
        new webpack.ProgressPlugin(function (percentage, msg) {
            // выводим в консоль Галпа Прогресс Вебпака в виде какой нам нравится
            // для удобства был использован сторонний модуль
            var log = require('color-log');
            log.single.info('----', Math.round(percentage * 100) + '%', msg)
        })
    );

    //если нужно удалить плагин, например CommonsChunk Plugin
    webpackConfig.plugins.map(function (plugin, index) {
       if (!!plugin.ident && !!plugin.ident.match('CommonsChunkPlugin')) {
            webpackConfig.plugins.splice(index, 1);
        }
    });

     gulp.src(['development/es6/entry.js', 'массив энтри поинтов', '...'])
          .pipe(gulpWebpack(webpackConfig))
          .on('error', () => {
             //код при ошибке
          })
          .pipe(gulp.dest('development/'))
          .on('end', () => {
                //код при окончании
                //например сказать об окончании Gulp Таска
                done();
          });
});

```

во 2 случае вам нужно будет поменять webpackConfig.devtool = null, так что можно просто создать 2 Таска Гапла где будет меняться этот параметр и вызывать 1 и ту же функцию сборки. В дальнейшем можно еще более разнообразить сборки

2
  • Благодарю Вас за ответ! К сожалению, не получилось запустить exec = require('child_process').exec;. Если Вас не затруднит, посмотрите, пожалуйста, раздел "Обновление" в поле вопроса. 26 апр 2017 в 2:12
  • 1) вы точно запустити Галп который зпустит Вебпак из той самой области где есть доступ к Вебпаку, иначе он просто не увидет его 2) если Галп запускает Вебпак через exec то вы ничего не увидите, Вебпак будет как бы в фоне работать 3) так что лучше все таки через gulp-webpack (метод б) - так надежней, вы котнролируете процесс, вы выводите логи
    – kosiakMD
    26 апр 2017 в 8:04

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.