======Использование gulp======

====Установка====
<code powershell>
>>>npm install gulp-cli -g
>>>npm install gulp -D
>>>touch gulpfile.js
>>>gulp --help
</code>


==gulpfile.js==

<sxh javascript>
var gulp = require('gulp');

gulp.task('hello', function(){
    console.log('hello world');
});
</sxh>

комманда запуска:
<code powershell>
>>>gulp hello
</code>

==выполнит сразу несколько вызовов==
<sxhjavascript>
var gulp = require('gulp');

gulp.task('hello', function(){
    console.log('hello world');
});
gulp.task('log', function(){
    console.log('hello world again');
});


gulp.task('default', ['hello', 'log']);
</sxh>

комманда запуска:
<code powershell>
>>>gulp default
</code>
 или 
<code powershell>
>>>gulp
</code>

----

====Конфигурация для работы с sass====
Уствновка необходимых пакетов
<code powershell>
>>>npm i -D gulp gulp-sass gulp-uncss gulp-concat gulp-sourcemaps gulp-autoprefixer gulp-plumber browser-sync
</code>

<sxh javascript; title: gulpfile.js>
const gulp = require('gulp');
const sass = require('gulp-sass');
const uncss = require('gulp-uncss');
const concat = require('gulp-concat');
const sourcemaps = require('gulp-sourcemaps');
const autoprefixer = require('gulp-autoprefixer');
const browserSync = require('browser-sync').create();
const plumber = require('gulp-plumber');/*Продолжаем отслеживание в случае ошибки компиляции*/

gulp.task('sass', function () {
    return gulp.src('src/sass/**/*.*')
        .pipe(plumber())  /*Продолжаем отслеживание в случае ошибки компиляции*/
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(concat('bundle.css'))
        .pipe(autoprefixer())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('public'))
        .pipe(browserSync.stream());
});

gulp.task('html', function(){
    return gulp.src('src/*.html')//перетаскиваем html в папку public
        .pipe(gulp.dest('public'));
});

gulp.task('serve', function () {
    browserSync.init({
        server: {
            baseDir: './public'
        }
    });

    gulp.watch('src/sass/**/*.sass', ['sass']);
    gulp.watch('src/*.html', ['html']);
    gulp.watch('public/index.html').on('change', browserSync.reload);
});

gulp.task('default', ['sass','html', 'serve']);

</sxh>

комманда запуска:
<code powershell>
>>>gulp default
</code>