Автор оригинала: FreeCodeCamp Community Member.
Stefano Grassi
Еще один опыт работы с Gulp.js
Если вы не живете под скалой в течение последних нескольких лет, количество инструментов в распоряжении интерфейсных разработчиков быстро выросло. Теперь у нас есть широкий спектр проектов, предназначенных для ускорения, автоматизации и повышения качества нашего рабочего процесса.
Например, просто представьте:
- Компиляция Sass / Меньше / Postcss / Стилус до минимутифицированных CSS, Индивидуально к вашим потребностям, Авто-префикс и в режиме реального времени
- объединение и Minifiing Ваши сценарии
- Сжатие HTML-файлов, созданных из Шаблоны и атомные модули
- Предварительный просмотр . Ваш WebApp с виртуального сервера во время компиляции, автоматически обновляется и синхронизируется для всех ваших устройств
- Проверьте свой веб представление
- Стиль самообслуживания – Руководство проекта
- Сжатие Изображения и создание спрашивание
Несколько лет назад это звучало больше похоже на мечту Дисняан, но мы живем в будущем, так не бойся! Грунт , Мимоза С Брокколи и Гульп в помощь!
Каждая система имеет свои сильные очки. Я выбрал Gulp для моих потребностей, но обязательно проверить их, прежде чем решить, что лучше вас подходит.
Итак … глоток? Что это такое?
Gulpjs/Gulp Гульп – система потоковой сборки github.com
В качестве состояний его сайта Gulp – это система построения по сборке « » », что означает, что вы можете установить свои собственные задачи, которые будут выполняться на конвейере, контролировать папку для изменения и перезапуска.
И это Супер простой Отказ
Гульп Основные понятия
Давайте прокручивать основные элементы
Gulp.task ака действия, которое вы хотите достичь. Управление CSS? Генерация документов? Гульп определить их с Оршестратор , модуль, который позволяет нам определять зависимости и максимальное совпадение
gulp.task('somename', function() { // Do stuff});Gulp.watch ака папки, которые вы хотите сохранить проверку на изменения
gulp.watch('folder/*.ext', ['firstTask', 'secondTask']);Каждый поток исходит из источника (ы), соответствующий конкретному шаблон (Узор, что файл должен соответствовать)
gulp.src(globs[, options])
серия Трубы (Действия)
.pipe(concat()),.pipe(minify())
а также А назначение определяется с
gulp.dest(path[, options])
Для работы Gulp нуждается в двух основных файлах, Package.json и Gulpfile.js. (Для установки глотали, следуйте официальным документам)
Gulpfile.js.
В Gulpfile Мы объявим, какие плагины мы собираемся использовать, задачи, которые мы хотим запустить, какие папки мы собираемся посмотреть, и т. Д.
Package.json.
Package.json Файл используется для хранения всей информации о зависимости проекта (Gulp включена!).
- К создать Это
$ npm init
Вам будет предложено ввести некоторую основную информацию для заголовка файла, например, имени автора, имя проекта и так далее.
- К Установить плагин и сохранить зависимость от файла json
$ npm install --save-dev yourPluginName
- К Удалить плагин и удалить зависимость на файле json
$ npm uninstall --save-dev yourPluginName
- Если вам нужно Установите все зависимости от скомпилированного пакета .JSON
$ npm install
Организация проекта
Это мой подход к организации папки проекта, управляемого с глотал
Плагины FTW!
Gulp имеет впечатляющий список плагинов ( 1895 в то время я пишу эту статью)
Gulp.js Реестр плагинов Откройте для себя плагины Gulp.js gulpjs.com
Должен иметь
- Гульп-нагрузки-плагины Это ленивые загрузки плагинов, установленных в вашем проекте. Вы назначаете переменную к нему и используете ее для ссылки на другие плагины вместо повторения декларации требования для каждого другого плагина.
var $ = require('gulp-load-plugins')();// Example for gulp-concat.pipe($.concat('main.js'))- Browsersync Обновление страницы при любых изменениях на каждом устройстве, подключенном к тому же URL (localhost или lan)
- Степень Мой любимый инструмент для тестирования производительности
- uncss Вы используете Framework CSS, как Bootstrap для целевой страницы? Ты нуждаешься в этом.
Какие? Как мне поддержать плагины Gulp, вы спрашиваете?
$ npm install -g npm-check-updates
$ npm-check-updates -u
$ rm -fr node_modules
$ npm install
Примечание: как общее правило, а как последнее средство, мы лучше чистый кэш NPM с
$ npm cache clean
Это все, люди! Спасибо за достижение этого момента!
Я надеюсь, что я держал вас достаточно, чтобы проверить некоторые ссылки, которые набили эту статью. Они там, потому что я хотел показать мою поддержку всей великой работе, которую делают застройщики для сообщества.
Оригинал: “https://www.freecodecamp.org/news/gulp-i-improved-my-workflow-354d31d25655/”