node.js html css Gulp для самых маленьких

[BiZaJe]

Данный материал подойдет тем, кто уже знаком с SASS/SCSS и хотя бы не много js

ВВЕДЕНИЕ​

Большинству Front-End разработчиков надоедает выполняет рутинные задачи для себя, обновлять браузер или же компилировать SASS файлы в CSS.
Для таких рутинных задач разработан Gulp. Gulp - менеджер-задач созданный для автоматического выполнения часто используемых задач. Gulp написан на языке ECMAScript (да, именно это название правильное, в простонародье "JavaScript"). Gulp использует командную строку для запуска свои задач (PowerShell, CMD, Linux терминал) определенные в файле GULPFILE.JS. Также Gulp распространяется через NPM (Node Package Manager).
А теперь перейдем к теоретической части....

УСТАНОВКА GULP​

Для того, чтобы использовать Gulp для своих проектов нам понадобиться Node.js. После того как вы перейдете на страницу вы увидите 2 кнопки. Одна ведет на LTS версию, другая на тестовую версию

​

Рекомендую скачать LTS версию, но можете также скачать тестовую версию.
Скачали? Поехали дальше.
Установку рассматривать не будем т.к с этим разберется любой.
После того как Вы установили Node.js, делаем следующие шаги.
1. Создаем папку для наших проектов. НИ В КОЕМ СЛУЧАЕ НЕ СОЗДАВАЙТЕ ЕЕ НА РАБОЧЕМ СТОЛЕ И НЕ НАЗЫВАЙТЕ ПАПКУ РУССКИМИ БУКВАМИ!!!! т.к Gulp не будет работать корректно с русскими символами.
Создали? поехали дальше.
2. Создайте папку для своего первого проекта в этой папке. (УСЛОВИЕ ТАКОЕ ЖЕ. НИКАКИХ РУССКИХ БУКВ)
3. После того как Вы создали папку, открываем ее через PowerShell (если у вас Win 10), CMD или Linux терминал, а если вы используете Visual Studio Code открываем его и в нем запускаем PowerShell (если у вас Win 10), CMD или Linux терминал

​

4. Следующим шагом вводим команду npm init для того чтобы инициализировать NPM и была возможность устанавливать пакеты.
5. После того как вы инициализировали npm в свое проекте у вас должен появится файл package.json. Если он появился делаем следующий шаг, пишем в консоли npm i gulp --save-dev и ждем когда скачается и установиться наш Gulp.

ПРАКТИЧЕСКОЕ ПРИМЕНЕНИЕ GULP​

Для того чтобы понять полностью для чего такой мощный инструмент, попробуем его с практической стороны.
1. Создайте в папке вашего проекты две папки dist и src. Эти папки будут служить для исходного кода верстки и готовой верстки для выгрузки.
2. В консоли пишем команду npm i gulp-sass --save-dev. Этой командой мы установим модуль для компиляции SASS/SCSS препроцессоров CSS.
3. В папке нашего проекта создаем файл gulpfile.js.
4. В gulpfile.js добавляем следующий код

Спойлер: gulpfile.js

let gulp = require('gulp'),
    sass = require('gulp-sass');
    
gulp.task('sass', function(){
    return gulp.src('src/scss/*.scss') // Возвращаем путь до файла с расширением scss
    .pipe(sass({outputStyle: "compressed"})) // Сжимаем содержимое после компиляции
    .pipe(gulp.dest('./dist/css')) // Куда помещать скомпилированные файлы
});

gulp.task('html', function(){
    return gulp.src('src/*.html') // Возвращаем путь до файла с расширением html
    .pipe(gulp.dest('./dist')) // Куда помещать изменный html файл
});

gulp.task('watch', function(){
    gulp.watch('src/scss/*.scss', gulp.parallel('sass')) // запускаем таск 'sass' если произошло изменение
    gulp.watch('src/*.html', gulp.parallel('html'))  // запускаем таск 'html' если произошло изменение
});

5. После этого в папке src создаем index.html, папку scss и в ней файл style.scss
В консоли пишем команду gulp watch. Данной командой запустим таск для выполнения других тасков.
Внести какие-нибудь данные в index и style и сохраните их. Если все успешно то в папке dist вы увидите index.html и скомпилированный файл с расширением CSS.


В данной теме мы примерно рассмотрели на что способен Gulp и немного автоматизировали свои задачи. Если тема была интересна, советуйте, говорите какие темы хотите рассмотреть, говорите свои замечания.

 

[fantom]

let gulp = require('gulp'), sass = require('gulp-sass');

Почему let, а не const?

P.S. Gulp хорош если нужно чет очень кастомное. В большинстве случаев лучшим решением будет взять webpack с подготовленным конфигом. Особенно если это будет делать новичок.

 

[BiZaJe]

Почему let, а не const?

P.S. Gulp хорош если нужно чет очень кастомное. В большинстве случаев лучшим решением будет взять webpack с подготовленным конфигом. Особенно если это будет делать новичок.

let взято чисто для примера, webpack хорош, но и знания gulp не помешают