Установите node.js
Во -первых, вам нужно установить node.js. Вообще говоря, вам нужно только загрузить установку пакета и установить его на официальном сайте node.js. Но я позорил, и появилась следующая ошибка:
Итак, я переоделся в Brew Dafa:
Brew Install Nodejs
Установить глоток
Gulp устанавливается с использованием команды NPM node.js:
Установка NPM -Глобальный глоток
Затем установите его в каталог проекта:
Установка NPM-Save-Dev Gulp
Я довольно озадачен этим шагом. С моим многолетним опытом работы в качестве кодера, даже если глобальная установка установлена, она должна быть доступна, где ее использовать. Но Gulp, очевидно, не такой. Если вы не выполните этот шаг в каталоге проекта, при использовании команды Gulp будет вызвана следующая ошибка:
… Местный глоток не найден в…
… Попробуйте запустить: npm установить глоток
Наконец, выполните команду Gulp в каталоге проекта. Если вывод следующего контента, это означает, что установка завершена:
... не найдено.
Простой пример
Следующее показывает использование Gulp для создания статического сервера разработки веб -сайтов и поддерживает функцию Live Refresh (Livereload).
Во-первых, вам нужно установить плагин браузера для Livereload. Адрес плагина: http://livereload.com/extensions/, который поддерживает три основных браузера: Chrome, Firefox и Safari. После установки плагина в браузере появится кнопка. Эта кнопка имеет два состояния. Сплошные точки указывают на то, что плагин включен, а полой точки указывают на то, что плагин не включен. Не забудьте запомнить!
Затем создайте простую структуру проекта:
./gulpfile.js./public/./public/index.html
Используйте следующую команду для установки Gulp и сопутствующих компонентов:
Установка NPM-с Gulp-подключением Save-Dev Gulp
Gulp-Connect-это плагин Gulp, который обеспечивает статические функции веб-сервера и интегрирует функции Livereload.
Далее, вам нужно отредактировать файл Gulpfile.js, содержимое следующее:
var gulp = require ('gulp'), connect = require ('gulp-connect') gulp.task ('server', function () {connect.server ({root: 'public', livereload: true})}) gulp.task ('html', function () {gulp.src ('./ public/*. html'). Gulp.task ('watch', function () {gulp.watch (['./ public/*. html'], ['html'])}) gulp.task ('default', ['watch', 'server'])Наконец -то запустите этот веб -сервер:
глоток
Откройте браузер и посетите http: // localhost: 4000. Затем попробуйте изменить содержимое файла index.html и сохранить его. При нормальных обстоятельствах сторона браузера должна автоматически обновлять и отображать модифицированный контент.
Простое сравнение между Gulp и Grunt
Давайте посмотрим на пример, построить SASS в Gulp и Grunt соответственно:
Грейн:
sass: {dist: {options: {style: 'exted'}, файлы: {'dist/assets/css/main.css': 'src/styles/main.scss',}}}, autoprefixer: {dist: {options: {browsers: ['Последние 2 версии', Safari 5 ', IE 8', ',', ',', ',', ',', ',', ',', ',', ',', ', IE 8', ', IE 8', IE 8 ', IE 8 12.1 ',' ios 6 ',' Android 4 ']}, Src:' dist/assets/css/main.css ', dest:' dist/assets/css/main.css '}}, grunt.gerastertask (' styles ', [' sass ',' autoprefixer ']);Grunt должен настроить плагины отдельно и указать свой путь источника и назначения. Например, мы берем архив в качестве входного ввода для подключаемого SASS и сохраняем результаты выходных данных. При настройке AutoPrefixer вам необходимо использовать выход SASS в качестве входных данных для генерации нового файла. Давайте посмотрим на ту же конфигурацию в Gulp:
Глоток:
Gulp.task ('sass', function () {return gulp.src ('src/styles/main.scss') .pipe (sass ({style: 'compressed'})) .pipe (AutoPrefixer ('Last 2 версии', 'Safari 5', IE 8 ',' IE 9 ', Opera 12.1', IOR ', IER') ', IER') .pipe (Gulp.dest ('dist/Assets/css'))});В Gulp нам нужно только ввести файл. После обработки подключаемой SASS она затем передается в AutoPrefixer Plugin, и, наконец, получается файл. Этот процесс ускоряет процесс строительства, устраняя чтение и написание ненужных файлов, и требуется только окончательный файл.