18: Алат за изградњу - Грунт свгсторе - ЦСС-трикови

Anonim

Дефинитивно можемо постати мало нервознији са нашим алатима за изградњу. У време када је ово објављено, подређено дете алата за изградњу је Грунт. Постоје конкуренти, али Грунт је већ дуже време најпопуларнији. Ако сте потпуно нови за Грунт, о њему сам написао разне ствари и написао их:

  • Грунт за људе који мисле да су ствари попут Грунт-а чудне и тешке
  • # 130: Први тренуци са Грунтом
  • # 134: Обилазак локације која је у току изграђена са Јекилл-ом, Грунт-ом, Сасс-ом, СВГ системом и још много тога

Чак и ако никада нисте користили Грунт, у овом сцреенцаст-у полазимо од почетка и све то покрећемо. Идеја је да радимо из суштинске „фасцикле пуне СВГ-ова“. Свака датотека.свг представља неку графику коју желимо да користимо на веб локацији. Све то желимо да угурамо у СВГ дефс блок који је спреман за употребу. Створени симболи, информације о приступачности додане најбоље од наших аутоматизованих могућности итд.

Једном када покренемо Грунт и инсталирамо алатку за изградњу на коју смо овде фокусирани, грунт-свгсторе, спремни смо за почетак.

У нашем малом демонстрационом програму Грунт смо конфигурисали да преко Грунтфиле.јс прегледа нашу фасциклу пуну СВГ-ова и креира дефс.свг датотеку коју стављамо у директоријум Инцлудес.

module.exports = function(grunt) ( grunt.initConfig(( svgstore: ( options: ( formatting : ( indent_size : 2 ) ), default: ( files: ( 'includes/defs.svg': ('svg/*.svg'), ), ), ), )); grunt.loadNpmTasks('grunt-svgstore'); );

Подизање нивоа одавде подразумевало би употребу додатка за гледање да бисте гледали тај директоријум СВГ-ова и аутоматски покренули овај задатак када се било која датотека промени (или се дода или избрише). Ако користите градитељ веб локација као што је Јекилл, можда ћете и jekyll buildкасније покренути поступак како бисте били сигурни да је нова датотека доступна на изграђеној локацији.

Фајлови

  • 18-пројецт-екампле.зип