Бисмиллах…
Мы продолжим обучение игре с Gulp. Те из вас, кто только что следит, могут прочитать часть 1 и часть 2 руководства.
Игра с Gulp [Часть 1] - Что такое Gulp?
Игра с Gulp [Часть 2] - Что умеет Gulp?
Играем с Gulp
В руководстве по разделу последняя часть - это 3-й раздел, который мы изучим из примера в качестве Front-End разработчика. Мы конвертируем PSD в HTML с помощью SASS. Для компиляции из SASS в CSS мы используем Gulp, как в предыдущем уроке.
Создайте папку проекта с новыми и выполняйте команды с помощью терминала
mkdir login-template-html npm init
Создайте файл .gitignore с содержимым
.DS_Store node_modules build
Затем создайте файл gulpfile.js с пустым содержимым. Позже наполним. Затем сделайте папки и файлы более или менее похожими на следующую структуру папок
Для содержания assets / img можно использовать из файла PSD. Вы можете скачать PSD файл здесь http://bit.ly/mengenal-gulp-sample-project
или, если вы хотите напрямую использовать ресурсы, можете загрузить это изображение, которое мы будем использовать позже
Загрузите логотип ресурсов, сохраните с именем файла logo.png в папке assets / img.
Затем мы заполняем файл index.html базовым кодом структуры HTML. Мы также вызываем файл css в build / css / main.min.css, где файл и папка все еще отсутствуют. Мы создадим файлы и папки с помощью автоматизации gulp с помощью команды minify + sourcemaps + compile sass to css
<! DOCTYPE html> <html> <head> <meta charset = “utf-8”> <title> Login HTML Template </ title> <link rel = “stylesheet” href = “build / css / main.css”> </ head> <body> </ body> </ html>
Теперь приступаем к установке плагина gulp.
npm install gulp-sass gulp-sourcemaps gulp-minify-css — save-dev
После добавления к установке заполняем файл gulpfile.js, создавая какой-нибудь таск-раннер, который нам нужен
var gulp = require (‘gulp’);
var sass = require (‘gulp-sass’);
var sourcemaps = require (‘gulp-sourcemaps’);
var minifyCSS = require (‘gulp-minify-css’);
gulp.task (‘sass’, function () {// task runner compile sass to css
gulp.src (‘assets / sass / main.sass’)
.pipe (sass ())
.pipe (gulp.dest (‘assets / css’)); // compiled results are stored here
});
gulp.task (‘min-css’, function () {// compress and minify css file
return gulp.src (‘assets / css / main.css’)
.pipe (sourcemaps.init ())
.pipe (minifyCSS ())
.pipe (sourcemaps.write (‘source-maps’))
.pipe (gulp.dest (‘build / css’)); // files that have been successfully compressed and minify stored here
});
gulp.task (‘automate’, function () {// task runner watching file
gulp.watch (‘assets / sass / *. sass’, [‘sass’]);
gulp.watch (‘assets / css / *. css’, [‘min-css’]);
});
Чтобы запустить автоматизацию запуска задач, мы запускаем следующую команду на терминале
gulp automate
Итак, если есть изменение в файле assets / sass / main.sass, сообщение будет работать следующим образом
[14:49:53] Using gulpfile ~ / Sites / login-template-html / gulpfile.js [14:49:53] Starting ‘automate’ … [14:49:53] Finished ‘automate’ after 13 ms [14:49:59] Starting ‘sass’ … [14:49:59] Finished ‘sass’ after 11 ms [14:49:59] Starting ‘min-css’ … [14:49:59] Finished ‘min-css’ after 78 ms
И он будет повторяться, если будет изменение в файле. Результаты работы Task Runner можно увидеть
Автоматически сгенерирует папку сборки и содержимое сжатия + минимизации CSS.
Разработка среды завершена. Мы уже можем кодировать с использованием SASS + minify + sourcemaps безупречно. Альхамдулиллах.
Мы продолжаем конвертировать PSD в HTML в соответствии с указанным выше файлом дизайна.
Мы кодируем в теге body файла index.html
<div class = “LoginBox”> <div class = “LoginBox-content”> <div class = “LoginBox-content-bg”> </ div> <form action = “#” method = “post”> <h2> <strong> Login </ strong> or <strong> Register </ strong> </ h2> <div class = “TextBox”> <input type = “text” name = “username” placeholder = “Username”> </ div> <div class = “TextBox”> <input type = “password” name = “password” placeholder = “Password” autocomplete = “off”> </ div> <button type = “submit” name = “submit” class = “ButtonBox”> Sign Up </ button> </ form> </ div> <div class = “LoginBox-footer”> <img src = “assets / img / logo.png” alt = “Logo”> </ div> </ div>
У нас есть 3 уникальных класса компонентов, то есть
- .LoginBox
- .Текстовое окно
- .ButtonBox
Каждый другой компонент мы сделаем автономным, чтобы стать компонентным, чтобы его можно было вызывать где угодно, без необходимости следовать правилам его тега контейнера.
Далее в файле assets / sass / main.sass заполняем кодировкой
@import url (‘https://fonts.googleapis.com/css?family=Roboto:300,400') @mixin border-radius ($ round) border-radius: $ round -webkit-border-radius: $ round -moz-border-radius: $ round -o-border-radius: $ round @mixin transform ($ x, $ y) -webkit-transform: translate ($ x, $ y) -moz-transform: translate ($ x, $ y) -ms-transform: translate ($ x, $ y) -o-transform: translate ($ x, $ y) transform: translate ($ x, $ y)
В приведенном выше коде мы импортируем шрифт Google Roboto, который будет типом шрифта, который мы используем. Затем ниже есть @mixin об использовании SASS. @mixin полезен как функция, где имя из @mixin может быть вызвано всякий раз, когда нам это нужно. Также с параметрами по мере необходимости. Предположим, что существует преобразование @mixin ($ x, $ y), где мы объявили 2 параметра, которые мы должны заполнить при вызове преобразования @mixin.
Способ вызова уникален, мы используем команду @include mixin_name. Поэтому, если вы хотите вызвать преобразование @mixin, мы используем преобразование @include (50%, 50%) должно сопровождаться параметрами, если при создании @mixin используется параметр.
Продолжаем кодирование из SASS, вызываем шрифт Roboto и меняем фон в соответствии с дизайном PSD в теге body
body background: # b0b0b0 font-family: ‘Roboto’, sans-serif The following coding to create components. LoginsBox .LoginBox position: absolute top: 50% left: 50% @include transform (-50%, -50%) & -content background: #fff box-sizing: border-box -webkit-box-shadow: 3px 3px 4px 0px rgba (0,0,0,0,09) -moz-box-shadow: 3px 3px 4px 0px rgba (0,0,0,0,09) box-shadow: 3px 3px 4px 0px rgba (0,0,0,0,09) padding: 50px 35px 80px position: relative width: 400px & -bg background: #fff -webkit-box-shadow: 3px 3px 4px 0px rgba (0,0,0,0,09) -moz-box-shadow: 3px 3px 4px 0px rgba (0,0,0,0,09) box-shadow: 3px 3px 4px 0px rgba (0,0,0,0,09) position: absolute bottom: -21px left: 50% @include transform (-50%, -50%) width: 95% height: 30px z-index: -1 h2 margin: 0 0 30px padding: 0 text-transform: uppercase font-weight: 300 & -footer max-width: 192px margin: 30px auto 0
Кодировка SASS для компонента .TextBox
.TextBox width: 100% input background: #dfdfdf border: 0 box-sizing: border-box @include border-radius (5px) display: block font-weight: 300 margin-bottom: 15px padding: 15px 20px font-size: 14px width: 100% &: focus, &: hover outline: 0
Кодирование SASS для компонента .ButtonBox
.ButtonBox background: # f24c3b border: 0 @include border-radius (5px) color: #fff cursor: pointer font-size: 16px padding: 20px width: 100% &: focus, &: hover outline: 0
Помните, что каждый из этих компонентов в примере этого проекта мы объединяем в файл assets / sass / main.sass. Но в случае довольно сложного реального проекта я рекомендую выделить каждый компонент в отдельный файл, который затем будет вызываться с помощью @import в одном файле SASS.
Пока мы вносим изменения в указанный выше файл SASS. Автоматически компилируется в файл CSS в папке assets / css / main.css, тогда файл будет minify + sourcemaps в build / css / main.css папка. Внешний вид содержимого файла выглядит следующим образом
Последний шаг, мы можем проверить наши результаты обучения через браузер.
Заключительные слова в этом руководстве, увидеть и изучить более подробный исходный код можно через GitHub Repository
Если какие-либо исправления или комментарии могут быть отправлены через поле для комментариев.
