Подробности
Этот проект содержит шаблон для создания статической сети на языке 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 г.