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 that you have read and understand our privacy policy and code of conduct.

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