Что не так с Gulp?
Я только знакомлюсь с Gulp. Мне интересно разобраться в причине. Пользуюсь редактором кода VS Code, решила установить Gulp. Скачала Node JS и установила нужные пакеты в терминале редактора кода. Эврика! css компилируется в scss. Пока открыт редактор, сайт всё отображает корректно. Когда я закрываю редактор, то вся вёрстка ломается. Подскажите, пожалуйста, что не так?
const gulp = require('gulp'); const sass = require('gulp-sass'); const sourcemaps = require('gulp-sourcemaps'); const watch = require('gulp-watch'); gulp.task('sass-compile', function() < return gulp.src('./scss/**/*.scss') .pipe(sourcemaps.init()) .pipe(sass().on('error', sass.logError)) .pipe(sourcemaps.write('./')) .pipe(gulp.dest('./css/')) >) gulp.task('watch', function() < gulp.watch('app/scss/**/*.scss', gulp.series('sass-compile')); >); < "name": "project-3", "version": "1.0.0", "description": "", "main": "index.js", "dependencies": < "gulp-cli": "^2.1.0" >, "devDependencies": < "gulp": "^4.0.0", "gulp-sass": "^4.0.2", "gulp-sourcemaps": "^2.6.5", "gulp-watch": "^5.0.1" >, "scripts": < "test": "echo \"Error: no test specified\" && exit 1" >, "author": "", "license": "ISC" > Отслеживать
13.7k 12 12 золотых знаков 43 43 серебряных знака 75 75 бронзовых знаков
задан 2 апр 2019 в 7:08
Victoria Pisareva Victoria Pisareva
57 7 7 бронзовых знаков
У вас ничего не запускается в IDE (редактор) пока вы работаете с проектом?
2 апр 2019 в 7:13
VS Code мой текущий редактор. Не работает сайт в браузере, когда я выхожу из редактора
2 апр 2019 в 7:14
вопрос решили этот ?
30 июн 2019 в 11:57
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Вы запускаете из среды разработки (VS Code) и Gulp и локальный сервер с сайтом (команда go live server ), поэтому при закрытии IDE у вас перестает работать сайт. Чтобы сайт в браузере продолжал работать после того, как вы закрыли IDE — необходимо запускать Gulp не в IDE и добавить запуск дев-сервера из gulpfile .
Чтобы в браузере открылась веб-страница, нужен локальный сервер. Достаточно доставить пакет gulp-webserver (команда npm install —save-dev gulp-webserver ) и немного модернизировать gulpfile :
const gulp = require('gulp'); const sass = require('gulp-sass'); const sourcemaps = require('gulp-sourcemaps'); const watch = require('gulp-watch'); const webserver = require('gulp-webserver'); gulp.task('webserver', function() < gulp.src('app') .pipe(webserver(< livereload: true, directoryListing: true, open: true >)); >); gulp.task('sass-compile', function() < return gulp.src('./scss/**/*.scss') .pipe(sourcemaps.init()) .pipe(sass().on('error', sass.logError)) .pipe(sourcemaps.write('./')) .pipe(gulp.dest('./css/')) >) gulp.task('watch', function() < gulp.watch('app/scss/**/*.scss', gulp.series('sass-compile')); >); gulp.task('default', gulp.parallel('webserver', 'watch')); После этого зайти через консоль (я использую Git Bash, но можно и через CMD) в каталог, содержащий gulpfile и package.json , и оттуда выполнить команду запуска Gulp через команду gulp . На экране должно появиться что-то вроде следующей картины (запуск через gulp — запускает задачу по-умолчанию, она же default ):
Так как у вас уже висит вотчер на определенных типах файлов, то при изменении и сохранении файлов в любом редакторе, изменения должны отобразиться в консоли при сборке, а также и в запущенном сайте. Также, при закрытии IDE, не будет останавливаться сайт, только при закрытии консоли и остановке запущенного в ней процесса будет останавливаться сайт.
Настройки Gulp-тасков в Visual Studio Code
Вообще, эти инструменты настолько хороши, что грядущий релиз ASP.NET отказался от своей фирменной комплектации и диспетчеров задач в пользу широко используемых обществом инструментов. А теперь они являются главными элементами в Visual Studio и Visual Studio Code. Сегодня я покажу вам как использовать Gulp в Visual Studio Code, чтобы запустить следующие наиболее часто используемые задачи:
- Компиляция TypeScript в JavaScript
- Компиляция SCSS-файла в чистый CSS
- БОНУС — Добавление пары заданий для автоматического создания JS и CSS при изменения кода
Хотя Gulp является автономным инструментом, VS Code имеет отличную внешнюю поддержку для него. Это означает, что до тех пор, пока у вас есть gulpfile.js в корневом каталоге вашего проекта, VS-код будет использовать его для создания задач, доступных в IDE. Давайте начнем:
Создание проекта
Я предполагаю, что вы уже установили TypeScript и VSCode. Если нет, посмотрите здесь. Для создания проекта выберите нужное местоположение и создайте новый каталог по имени VSGulpTest .
Инсталляция npm и Gulp
Начнем с начала. Npm — менеджер пакетов Node (отсюда и название) и для того, чтобы получить его вам нужно установить Node.js. Это можно сделать двумя способами:
- с помощью chocalateyNuget choco install nodejs
- с помощью исполняемого файла, скаченного с официального сайта
Теперь нам ничто не мешает установить Gulp. Наберите в командной строке Node.js следующее: npm install —global gulp и нажмите клавишу Enter для выполнения. Эта команда устанавливает Gulp глобально. Я cтараюсь избежать глобальных установок, но, установленный локально, Gulp не будет работать в Visual Studio Code. Все остальные пакеты будут установлены локально.
Далее, нам необходимо инициализировать npm на текущем проекте. Для этого откройте командную строку Node.js, перейдите в корневой каталог вашего проекта и выполните следующую команду: npm init
В результате в корневом каталоге вашего проекта будет создан файл package.json. Этот файл используется Node.js для отслеживания установленных пакетов. Командная строка проведет вас через последовательность вопросов (Wizard CLI) для того, чтобы сгенерировать параметры конфигурации. Ни один из этих параметров не является особенно важным, вы можете оставить все из них пустыми, или скопировать мои настройки. На последнем шаге просто наберите yes для создания файла.
Установка необходимых пакетов
Gulp – это простой диспетчер задач, поэтому сам по себе он особо пользы не несет. Нам нужны плагины, чтобы помочь нам выполнить доставленные задачи, а именно: typescript, merge и sass. Чтобы установить плагины, вернитесь к командной строке Node.js, перейдите в корневой каталог вашего проекта, а затем выполните следующие команды, по одной за раз:
npm install gulp-sass --save-dev npm install gulp-typescript npm install merge2 Эти команды будут устанавливать необходимые плагины и ряд зависимостей. Эти плагины будут вызываться из Gulp для выполнения наших задач.
Добавляем код
Прямо сейчас наш проект пуст. Давайте добавим пару TypeScript файлов, файл Sass и HTML-файл, чтобы сделать набросок сайта. Создайте файлы animal.ts и human.ts и вставьте соответствующий код.
//animal.ts class Animal < name:string; constructor(theName: string) < this.name = theName; >move(meters: number = 0) < alert(this.name + " пробежал " + meters + "м."); >> //var testAnimal = new Animal(1234);//human.ts class Human < name: string; constructor (yourHumanName:string )< this.name = yourHumanName; >callHuman = function() < console.log('Привет, ' + this.name); >>Создайте файл main.scss для CSS кода и файл index.html для главной страницы сайта. И снова используйте код ниже, или добавьте свой собственный код в соответствующие файлы.
//main.scss $font-stack: Helvetica, sans-serif; $primary-color: #333; $header-color: green; body < font: 100% $font-stack; color: $primary-color; h1< font-family: $font-stack; color: $header-color; >> Привет, мир!
Привет, помните меня? Добавляем Gulp-таски
Пришло время соединить все вместе и получить рабочий сайт. В корневом каталоге вашего проекта создайте файл gulpfile.js и добавьте следующий код:
var gulp = require('gulp'); var ts = require('gulp-typescript'); var merge = require('merge2'); var sass = require('gulp-sass'); gulp.task('scripts', function() < var tsResult = gulp.src('*.ts') .pipe(ts(< declarationFiles: true, noExternalResolve: true, noImplicitAny: true, out: 'main.js' >)); return merge([ tsResult.dts.pipe(gulp.dest('release/definitions')), tsResult.js.pipe(gulp.dest('release/js')) ]); >); gulp.task('sass', function () < gulp.src('*.scss') .pipe(sass.sync().on('error', sass.logError)) .pipe(gulp.dest('./css')); >); gulp.task('watch', function () < gulp.watch('*.scss', ['sass']); gulp.watch('*.ts', ['scripts']); >);Я постараюсь кратко объяснить, что происходит в этом файле. В верхней части файла мы импортируем все плагины, после чего создаем 3 задачи:
scripts компилит *.ts файлы в *.js, объединяет весь код в один файл, генерирует файлы (.d.ts) и сохраняет созданные файлы в указанном месте ( release ) sass компилит *.scss файлы в *.css и помещает созданный файл в указанном месте ( css ) watch мониторит изменение файлов *.scss и *.ts на наличие каких-либо изменений и автоматически выполняет соответствующую задачу
Теперь мы почти готовы к запуску. Находясь в Visual Studio Code, нажмите клавиши Ctrl+Shift+B для определения нового диспетчера задач.
Нажмите на Настроить средство выполнения задач. Это выведет файл tasks.json. Удалите все, что в нем есть и добавьте следующий код:
Этот код дает указание Visual Studio Code использовать Gulp в качестве главного диспетчера задач, а внутри мы объявляем 3 задачи, которые мы хотим сделать доступными для IDE. Они должны соответствовать задачам, определенным в файле gulpfile.js . Вы всегда можете пропустить не нужные вам задачи, но любая новая задача должна быть определена в gulpfile.js первой.
Если вы нажмете клавиши Ctrl+Shift+P и выберите Run Task (запуск задачи), перед вами будет раскрывающийся список задач, которые мы перечислили в файле tasks.json. Выберите таск watch и запустите его. Вы заметите, что Окно Вывода (Output Window) находится в фокусе, а в нижнем левом углу есть бегунок, дающий понять, что задача в данный момент активна.
Каждый раз, когда вы делаете изменения в *.scss, или *.ts файлах и сохраняете результат, будет вызываться соответствующая задача для выполнения. После этого вам нужно будет обновить страницу в браузере, чтобы увидеть как изменилась ваша страница.
Чтобы остановить задачу нажмите клавиши Ctrl+Shift+P и выберите Terminate running task (Завершить запущенную задачу). К счастью, IntelliSense запускается практически в самом начале, поэтому вручную много печатать вам не придется.
Также, вы можете установить пакет npm-livereload вместе с соответствующим плагином для браузера, который позволит вам автоматически обновлять тестируемую страницу каждый раз, когда есть изменения в отслеживаемых файлах.
Руководство. Node.js для начинающих
Если вы новичок в использовании Node.js, это руководство поможет вам начать с некоторых основ.
- Использование Node.js в Visual Studio Code
- Создание первого веб-приложения Node.js с помощью Express
- Попробуйте использовать модуль Node.js
Необходимые компоненты
- Установка Node.js в Windows или в подсистеме Windows для Linux.
Если вы впервые пробуете Node.js, рекомендуем выполнить установку непосредственно в Windows. Дополнительные сведения см. в статье Выбор между установкой Node.js в Windows и подсистеме Windows для Linux.
Использование Node.js в Visual Studio Code
Если вы еще не установили Visual Studio Code, вернитесь к предыдущему разделу предварительных требований и выполните действия по установке, связанные с Windows или WSL.
- Откройте командную строку и создайте новый каталог с помощью команды mkdir HelloNode , а затем введите каталог: cd HelloNode .
- Создайте файл JavaScript с именем «app.js» и переменной с именем «msg» в: echo var msg > app.js
- Откройте каталог и файл app.js в VS Code с помощью команды code . .
- Добавьте простую строковую переменную («Hello World»), а затем отправьте содержимое строки в консоль, введя его в файле «app.js»:
var msg = 'Hello World'; console.log(msg); Обратите внимание, что при вводе console в файл «app.js», VS Code отображает поддерживаемые параметры, связанные с объектом console , который можно выбрать из использования IntelliSense. Попробуйте поэкспериментировать с Intellisense, используя другие объекты JavaScript.
Создание первого веб-приложения Node.js с помощью Express
Express — это минимальная, гибкая и оптимизированная платформа Node.js, которая упрощает разработку веб-приложения, которое может обслуживать несколько типов запросов, таких как GET, PUT, POST и DELETE. Express поставляется с генератором приложений, который автоматически создает архитектуру файлов для приложения.
Чтобы создать проект с помощью Express.js, выполните следующие действия.
- Откройте командную строку (командная строка, Powershell или любой другой вариант).
- Создайте новую папку проекта: mkdir ExpressProjects и введите этот каталог: cd ExpressProjects
- Используйте Express для создания шаблона проекта HelloWorld: npx express-generator HelloWorld —view=pug
Примечание. Мы используем команду npx , чтобы выполнить пакет Node Express.js без фактической установки (или временно установить его в зависимости от того, как вы хотите его представить). Если вы попытаетесь использовать команду express или проверить установленную версию Express с помощью: express —version , вы получите ответ, о том, что Express не удается найти. Если вы хотите глобально установить Express, чтобы применять его на постоянной основе, используйте: npm install -g express-generator . Список пакетов, установленных npm, можно просмотреть с помощью npm list . Они будут перечислены по глубине (количество вложенных каталогов в глубину). Установленные пакеты будут иметь глубину 0. Зависимости пакета будут иметь глубину 1, дополнительные зависимости на уровне глубины — 2 и т. д. Дополнительные сведения см. в статье Различие между npx and npm на сайте StackOverflow.
- bin . Содержит исполняемый файл, который запускает приложение. Он запускает сервер (через порт 3000, если не указана альтернатива) и настраивает базовую обработку ошибок.
- public . Содержит все общедоступные файлы, включая файлы JavaScript, таблицы стилей CSS, файлы шрифтов, изображения и другие ресурсы, необходимые пользователям при подключении к веб-сайту.
- routes . Содержит все обработчики маршрутов для приложения. В этой папке автоматически создаются два файла, index.js и users.js , которые служат примерами разделения конфигурации маршрута приложения.
- views . Содержит файлы, используемые модулем шаблонов. Express настроен на поиск подходящего представления при вызове метода преобразования. Обработчик шаблонов по умолчанию — Jade, но Jade является устаревшим в сравнении с Pug, поэтому для изменения подсистемы просмотра (шаблона) мы использовали флаг —view . Параметры флага —view и другие можно увидеть, используя express —help .
- app.js . Начальная точка приложения. Она загружает все и начинает обслуживать запросы пользователей. По сути, это связующий элемент, который содержит все части вместе.
- package.json . Содержит описание проекта, диспетчер скриптов и манифест приложения. Его основное назначение заключается в отслеживании зависимостей приложения и их соответствующих версий.
npm install npx cross-env DEBUG=HelloWorld:* npm start Совет Часть DEBUG=myapp:* приведенной выше команды означает, что вы указываете Node.js включить ведение журнала в целях отладки. Не забудьте заменить «myapp» именем своего приложения. Имя приложения можно найти в файле package.json в свойстве «name». Использование npx cross-env устанавливает переменную среды DEBUG в любом терминале, но ее также можно задать с помощью конкретного терминала. Команда npm start сообщает npm о необходимости запуска скриптов в файле package.json .
Использование модуля Node.js
В Node.js есть инструменты для разработки серверных веб-приложений, некоторые из них встроены и многие другие доступны через npm. Эти модули могут помочь во множестве задач:
| Средство | Используется для |
|---|---|
| gm, sharp | Обработка изображений, включая редактирование, изменение размера, сжатие и т. д., непосредственно в коде JavaScript |
| PDFKit | Поколение PDF |
| validator.js | Проверка строки |
| imagemin, UglifyJS2 | Минификация |
| spritesmith | Создание листа спрайтов |
| winston | Ведение журналов |
| commander.js | Создание приложения командной строки |
Давайте воспользуемся встроенным модулем ОС для получения сведений об операционной системе компьютера:
- В командной строке откройте интерфейс командной строки Node.js. После входа вы увидите подсказку > , сообщающую вам, что вы используете Node.js: node
- Чтобы определить операционную систему, используемую в данный момент (которая должна возвращать ответ, сообщающий о том, что вы работаете под Windows), введите: os.platform()
- Чтобы проверить архитектуру ЦП, введите: os.arch()
- Чтобы просмотреть доступные в системе процессоры, введите: os.cpus()
- Оставьте интерфейс командной строки Node.js, введя .exit или дважды нажав CTRL+C.
Совет Модуль OS Node.js можно использовать для выполнения таких действий, как проверка платформы и возврата переменной для конкретной платформы: Win32/.bat для разработки Windows, дарвин/.sh для Mac/unix, Linux, SunOS и т. д. (например, var isWin = process.platform === «win32»; ).
Не запускается gulp в терминале vs code, как решить проблему?
Здравствуйте, помогите решить проблему с запуском gulp в vs code, уже установил все модули для работы в package.json, а сам gulp ни как не хочет запускаться (устанавливал глобально)
- Вопрос задан более трёх лет назад
- 1003 просмотра
2 комментария
Средний 2 комментария
Александр Лисовский, сбросьте пожалуйста код файла gulp. А ещё лучше — архив всего проекта на какой-то fex.net.
Чтобы можно было изучить проект и найти проблему.
P.S. Из тегов вопроса лучше удалить vs code, так как к нему это никак не относится. Вы же через консоль команды даёте. Просто консоль встроена в VS code
Сергей delphinpro @delphinpro Куратор тега Gulp.js
По русски-же наиисано — выполнение сценариев ps1 (powerSchell) отключено.
Вопрос на засыпку: Что нужно сделать?