Подключение Gulp.js в новом проекте включает несколько шагов:
1. Установка Node.js и npm (Node Package Manager):
Gulp.js основан на Node.js, поэтому первым шагом должно быть установка Node.js. Вы можете скачать установщик Node.js с официального сайта (https://nodejs.org) и следовать инструкциям.
После установки Node.js вы также получите npm (Node Package Manager), который позволяет управлять пакетами Node.js.
2. Создание файла package.json:
package.json - это файл конфигурации для вашего проекта, который содержит информацию о зависимостях и других настройках. Вы можете создать package.json в своей директории проекта, выполнив следующую команду в терминале или командной строке:
npm init
Следуйте инструкциям и предоставьте необходимую информацию о вашем проекте.
3. Установка Gulp.js глобально:
Вы можете установить Gulp.js глобально, чтобы иметь возможность использовать его командную строку. Для этого выполните следующую команду:
npm install -g gulp
4. Установка Gulp.js локально:
После создания package.json вы можете установить Gulp.js локально, как зависимость проекта. Выполните следующую команду в директории проекта:
npm install gulp --save-dev
Это установит Gulp.js и добавит его в список зависимостей вашего проекта в package.json.
5. Создание файла gulpfile.js:
gulpfile.js - это файл конфигурации Gulp.js, в котором вы определяете задачи и настройки. Создайте файл gulpfile.js в корневой директории вашего проекта и укажите нужные вам задачи.
Например, простой gulpfile.js может выглядеть следующим образом:
var gulp = require('gulp');
gulp.task('hello', function() {
console.log('Hello, world!');
});
6. Использование Gulp.js командной строкой:
Теперь вы можете использовать Gulp.js командной строкой. Выполните следующую команду в терминале или командной строке:
gulp hello
Это запустит задачу hello в вашем gulpfile.js.
Чтобы подключить Gulp.js watch, вам необходимо выполнить дополнительные шаги:
1. Установка плагина gulp-watch:
gulp-watch - это плагин, который позволяет следить за изменениями файлов и автоматически выполнять задачи Gulp.js при изменении. Выполните следующую команду для установки плагина:
npm install gulp-watch --save-dev
2. Добавление задачи watch в ваш gulpfile.js:
Когда плагин gulp-watch установлен, добавьте задачу watch в ваш gulpfile.js. Например, ваш gulpfile.js может выглядеть так:
var gulp = require('gulp');
var watch = require('gulp-watch');
gulp.task('hello', function() {
console.log('Hello, world!');
});
gulp.task('watch', function() {
gulp.watch('src/*.js', ['hello']);
});
В этом примере задача watch следит за изменениями файлов с расширением .js в директории src, и каждый раз, когда происходит изменение, выполняется задача hello.
Выполните следующую команду, чтобы запустить задачу watch:
gulp watch
Теперь Gulp.js будет следить за изменениями файлов в директории src и автоматически выполнять задачу hello.
Это основные шаги для подключения Gulp.js и настройки Gulp.js watch в новом проекте. У Gulp.js есть много других возможностей, таких как компиляция Sass, минификация JavaScript и другие, с которыми вы можете ознакомиться в официальной документации Gulp.js (https://gulpjs.com).