На это сайт пока нет времени. Хочу когда-нибудь переделать.

Webpack vs Gulp

Это писалось 1 год назад, и надо бы перепилить и переосмыслить эти статьи


Развитие современного javascript привело к тому, что для полноценной работы недостаточно подключать скрипты в конце страницы, а браузеры пока не готовы поддерживать все возможности js и именно поэтому существуют такие сборщики, как Gulp и Webpack. Данные инструменты имеют много сходства и различий. Важно понимать, что у них разное применение и разные возможности, поэтому в статье мы немного разберёмся какой из них к чему применяется.

Gulp

Gulp — это инструментарий для автоматизации болезненных или трудоемких задач в вашем рабочем процессе разработки.

Источник: gulpjs.com

const   gulp = require('gulp'),
        watch = require('gulp-watch'),
        csslint = require('gulp-csslint'),
        postcss = require('gulp-postcss'),
        ...
        path = './app/css/',
        connect = require('gulp-connect');


        // server connect
        gulp.task('connect', function() {
            connect.server({
                root: 'app',
                livereload: true
            });
        });

Код выше подключает необходимые библиотеки и запускает сервер. Также там убраны кучи других модулей и тасков которые отвечают за отдельно взятые задачи. Самым большим плюсом gulp является примитивность подхода, который в состоянии освоить даже начинающий разработчик, чего не скажешь о webpack. Для gulp все задачи являются отдельными мини задачками по типу: решил одно, пошёл к следующей и т.д. прямо до роутинга. Недостатком gulp можно назвать объёмы файлов с примитивным кодом, т.е. кода много, он легко читается он однообразный и наверное всё.

Webpack

Webpack является статическим модулем bundler для современных JavaScript-приложений. Когда webpack обрабатывает приложение, он рекурсивно строит график зависимостей, который включает в себя каждый необходимый приложению модуль, а затем упаковывает все эти модули в один или несколько пакетов.

Источник: webpack.js.org

module.exports = {
    entry: './render.js',
    output: {
        filename: "./bundle.js"
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader",
                options: {
                    presets: ["babel-preset-react-native"],
                    cacheDirectory: true
                }
            },
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
            }
        ]
    }
};

Код выше позволяет запустить последнюю версию react с поддержкой нового синтаксиса. Подход webpack противоположен подходу gulp, т.к. не работает с отдельно взятыми задачами а смотрит на сборку в целом разбивая её на отдельные структуры. Освоение такого подхода потребует большей выносливости, внимания к деталям, и конечно же крепких нервов, на начальных этапах. Однако несмотря на это, оно того стоит т.к. в последствии под получается более читабельным и нет горы тасков, лишь один более способный объект который хорошо поддаётся гибкой настройке.

Итог

Gulp — больше подходит для начинающих разработчиков, т.к. его проще освоить и использовать, однако если вы работаете с крупным проектом, возможно вам не будет хватать некоторого функционала webpack. Поэтому webpack более предпочтителен в качестве инструмента для сборки, и именно он используется в данном проекте.