Предупреждение: това е криволичеща скринкаст от средно ниво, в която разглеждаме кода, който задвижва процеса на изграждане на даден сайт. Ние не пишем никакъв код.
„Процес на изграждане“ е всичко, което се случва между кода, който пишете, и кода, който излиза на уебсайт на живо. И преди сме говорили за използването на Grunt за това. Sass се обработва, активите се комбинират, случват се минификация и оптимизация и т.н. Има безброй неща, които процесът на изграждане може да направи за вас.
Работих с Кейти Ковалчин по създаването на нов личен сайт за нея. Това е експеримент и за двама ни в изучаването на нови процеси и изпробването на нови неща. В този случай използвам Jekyll за първи път и за първи път автоматизирам SVG система.
По време на скринкаста съм точно в средата на всичко, но системата за изграждане работи безпроблемно, така че прецених, че е подходящ момент да споделя това. Винаги мисля, че е подходящ момент да споделите - точно в момента, в който нещо щракне за вас.
Нещата се случват:
- Grunt изпълнява всички задачи.
- Сайтът се изгражда с Jekyll. Това означава, че обработва оформленията и съдържанието в пълни уеб страници. Когато съдържанието или оформлението се променят, Grunt изпълнява компилацията Jekyll.
- Jekyll също управлява локалния сървър.
- Sass е CSS препроцесор. Когато файлът на Sass се промени, Grunt изпълнява усложнението на Sass. След това Grunt стартира Autoprefixer върху резултата. След това Grunt отново стартира компилацията Jekyll, за да се увери, че всички нови неща са използваеми от обработения сайт.
- Сайтът използва SVG система. За икони, но също така и за логото, и кой-знае-какво-всичко останало до края му. SVG файловете се съхраняват отделно в папка “svg”. Когато някой от тях се промени, Grunt изпълнява задачата svgstore, за да ги обработи всички заедно. След това Grunt стартира компилацията Jekyll, така че всички текущи SVG да са достъпни за сайта.
- Тъй като това репо за GitHub и GitHub Pages поддържат Jekyll, ние можем автоматично да получим хоствана версия на този сайт. Можем да насочим и друг домейн към този сайт.