<MyRusakov.ru />

Программирование на Python с Нуля до Гуру

Программирование на Python с Нуля до Гуру

Данный курс научит Вас программировать на языке Python, который крайне желательно знать любому, кто хоть иногда имеет дело с компьютерами. Курс состоит из 6 разделов, в которых Вы с нуля освоите этот язык и сможете создавать самые разные программы для самых разных задач любой сложности.

К курсу прилагается множество упражнений и все исходники из уроков.

Наконец, Вы получите ещё несколько бонусов: "Создание калькулятора на Python", "Создание игры на Python" и "Правильная работа со справочником".

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Gulp файл и сборка CSS

Gulp файл и сборка CSS

Что такое Gulp, и зачем он нужен? При верстке сайтов, возникает много рутинных задач:

  • компиляция SASS/LESS файлов
  • работа с шаблонизаторами
  • проставление префиксов
  • оптимизация изображений
  • сжатие и склейка файлов

Представьте, что вы сверстали сайт и на этом работа ещё далеко не закончилась. Дальше вы открываете массу сервисов, генераторов, компиляторов и вручную начинаете дорабатывать ваш сайт. Трата драгоценного времени, на повторяющиеся действия из проекта в проект - непозволительная роскошь.

Наверняка вас посещала такая мысль: "Как бы это все это автоматизировать". А все уже давно придумано за нас, только бери и пользуйся. В народе называют его сборщиком проектов – Gulp, а по сути – это исполнитель задач (task-runner).

Кстати, как у вас обстоит дело с JavaScript? При работе с Gulp файлом, вам придется с ним подружиться, но ненадолго. Как правило, файл с Gulp тасками (task), создается один раз и копируется из проекта в проект.

На этом уроке мы рассмотрим, как создать gulp task для сборки CSS файла. На компьютере должен быть установлены node.js.

Задача: Пишем стили в SASS, а на выходе получаем простой и минифицированный CSS файл с проставленными префиксами.

Gulp проект

Создаем папку my-gulp с файлом package.json. Пишем информацию о проекте.

{
    "name": "my-gulp",
    "version": "1.0.0",
    "description": "gulp4",
    "author": "дядя Вася",
}

Устанавливаем Gulp, через командную строку:

npm i -–save-dev gulp

В папке с проектом появилась папка node_modules, на неё не обращайте никакого внимания.

Создадим в проекте:

  • gulpfile.js
  • две папки src, dist
  • style.scss

Gulp плагины

Установим плагины, поочередно вводя в командную строку:

// компилирует SASS в CSS
npm i gulp-sass --save-dev

// проставляет префиксы
npm i gulp-autoprefixer --save-dev

// делает красивый CSS код
npm i gulp-cssbeautify --save-dev

// сжимает CSS файл
npm i gulp-cssnano --save-dev

// удаляет комментарии
npm i gulp-strip-css-comments --save-dev

// добавляет суффикс min к сжатой версии
npm i gulp-rename --save-dev

Дословно: Инсталлировать gulp модули из пакетного менеджера и сохранить зависимости в package.json.

Пример Gulp файла для сборки CSS


// подключаем gulp
const gulp = require ("gulp");

// создадим две переменные, отвечающие за чтение исходных файлов (src) и запись сгенерированных файлов (dest).
const {src, dest} = require ("gulp");

// передаем модули в переменные
const autoprefixer = require ("gulp-autoprefixer");
const cssbeautify = require ("gulp-cssbeautify");
const removeComments = require ("gulp-strip-css-comments");
const rename = require ("gulp-rename");
const sass = require ("gulp-sass");
const cssnano = require ("gulp-cssnano");

Мы пишем SASS код в файле style.scss, Gulp выполняет таски и складывает готовые style.css + style.min.css, в папку dist. Однако сам Gulp не знает, откуда брать и куда перемещать, надо указать пути.

Создадим объект path с двумя вложенными объектами. Готовый CSS код, будет перемещаться из папки src в папку dist.

var path = {
    build: {
        css: "dist/"
},
    src: {
        css: "src/style.scss",
}

Создаем Gulp task для CSS

В таске важно придерживаться логической последовательности. Получаем путь ко всем исходным SASS файлам. Метод pipe будет вызывать ранее установленные плагины, можно передавать параметры.

Компилируем SASS файлы в CSS

Расставляем префиксы в каскадном виде с учетом 8-ми последних версий браузеров.

function css (){
    return src(path.src.css, {base: "src/"})
        .pipe(sass())
        .pipe(autoprefixer({
            Browserslist: ['last 8 versions'],
            cascade: true
    }))

Преобразует код к аккуратному виду. Перемещает готовый CSS код туда, куда мы указывали в путях. Удаляет пробелы, комментарии, создает два CSS файла, один из которых минифицированный. Делает экспорт.

.pipe(cssbeautify())
.pipe(dest(path.build.css))
.pipe(cssnano({
    zindex: false,
    discardComments: {
        removeAll: true
    }
}))
.pipe(removeComments())
.pipe(rename({
    suffix: ".min",
    extname: ".css"
}))
.pipe(dest(path.build.css))
}
exports.css = css;

Помимо таска для сборки CSS, в gulpfile.js пишутся таски для html, js и изображений.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.