Использование Jade и Grunt для ускорения производства HTML

Всякий раз, когда мы говорим о создании веб-приложения, нам нужно говорить о языковых препроцессорах (преобразование исходного кода, написанного на определенном языке, в целевой код на родном языке). Часто вы обнаружите, что используете языки, которые изначально не поддерживаются веб-браузерами, потому что они помогают вам свернуть повторяющуюся работу, предоставляя функции, недоступные в простом HTML (например, Jade), CSS (например, Sass) и JavaScript (например, CoffeeScript).

Механизм шаблонов HTML — это препроцессор, который дает нам возможность создавать динамические и повторно используемые документы HTML, которые следуют ( DRY ) принципу разработки приложений.

Jade — это язык шаблонов HTML с открытым исходным кодом для Node.js (серверный JavaScript). Jade полностью бесплатен в использовании и предоставляет быстрый, простой и интересный HTML. На него сильно повлиял Haml , и он изначально был создан в Node как модуль. Обычно он включает функции, общие для большинства языков программирования высокого уровня, с упором на обработку простого текста.

При использовании современных CSS-фреймворков, таких как Bootstrap и Foundation, большая часть разработки полностью сводится к созданию HTML, который раскрывает всю мощь Jade. Как только вы начнете использовать его, он станет для вас незаменимым инструментом.

В этом уроке я собираюсь рассказать о том, как ускорить производство HTML и внедрить простые данные с помощью функций Jade в сочетании с Grunt .

Наш набор инструментов для этого урока будет включать:

• нефрит
• хрюкать
• NodeJS

Подготовка среды: установка

Вот шаги для установки Node.js, Jade и интерфейса командной строки Grunt (CLI). Если они у вас уже установлены, вы можете перейти к следующему разделу руководства.

1. Перейдите на nodejs.org и нажмите кнопку «Установить», чтобы загрузить последнюю версию узла. Запустите загруженный файл и следуйте инструкциям по установке.

2. npm (Node Package Manager) будет поставляться в комплекте с Node и может использоваться через терминал. Откройте свой терминал и выполните npm init в каталоге проекта. Затем следуйте инструкциям для создания package.json .

3. Чтобы установить Grunt, введите npm install --save-dev grunt
4. Установите Grunt CLI (интерфейс командной строки). npm install -g grunt-cli для выполнения задач прямо из командной строки.
5. Чтобы установить плагин Grunt для задач Jade, введите npm install --save-dev grunt-contrib-jade
6. Чтобы установить Jade, введите npm install --save-dev jade

ПРИМЕЧАНИЕ: есть три флага для установки пакетов npm:

1. --save означает, что эти пакеты требуются локально для проекта и перечислены в свойстве зависимостей.
2. --save-dev добавляет пакеты локально, но в качестве зависимостей разработки. Они перечислены под devDependencies в package.json .
3. -g указывает, что пакет должен быть установлен глобально; это позволяет вам выполнять grunt в вашем терминале независимо от текущего рабочего каталога.

Будет создан файл манифеста package.json , в котором указан список пакетов, от которых зависит проект, и он включает некоторые метаданные, такие как имя проекта, версия и описание.

После установки ваш манифест package.json будет выглядеть следующим образом:

 { "name": "jadeTutorial", "version": "1.0.0", "description": "Jade with Grunt tutorial", "main": "index.js", "author": , "license": "ISC", "devDependencies": { "grunt": "^0.4.5", "grunt-contrib-jade": "^0.14.1", "jade": "^1.9.2", } } 

Кроме того, будет создан каталог node_modules который будет включать в себя модули npm, установленные ранее как grunt и jade .

Что такое Грант?

Я познакомлю вас с Grunt, популярным исполнителем задач, мы будем использовать его для автоматизации и выполнения трудоемких задач командной строки в вашем рабочем процессе разработки. Задача — это действие, которое создает цель, например компиляцию Jade для генерации HTML. Используя Grunt, мы сможем запускать Jade, наблюдать за задачами и выполнять любые другие задачи только с одной командной строкой. Это нормально, если вы никогда не слышали о бегущем задании раньше; это не сложная концепция, чтобы обернуть голову вокруг.

 module.exports = function (grunt) { grunt.initConfig({}); grunt.registerTask('default', []); }; 

 module.exports = function(grunt) { // Project configuration. grunt.initConfig({ jade: { compile: { options: { pretty: true, }, files: { 'build/index.html': 'app/views/jobs.jade' } } } }); // These plugins provide necessary tasks. grunt.loadNpmTasks('grunt-contrib-jade'); // Default task. grunt.registerTask('build', 'Convert Jade templates into html templates', ['jade']); }; 

 npm install --save-dev grunt-contrib-watch 

 watch: { grunt: { files: ['Gruntfile.js'] }, jade: { files: 'app/views/**/*.jade', tasks: ['jade'] } } 

 grunt.registerTask('default','Convert Jade templates into html templates', ['jade','watch']); grunt.loadNpmTasks('grunt-contrib-watch'); 

 app └──views | └── layout.jade | └── jobs.jade | └── jobs-container.jade └──── partials | └─ head.jade └─ footer.jade 

 build └── index.html 

 doctype html html head title Jade Tutorial body p.className#idName Hello SitePoint | Readers! img(src="images/image.png") 

 <!DOCTYPE html> <html> <head> <title> Jade Tutorial </title> </head> <body> <p class="className" id="idName"> Hello SitePoint Readers! </p> <img src="images/image.png"> </body> </html> 

 doctype html html(lang="en" dir="ltr") block head include partials/head.jade body block content block footer include partials/footer.jade 

 head meta(name="viewport", content="width=device-width, initial-scale=1.0") meta(charset="UTF-8") title Jobs link(rel = "stylesheet" href = "style/foundation.min.css") link(rel = "stylesheet" href = "style/app.css") 

 div#footer.row div.small-12.large-12.columns p Copyright (c) foobar script(src="js/jquery.min.js") script(src="js/foundation.min.js") script(src="js/app.js") 

 extends layout.jade block content div#container.row div.small-12.large-12.columns include job-container.jade 

 // append head can be used without block 'append head' block append head script. alert('Welcome to SitePoint') 

 - each job in jobs div.sub-container.row div.title.small-12.large-12.columns p #{job.title} div.description.display.small-12.large-12.columns div.row div.block.small-12.large-12.columns p Skills and Requirements ul - each skill in job.skills li #{skill} div.block.small-12.large-12.columns p Preferred Skills ul - each pskill in job.pskills li #{pskill} button.apply.button(value="apply") Apply 

 - each job in jobs div.sub-container.row div.title.small-12.large-12.columns p #{job.title} div.description.display.small-12.large-12.columns div.row +skillsBlock("Skills and Requirements", job.skills) +skillsBlock("Preferred Skills", job.pskills) button.apply.button(value="apply") Apply mixin skillsBlock(title, loopItems) div.block.small-12.large-12.columns p= title ul - each skill in loopItems li #{skill} 

 jade: { compile: { options: { pretty: true, data: { jobs: grunt.file.readJSON('data.json') } }, files: { 'build/index.html': 'app/views/jobs.jade' } } }