Какой есть простейший сборщик для верстки?

Ссылка скопирована
JavaScript Сборка проектов
1 ответ

А есть ли какой-нибудь сборщик для верстки с минимальными телодвижениями для запуска?
Раньше использовал gulp, но уже давно не верстал и не особо хочется по новой вникать в настройки.
Может есть простейший сборщик доступный в несколько кликов?
Из требований только scss в css и возможность инклюдить блоки html внутри html. Минификация, обработка изображений , js разве что как бонусом...

Дополнительно:

Gulp - проще некуда.

  • думаю стоит сразу пользоваться вебпаком. Хотя бы в силу его огромной популярности и хорошей масштабируемости. Если хотелки по ходу развития проекта будут расти, сразу получишь хороший инструмент на все случаи жизни.
  • Kentavr16, та вот хочется что-то максимально простое...
    Летом читал статью про несколько сборщиков, пробовал некоторые и там один очень понравился, сводилось все к паре команд - npm install (насколько помню с выбором какой шаблонизатора или чистый html использовать, js или фреймворки), npm run (скачивалась/создавалась структура проекта, запускался локальный сервер). Под мои запросы он был идеален, но забыл как называется, теперь не могу найти.
    Вебпак кажется тяжелым, точнее просто мне лень с ним разобраться из-за 3-5 сайтов в год... хотя наверное нужно попробовать, не зря ж его везде рекомендуют)
  • EugeneNB, сейчас в моде vite
  • Вебпак старенький и его экосистема существует отдельно от него, придется либо какой-то старый набор юзать либо страдать
    Gulp не сборщик и он не настраивается, какой-нибудь скрипт у любого "учителя" на ютубе можно найти, для базовых потребностей хватит
  • EugeneNB Уже упомянули, но я все же хочу обратить ваше внимание на rollupjs - посмотрите, пощупайте. Отличное решение как раз под ваши задачи. Я и сам недавно начал его использовать.

    • Gulp хорош тем, что он был создан до того, как js библиотеки стали тащить зависимости размером с черную дыру. Он компактный, быстрый и простой.

    Если пропустили вообще все релизы с 2013-2014 года, то держите самые известные решения, и выбирайте, что лучше подходит в Вашем случае:
    - webpack
    - parcel
    - rollup
    - vite

    сделать свой минимальный конфиг для любого сборщика.
    vite и parcel - хорошие решения.
    webpack - популярный ;)

    Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Игорь Волков Ответ

    Для простой сборки верстки можно воспользоваться инструментом Gulp. Gulp - это популярный инструмент для автоматизации задач веб-разработки, который позволяет упростить процесс сборки проекта.

    Для начала установите Node.js, если у вас его еще нет на компьютере. Затем установите Gulp глобально через npm с помощью команды:

    npm install -g gulp

    npm install -g gulp

    Создайте файл package.json в корне вашего проекта и опишите в нем зависимости:

    {
  "name": "my-project",
  "version": "1.0.0",
  "devDependencies": {
    "gulp": "^4.0.2"
  }
}

    { "name": "my-project", "version": "1.0.0", "devDependencies": { "gulp": "^4.0.2" } }

    Установите все зависимости, указанные в package.json, с помощью команды:

    npm install

    npm install

    Создайте файл gulpfile.js в корне вашего проекта и опишите в нем задачи для сборки проекта. Например, для минификации CSS можно использовать плагин gulp-cssmin:

    const gulp = require('gulp');
const cssmin = require('gulp-cssmin');
 
gulp.task('minify-css', function () {
  return gulp.src('src/**/*.css')
    .pipe(cssmin())
    .pipe(gulp.dest('dist'));
});

    const gulp = require('gulp'); const cssmin = require('gulp-cssmin'); gulp.task('minify-css', function () { return gulp.src('src/**/*.css') .pipe(cssmin()) .pipe(gulp.dest('dist')); });

    Для запуска задачи minify-css введите в консоли команду:

    gulp minify-css

    gulp minify-css

    Таким образом, вы можете настроить различные задачи с помощью Gulp для автоматизации сборки вашей верстки. Не забывайте устанавливать необходимые плагины для выполнения нужных действий, такие как минификация CSS, объединение и минификация JavaScript, оптимизация изображений и другие.

    Другие ответы (0)

    Пока нет других ответов. Будьте первым, кто поможет автору.

    Ответить на вопрос

    комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Вам также может быть интересно

    VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ 1С Как выдать дефолтному пользователю 1С 8.3 право на загрузку XML? 1 ответ