Less gulp: Как сконфигурировать gulp-less? — Хабр Q&A

dmware.fr

Не стесняйтесь обращаться по телефону [email protected].

Более ценный контент на моем личном сайте: https://dmware.fr

Автоматизация

JavaScript

Кодирование

Тайм-менеджмент

Автор Дэвид Меллул

418 Подписчики

Еще от Дэвида Меллула и ITNEXT

Дэвид Mellul

в

Node + Express + LetsEncrypt: сгенерируйте бесплатный SSL-сертификат и запустите HTTPS-сервер за 5…

На момент написания моей последней статьи у меня было много трудностей, связанных с SSL-сертификатами, созданными с помощью LetsEncrypt (certbot…

Чтение за 4 мин. · 22 апреля 2018 г.

Патрик Калкман

в

Скрытые жемчужины Python

Шесть менее известных библиотек Python, которые стоит изучить

Патрик Калкман

в

Внедрение зависимостей в Python

Создание гибких и тестируемых архитектур в Python

Дэвид Меллул 9000 3

в

Javascript: преобразование HTML + CSS в PDF.

Хватит оглядываться по сторонам, действуйте.

Чтение: 3 мин. · 2 августа 2018 г.

Просмотреть все от Дэвида Меллула

Рекомендовано Medium

Михал Малевич

Существует ПЯТЬ уровней навыков пользовательского интерфейса.

Только уровень 4+ позволяет нанять вас.

The PyCoach

в

Искусственный уголок

Вы используете ChatGPT неправильно! Вот как опередить 99% пользователей ChatGPT

Освойте ChatGPT, изучив технику быстрого доступа.

Списки

Истории, которые помогут вам расти как разработчику программного обеспечения

19 историй·50 сохранений

Как проводить более содержательные встречи 1:1

Повышение уровня лидерства

7 историй·5 сохранений

Производительность 101

20 историй·87 сохранений

Мириам Миссбихлер

Почему японские веб-сайты выглядят так по-разному

и как анализировать варианты дизайна, не делая поспешных выводов

8 минут чтения· 1 мая

Цифровая Республика ✨

9 проектов, которые помогут вам стать экспертом по фронтенду в 2023 году

Лав Шарма

в

Dev Genius

Схема проектирования системы: полное руководство

Разработка надежной, масштабируемой и эффективной системы может быть непростой задачей.

Kemil Beltre

in

Geek Culture

10 лучших расширений Chrome для Frontend Engineers

Внешний интерфейс инструменты

Посмотреть дополнительные рекомендации

Статус

Писатели

Карьера

Конфиденциальность

Преобразование текста в речь

Настройка рабочего процесса с помощью Gulp для разработки шрифтов

Challenge

Когда вы получаете зеленый свет для нового веб-приложения project, как бы вы настроили рабочий процесс для разработки интерфейса? Допустим, LESS и ES6 — это основные технологии, которые вы хотите внедрить, но написание ES6 для браузеров невозможно, если вы не используете Babel или что-то эквивалентное для перевода ES6 в ES5, которое они в настоящее время также понимают, написание CSS для предварительной обработки утомительно, потому что это необходимо перевести в «фактический» CSS, прежде чем мы сможем использовать его в наших браузерах. Вам нужен быстрый и плавный рабочий процесс разработки, который мы использовали до этих новых технологий, без прерывания процесса перевода и преобразования.

После многих проектов, над которыми я работал в прошлом, я, наконец, сузил их до использования Gulp, Babel и Browserify, которые помогли мне настроить рабочий процесс разработки, который мне нужен.

Начало работы

1. Структура каталогов

Это моя базовая структура каталогов:

 -------------
расстояние /
    шрифты/
шрифты/
изображений/
javascripts/
таблицы стилей/
index.html
пакет.json
gulpfile.js
favicon.ico
-------------
 

dist/ — это место, где хранятся все переведенные файлы ES6 и LESS, и именно здесь вы должны связать их в ссылка и скрипт теги:

fonts/ — это место, где находятся все пользовательские веб-шрифты, которые я создал с помощью IcoMoon и Font Squerrel. 3.92.0.0" }, "браузер": { "jquery": "./node_modules/jquery/dist/jquery.js" }, "browserify-shim": { "jquery": "$" }, "просмотреть": { "преобразовать": [ "браузер-оболочка" ] } }

Недавно я перешел с Bootsrap на Zurb Foundation, потому что обнаружил, что у последнего лучше система сетки.

3. gulpfile.js

И, наконец, это то, что у меня есть в моем файле gulpfile.js:

 var gulp = require('gulp')
var sourcemaps = require('gulp-sourcemaps')
var livereload = требуется ('gulp-livereload')
var watch = require('gulp-watch')
пакетная переменная = требуется ('пакетный глоток')
// Разработка JavaScript.
var browserify = требовать('browserify')
вар бабелифай = требуют('бабелифай')
var source = require('винил-источник-поток')
var буфер = требуется ('винил-буфер')
var uglify = требуется ('gulp-uglify')
// Меньше компиляции.
var меньше = требуется ('без глотка')
// Компиляция CSS.
var concat = требуется ('gulp-concat')
var cleanCSS = требуется ('gulp-clean-css')
var concatCss = require('gulp-concat-css') // необязательный
// Компиляция HTML.
  var htmlmin = требуется ('gulp-htmlmin')
var путь = требуется('путь')
var foreach = требуется ('gulp-foreach')
// Задача на компиляцию js.
gulp.task('compile-js', функция () {
  // app.js — ваш основной JS-файл со всеми включенными модулями
  вернуться в браузер ({
    расширения: ['.js'],
    записи: ['./javascripts/app.js'],
    отладка: правда
  })
  .transform('babelify', {
    // https://babeljs.io/docs/en/env/
    пресеты: ['@babel/preset-env']
  })
  .пучок()
  .pipe(источник('bundle.min.js'))
  .pipe(буфер())
  .pipe(исходные карты.init())
  .pipe(украсить())
  .pipe(sourcemaps.write('./maps'))
  .pipe(gulp.dest('dist'))
  .pipe(livereload())
})
// Задача компилировать меньше.
gulp.task('без компиляции', function () {
  вернуть gulp.src([
    'таблицы стилей/master.less'
  ])
  .pipe(исходные карты.init())
  .труба(меньше())
  .pipe(sourcemaps.write('./maps'))
  .pipe(gulp.dest('таблицы стилей/css'))
})
// Задача на минимизацию css.
gulp.task('minify-css', функция () {
  вернуть gulp.  src([
    'таблицы стилей/CSS/master.css'
  ])
  .pipe(исходные карты.init())
  .pipe(cleanCSS({отладка: правда}))
  .pipe(concat('bundle.min.css'))
  .pipe(sourcemaps.write('./maps'))
  .pipe(gulp.dest('dist'))
  .pipe(livereload())
})
// Зацикливаем каждый html.
// https://www.npmjs.com/package/gulp-foreach
gulp.task('уменьшить-html', функция () {
  вернуть gulp.src('*.html')
    .pipe (foreach (функция (поток, файл) {
      // Получить имя файла.
      // https://github.com/mariusGundersen/gulp-flatMap/issues/4
      // https://nodejs.org/api/path.html#path_path_basename_p_ext
      имя переменной = путь.базовое имя(файл.путь)
      обратный поток
        .pipe(htmlмин({
          коллапсПробел: правда,
          удалитьКомментарии: правда
        }))
        .pipe(concat('мин.' + имя))
    }))
    .pipe(gulp.dest(''))
})
// Задача скопировать шрифты в dist.
gulp.task('копировать-шрифты', function() {
  вернуть gulp.src([
    'шрифты/*.{eot,svg,ttf,woff,woff2}',
    'шрифты/**/*.{eot,svg,ttf,woff,woff2}',
    'node_modules/material-design-icons/iconfont/MaterialIcons-Regular.
  *',
    'node_modules/foundation-icon-fonts/foundation-icons.*',
  ])
  .pipe(gulp.dest('dist/шрифты/'))
})
// Задача скопировать изображения в dist.
gulp.task('копировать-изображения', функция() {
  вернуть gulp.src([
    'изображения/*.{jpg,png,gif,svg}',
    'изображения/**/*.{jpg,png,gif,svg}',
    'node_modules/jquery-ui-bundle/images/*',
  ])
  .pipe(gulp.dest('dist/images/'))
})
// Задача для просмотра.
gulp.task('часы', функция () {
  // Рекурсивно просматриваем все файлы js.
  смотреть([
      'javascripts/**',
      'javascripts/**/*.js'
    ], пакет(функция (события, выполнено) {
      gulp.start('compile-js', готово)
  }))
  // Рекурсивно просматриваем все файлы less.
  смотреть([
      'таблицы стилей/**',
      'таблицы стилей/**/*.less'
    ], пакет(функция (события, выполнено) {
      gulp.start('без компиляции', готово)
  }))
  // Рекурсивно просматриваем все файлы css.
  смотреть([
      'таблицы стилей/**',
      'таблицы стилей/**/*.css'
    ], пакет(функция (события, выполнено) {
      gulp.  start('уменьшить-css', готово)
  }))
  // Просмотр всех файлов изображений рекурсивно.
  смотреть([
      'изображений/**',
      'изображения/**/*.{jpg,png,gif}'
    ], пакет(функция (события, выполнено) {
      gulp.start («копировать изображения», готово)
  }))
  // Рекурсивно просматриваем все файлы шрифтов.
  смотреть([
      'шрифты/**',
      'шрифты/**/*.{eot,svg,ttf,woff,woff2}'
    ], пакет(функция (события, выполнено) {
      gulp.start('копировать-шрифты', готово)
  }))
})
// Разработка:
// Задача при запуске `gulp` из терминала.
gulp.task('по умолчанию', ['смотреть'])
// Производство:
// Задача при запуске gulp build из терминала.
gulp.task('сборка', [
  'уменьшить-CSS',
  'копировать-шрифты',
  'копировать изображения',
  'компиляция-js',
  'уменьшить-html'
])
 

Gulp будет отслеживать любые изменения в коде LESS и ES6 и автоматически переводить их для вас. Поэтому вам просто нужно обновить браузер, чтобы увидеть изменения.

Использование рабочего процесса

Чтобы использовать этот рабочий процесс, перейдите в корневой каталог проекта и запустите его на своем терминале, затем установите пакеты Node:

 $ npm install
 

Во время разработки LESS и ES6:

 $ gulp watch
 

Когда вы будете готовы к распространению:

 $ gulp build
 

Вы можете использовать уменьшенный HTML index.