В этой статье шпаргалке пойдет речь, как быстро развернуть gulp-less под Windows. Мы опустим тему о том, что это такое и для чего нужно, и будем считать, что читатель уже знаком с понятием css-препроцессора.

Итак, первое, с чего необходимо начать это

1. Установить node.js, если он не установлен. Для этого идем на оффициальный сайт и качаем последнюю версию node под вашу версию операционной системы. Дожидаемся скачивания, запускаем установку, следуем инструкциям, соглашаясь со всеми пунктами. После установки в терминале должна работать команда node:
2. Теперь нужно создать проект: запускаем консоль, переходим в папку с проектом через cd path и набираем в терминале npm init. При создании проекта у нас будетзапрошено его название и прочая информация — ее можно оставить по дефолту. Жмем несколько раз Enter до подтверждения и подтверждаем:
3. Проект создан. В указанной папке должен появиться файл package.json со следующим содержимым:

   {
     "name": "myproject",
     "version": "1.0.0",
     "description": "",
     "main": "index.js",
     "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1"
     },
     "author": "",
     "license": "ISC"
   }
   

   Теперь в него необходимо установить пакеты. На начальном этапе нам нужно всего лишь два пакета:
   gulp и gulp-less. В той же консоли вводим команду:

   npm install gulp --save-dev

   И затем

   npm install gulp-less --save-dev

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

   {
     "name": "myproject",
     "version": "1.0.0",
     "description": "",
     "main": "index.js",
     "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1"
     },
     "author": "",
     "license": "ISC",
     "devDependencies": {
       "gulp-less": "^4.0.1",
       "gulp": "^4.0.2"
     },
   }

   Вышеуказанные пакеты можно ставить и без ключа —save-dev. Это не играет роли, если вы не собираетесь выкладывать свой пакет в пакетный менеджер npm.

4. Теперь необходимо создать скрипт, который будет выполнять gulp. По традиции он называется gulpfile.js и находится в корне той же директории, что и package.json. Т.к. это — шпора, а не учебник, я опущу подробности и сразу укажу работающий скрипт для less:

   var gulp = require('gulp');
   var less = require('gulp-less');// подключаем gulp-less
   
   
   const src_path = 'django_test/main/static/**/*.less';
   
   gulp.task('less', function(){
     
     return gulp.src(src_path)
       .pipe(less({})) 
       .pipe(gulp.dest('django_test/main/static/'))
   });
   
   
   gulp.task('watch', function(){
     return gulp.watch(src_path, gulp.series('less'));
   });
   //*/
   
   gulp.task('default', gulp.series('less', 'watch'));

   Параметры для методов gulp.src и gulp.dest от проекта к проекту, конечно же, будут отличаться. Полагаю, вы разберетесь.

5. При установке пакетов особо внимательные пользователи могли заметить, что помимо изменения содержимого файла package, в папке проекта также появилась директория node_modules, которая содержит весь код скачанных пакетов. А так же папка .bin, содержащая alias-ы для их запуска. Заходим туда через cd node_modules/.bin, набираем gulp.cmd и наслаждаемся результатом

Аналогичного результата можно достичь более быстрым способом, если прописать в scripts вашего package.json код для запуска gulp: "start": "node \"./node_modules/gulp/bin/gulp.js\"". Тогда мы сможем запускать ее из любого места нашего проекта командой npm run start. Для запуска конкретного такса нужно просто задать его имя, например:

npm run start "less"

Многие так же рекомендуют ставить gulp глобально (с ключом -g): npm i -g gulp. Это позволяет запускать команды gulp еще более изящно:

gulp

Либо конкретный таск

gulp less

Post Scriptum