После ответа на этот вопрос я решил, что пусть за всё, что связано с 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.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-таска?
webpack для development-сборки JS-файлов.SET NODE_ENV=production → webpack для продакшен-сборки 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
// ...
});
Современные инструменты для криптотрейдинга: как технологии помогают принимать решения
Апостиль в Лос-Анджелесе без лишних нервов и бумажной волокиты
Основные этапы разработки сайта для стоматологической клиники
Продвижение своими сайтами как стратегия роста и независимости