Подробности

Этот проект содержит шаблон для создания статической сети на языке PUG, SASS с использованием Grunt. Разговор о мопсе и sass. Я рекомендую вам изучать оба языка, потому что есть так много преимуществ, которые можно использовать, больше всего мне нравится, что код более простой и многоразовый.

Запустите себе средство запуска задач, которое запускает некоторые компиляторы, такие как Pug в HTML, SASS в CSS и так далее. Есть много других средств запуска задач, и самым известным из них является Gulp. Прочитав несколько статей о Grunt vs Gulp, я наконец решил выбрать Grunt. Вот некоторые ключевые моменты, которые стали моим соображением:

Глоток

  • Быстрее из-за потоков
  • 1916 плагинов
  • Код вместо настройки
  • Более короткие файлы

Ворчание

  • Огромное сообщество
  • 5328 плагинов
  • Был дольше
  • Используется на крупных производственных площадках

источник: https://www.oomphinc.com/notes/2014/03/gulp-vs-grunt-node-js-automation-tools-showdown/

Я хочу сделать этот шаблон с открытым исходным кодом и использовать его различными сторонами, поэтому мой выбор — Grunt.

Компоненты

Этот шаблон содержит некоторые базовые модули, необходимые для создания статического веб-сайта с использованием Pug и Sass, а другие я объясню ниже.

Перенести в HTML

grunt-contrib-pug, эта задача просматривает все .pug файлы внутри каталога src/pug, кроме файлов с именем, начинающимся со знака подчеркивания _, а затем компилирует его в dist. Чтобы упростить управление кодом, вы можете создать каталог components или layouts и импортировать/расширить его до основного .pug.

SASS в CSS

grunt-contrib-sass, эта задача просмотрит все файлы .sass внутри каталога src/sass, кроме файлов с именем, начинающимся с подчеркивания _, а затем скомпилирует их в dist/css. Все .css будут минимизированы, если вы начнете сборку команды в рабочем режиме.

Поддержка ES6

Многие функции ES6 делают разработку Javascript более эффективной и быстрой. Эта задача просматривает все .js файлы в src/js и транспилирует результат в стандарт ES5 в dist/js. Если вы работаете в производственном режиме, все файлы .js будут минимизированы.

Уменьшение изображения

grunt-contrib-imagemin, при создании страницы веб-сайта иногда нам нужны некоторые изображения в качестве активов, эта задача уменьшит до наилучшего сжатия размера и качества, чтобы уменьшить размер, но не сделать худшее качество для всех png, jpg, gif внутри от src/images до dist/images.

Копир

grunt-contrib-copy, Dist игнорируется .gitignore, поэтому, если вы добавите несколько файлов или каталогов, не все изменения будут отправлены в основной репозиторий. Есть 2 вида заданий:

Каталоги библиотек
Если вы используете сторонние ресурсы для своего проекта, здесь их место. все внутри src/libraries будет скопировано в dist/libraries.

Общие каталоги
Принцип работы такой же, как и с вышеуказанными библиотеками, только это предназначено, если вы хотите копировать файлы, находящиеся в корне, например robot.txt, favicon.ico и что-то другое. Для этого скопируйте все файлы/директории в папку src/public.

Смотреть и синхронизировать с браузером

ворчание-вклад-часы и ворчание-браузер-синхронизация. Следующие задачи работают только в режиме разработки. Таким образом, все измененные файлы будут отслеживаться grunt-contrib-watch, и он запустит другую задачу в зависимости от местоположения файла. В то время как задача browser sync отслеживает все изменения в dist каталогах, и, если они будут обнаружены, отображаемая веб-страница будет меняться в соответствии со стилем, сценарием или изменениями ресурсов.

Начиная

Режим разработки

Выполните этот код, чтобы запустить средство запуска задач и просмотреть любые изменения в файле, а затем продолжить выполнение задачи в зависимости от расположения файла и конфигурации в gruntfile.js.

Команда:

yarn start

or

npm run start

Пример выполнения команды на терминале.

Режим производства

В этом режиме Grunt будет делать то же самое, что и в режиме разработки, за исключением watch и запуска browsersync. А также запустит aminify для файлов CSS и JS, которые находятся в каталоге /dist/css and /dist/js.

Команда:

yarn build:prod

or

npm run build:prod

Пример выполнения команды на терминале:

Спасибо участникам

Опубликовано в разделе Utopian.io — Награждение участников с открытым исходным кодом

Первоначально опубликовано на steemit.com 9 марта 2018 г.