Начинаем создавать систему сборки.

Требования: На компьютере должны стоять: * nodeJS * Git

Последовательность работы

1. Инициализируем Git

   $ git init
   

2. Инициализируем проект

   $ npm init
   

   Проверяем, что в директории появился файлик package.json

3. Мы хотим создать локальный сервер для разработки

   Для этого нам понадобится browsersync

   Установим его:

   $ npm i -D browser-sync
   

   У нас обновился файлик package.json тут появилась первая зависимость.

   У нас появилась папочка node_modules

   Но она нам в git-е не нужна. Мы легко получим ее копию выполнив комманду

   $ npm i
   

   Поэтому создаем файлик .gitignore

4. Для того, что бы протестировать файлик создадим какой-то index.html

5. Запустим локальный сервер

   $ npx browser-sync start --server --tunnel --watch
   

6. Научимся делать тоже самое через опции

   $ npx browser-sync init
   

   У нас появился файлик bs-config.js

   Давайте немного его поправим

       "watch": true,
       "server": 'public',
       "port": 9000
   

   Перенесем файлик index.html в директорию public и запустим сервер

   $ npx browser-sync start --config bs-config.js
   

   Для удобства сохраним комманду в package.json/scripts

7. Выполним тоже самое, с помощью gulp

   $ npm i -D gulp
   

   создаем gulpfile.js

   "use strict"
   
   const gulp = require('gulp'),
       fs = require('fs'),
       browserSync = require('browser-sync').create(),
       browserSyncOptions = require('./bs-config.js');
   
   gulp.task('server', function() {
       browserSync.init(browserSyncOptions);
   });

   Проверяем

   $ npx gulp server
   

8. Добавим proxy

   $ npm i -D proxy-middleware url
   

   const proxy = require('proxy-middleware');
   
   browserSyncOptions.server.middleware.push(proxy(weatherProxyOptions));

9. Добавим pug

   $ npm i -D gulp-pug
   

   const pug = require('gulp-pug');
   
   gulp.task('pug', function() {
       return gulp.src('src/pages/*.pug')
           .pipe(pug({
               pretty: true
           }))
           .pipe(gulp.dest('build'));
   });

10. Альтернативное подключение плагинов gulp-load-plugins

    $ npm i -D gulp-load-plugins
    

    const gulpLoadPlugins = require('gulp-load-plugins'),
        plugins = gulpLoadPlugins();
    
    // pug === plugins.pug

11. Подключим сборщик стилей

    $ npm i -D node-sass gulp-sass
    

12. Обьединяем файлы в один

    $ npm i -D gulp-concat
    

13. Другой способ обьединения файлов @import... Но есть особенности

    /* All is equal! */
    @import "index"
    @import "_index"
    @import "index.scss"
    @import "_index.scss"

14. Возможны любые дополнительные задачи. Например, оптимизация CSS файла или аутопрефиксер

    $ npm i -D gulp-csso gulp-autoprefixer gulp-rename
    

15. Научимся удалять файлы с помощью задач

    $ npm i -D del
    

16. Выполняем задачи последовательно

17. Настроим слежку за файлами

18. Запускаем вместе сервер и слежку за файлами

19. Обсуждаем возможности реакции на изображения

    $ npm i -D gulp-srcset imagemin imagemin-zopfli imagemin-svgo imagemin-webp imagemin-mozjpeg
    

Дополнительная информация:

• 11 простых npm трюков
• Specifics of npm's package.json handling
• Browsersync Documentation
• gulp
• gulp PUG
• PUG API docs
• html to pug online converter
• pug to html online converter
• gulp SASS
• gulp LESS
• gulp Stylus
• css to sass online converter
• SCSS @import, @mixin, @extend
• Gulp srcset
• Gulp Responsive
• Auto srcset
• Building a simple responsive images pipeline with Gulp