Сборка плагинов для Gulp

26.05.2020

Gulp это инструмент для автоматизации рутинных и не очень процессов, также известный как сборщик проектов. Часто используется при фронтенд-разработчике.

Установка

Для работы Gulp необходимо установить на рабочую машину node.js.

Переходим на https://nodejs.org и выбираем версию "рекомендовано для большинства" (Recommended For Most Users), скачиваем инсталлятор и следуем инструкции.

Сам Gulp , а точнее утилиту gulp-cli предназначенную его работы из консоли, устанавливаем глобально через npm

Для этого открываем консоль ( Нажимаем win+r в открывшимся окне вводим cmd ) и выполняем:

 
npm install --global gulp-cli

( Подробную инструкцию можно посмотреть в документации )

Настройка проекта

Создаем папку проекта.

В этой папке нужно создать файл: package.json

Пример содержимого:

 
{
  "name": "so-first",
  "version": "1.0.0",
  "description": "Первый тест",
  "main": "index.html",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Oddler",
  "license": "ISC"
}

Для удобства можно из консоли, предварительно перейдя в ней в папку проекта, вызвать:

 
npm init

и ответить на все вопросы.

Или модно выполнить

 
npm init --y

и потом поправить файл руками.

Далее нужно инсталлировать gulp для текущего проекта, в папке с проектом выполняем:

 
npm install --save-dev gulp

Теперь создаем дерево проекта:

/src/ - папка для исходников
/src/fonts - тут будут шрифты
/src/img - картинки
/src/js/script.js - основной файл скриптов
/src/scss/style.scss - файл стилей в формате scss
/src/index.html - стартовый файл

Также в корне проекта создаем файл: gulpfile.js, пока с тестовым содержимым:

 
function defaultTask(cb) {
  // place code for your default task here
  cb();
}

exports.default = defaultTask

Для проверки запускаем gulp, в выполняем в консоли:

 
gulp

Результат:

 
>gulp
[10:36:53] Using gulpfile ...\gulpfile.js
[10:36:53] Starting 'default'...
[10:36:53] Finished 'default' after 2.88 ms

Установка и настройка плагинов:

Дальше сложно понять, как организовать статью, поэтому перечислю плагины с описанием:

browser-sync - автоматически обновляет страницу в браузере, как только было произведено изменение в коде наблюдаемых файлаов
gulp-file-include - на самом деле это целый шаблонизатор, но чаще всего у него попользуется @@include('_header.html') - для подключения файлов.
del - позволяет удалять файлы и папки.
gulp-sass - добавляем возможность компилировать sass в css
gulp-autoprefixer - автоматическое добавление вендерных префиксов для css (
```
 
	display: flex; 
	display: -webkit-box;
	display: -ms-flexbox;
```
)
gulp-group-css-media-queries - группирует все медиа запросы (оптимизация)
gulp-clean-css - оптимизация css
gulp-rename - позволяет переименовывать файлы и папки.
gulp-uglify-es - сжатие JavaScript файлов (оптимизация)
gulp-sourcemaps - создает карту исходников, что позволяет видеть в инспекторе строки не в сжатом/оптимизированном файле, а в исходном (отладка)
gulp-imagemin - сжатие изображений (оптимизация)
gulp-webp - конвертирует обычные изображения (jpg, png, ...) в webp
gulp-webp-html - автоматически заменяет вставку обычного изображения на webp
в html файлах
gulp-webpcss - тоже что и прошлый плагин, но в css файлах. Также требует подключение JavaScript кода для работы.

При возникновении ошибки: Error: Cannot find module 'webp-converter/cwebp' , нужно еще установить webp-converter определенной версии:
```
 
npm i webp-converter@2.2.3 --save-exact 
```
gulp-plumber - "водопроводчик" - позволяет обрабатывать ошибки, вместо падания всего скрипта
gulp-notify - плагин для вывода сообщений во всплывающем окне в области трея
gulp-if - нужен для организации ветвлений условий в цепочках обработки
gulp-htmlhint - сообщает об ошибках в HTML коде (например, о незакрытых тегах)
gulp-fonter - позволяет компилировать шрифты в формате otf в ttf
gulp-ttf2woff, gulp-ttf2woff2 - преобразует шрифты из ttf в woff и woff2
gulp-svg-sprite - позволяет создавать спрайты из нескольких svg файлов.

Но требует предварительной установки phantomjs-prebuilt
```
 
npm install phantomjs-prebuilt
npm i --save-dev gulp-svg-sprite
```

Устанавливаются плагины через консоль:

 
npm i --save-dev NAME

Все одним скопом:

 
npm i --save-dev browser-sync gulp-file-include del gulp-sass gulp-autoprefixer gulp-group-css-media-queries gulp-clean-css gulp-rename gulp-uglify-es gulp-imagemin gulp-webp gulp-webp-html gulp-webpcss gulp-plumber gulp-notify gulp-if gulp-fonter gulp-ttf2woff gulp-ttf2woff2 gulp-htmlhint gulp-sourcemaps

Известные проблемы

Плагины gulp-group-css-media-queries и gulp-sourcemaps вместе не работают

Пока решил это тем, что в отлаочном режиме отрбатвает только gulp-sourcemaps, т.к. он нужен для отладки, а gulp-group-css-media-queries используется только при финальной компиляции.

Готвый gulpfile.js файл:

 
let project_folder = "dist";
let source_folder = "src";

//const isDev = (process.argv.indexOf('--dev') !== -1);
//const isProd = !isDev;
//const isSync = (process.argv.indexOf('--sync') !== -1);
const isDev = true;


let path = {
    build: {
        html : project_folder + '/', 
        css : project_folder + '/css/', 
        js : project_folder + '/js/', 
        img : project_folder + '/img/', 
        fonts : project_folder + '/fonts/', 
    },
    src: {
        //html : source_folder + '/', 
        html : [source_folder + '/*.html', '!' + source_folder + '/_*.html'], 
        css : source_folder + '/scss/styles.scss', 
        js : source_folder + '/js/scripts.js', 
        img : source_folder + '/img/**/*.{jpg,png,svg,gif,ico,webp}', 
        fonts : source_folder + '/fonts/*.ttf', 
    },
    watch: {
        html : source_folder + '/**/*.html', 
        css : source_folder + '/scss/**/*.scss', 
        js : source_folder + '/js/**/*.js', 
        img : source_folder + '/img/**/*.{jpg,png,svg,gif,ico,webp}', 
    },
    clean: "./" + project_folder + "/"
}

let gulp = require('gulp'),
    {src, dest} = require('gulp'), // gulp.src
    browsersync = require('browser-sync').create();
    fileinclude = require('gulp-file-include'),
    del = require('del'),
    scss = require('gulp-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    group_media = require('gulp-group-css-media-queries'),
    clean_css = require('gulp-clean-css'),
    rename = require('gulp-rename'),
    uglify = require('gulp-uglify-es').default,
    imagemin = require('gulp-imagemin'),
    webp = require('gulp-webp'),
    webp_html = require('gulp-webp-html'),
    webp_css = require('gulp-webpcss'),
    svg_sprite = require('gulp-svg-sprite'),
    plumber = require('gulp-plumber'), // Сантехник
    notify = require('gulp-notify'),
    sourcemaps = require('gulp-sourcemaps'),
    htmlhint = require('gulp-htmlhint'),
    ttf2woff = require('gulp-ttf2woff'),
    ttf2woff2 = require('gulp-ttf2woff2'),
    fonter = require('gulp-fonter'),
//    autoprefixer = require('gulp-autoprefixer'),
//    autoprefixer = require('gulp-autoprefixer'),
    gulpif = require('gulp-if'),
    fs = require('fs');



function error_cb() {
    
}


function fontsStyle(params) {
    let file_content = fs.readFileSync(source_folder + '/scss/fonts.scss');
    if (file_content == '') {
        fs.writeFile(source_folder + '/scss/fonts.scss', '', error_cb);
        return fs.readdir(path.build.fonts, function (err, items) {
            if (items) {
                let c_fontname; 
                for (var i = 0; i < items.length; i++) { 
                    let fontname = items[i].split('.'); 
                    fontname = fontname[0]; 
                    if (c_fontname != fontname) { 
                        fs.appendFile(source_folder + '/scss/fonts.scss', '@include font("' + fontname + '", "' + fontname + '", "400", "normal");\r\n', error_cb);
                    } 
                    c_fontname = fontname;
                }
            }
        })
    }
}









function clean() {
    //console.debug(path.clean);
    return del(path.clean);
}

function watchFiles() {
    gulp.watch([path.watch.html], html);
    gulp.watch([path.watch.css], css);
    gulp.watch([path.watch.js], js);
    gulp.watch([path.watch.img], images);
}

function browserSync() {
    browsersync.init({
        server: {
             baseDir: "./" + project_folder + "/"
        },
        port: 3000,
        notify: false
    });
}

// ttf => woff + woff2
function fonts() {
    src(path.src.fonts)
        .pipe(ttf2woff())
        .pipe(dest(path.build.fonts))
    ;

    return src(path.src.fonts)
        .pipe(ttf2woff2())
        .pipe(dest(path.build.fonts))
    ;
}

function html() {
    return src(path.src.html)
        .pipe(plumber({
            errorHandler: notify.onError(function(err) {
                return {
                    title: 'HTML',
                    sound: true,
                    message: err.message
                }
            })
        }))
        .pipe(fileinclude())
        .pipe(webp_html())
        .pipe(htmlhint())
        .pipe(htmlhint.failReporter())
        .pipe(dest(path.build.html)) // Корируем все хтмл из src
        .pipe(browsersync.stream());
}

function js() {
    return src(path.src.js)
        .pipe(plumber({
            errorHandler: notify.onError(function(err) {
                return {
                    title: 'JS',
                    sound: true,
                    message: err.message
                }
            })
        }))
        .pipe(fileinclude())
        .pipe(dest(path.build.js))
        .pipe(uglify()) // Сжимаем JS
        .pipe(rename({
            extname: '.min.js'
        }))
        .pipe(dest(path.build.js))
        .pipe(browsersync.stream());
}

function css() {
    return src(path.src.css)
//      .pipe(notify("Hello Gulp!"))
        .pipe(plumber({
            errorHandler: notify.onError(function(err) {
                return {
                    title: 'Styles',
                    sound: true,
                    message: err.message
                }
            })
        }))
        .pipe(gulpif(isDev, sourcemaps.init()))
        .pipe(scss({
            indentType: 'tab',
            indentWidth: 1,
            outputStyle: "extanded"
        }))
        .pipe(gulpif(!isDev, group_media()))
        .pipe(autoprefixer({
            overrideBrowserslist: ["last 5 versions"],
            cascade: true
        }))
        .pipe(webp_css())
        //---.pipe( sourcemaps.write() )
        .pipe(dest(path.build.css))
        .pipe(clean_css())
        .pipe(rename({
            extname: '.min.css'
        }))
        .pipe(gulpif(isDev, sourcemaps.write()))
        .pipe(dest(path.build.css))
        .pipe(browsersync.stream());
}

function images() {
    return src(path.src.img)
        .pipe(
            webp({
                quality: 70
            })
        )
        .pipe(dest(path.build.img)) // Сохраняем в формате webp
        .pipe(src(path.src.img)) // повторное обращаеся к исходному изображени.
        .pipe(
            imagemin({
                progressive: true,
                svgoPlugins: [{removeViewBox: false}],
                interlaced: true,
                optimizationLevel: 3 // 0 to 7
            })
        )
        .pipe(dest(path.build.img))
        .pipe(browsersync.stream());
}


/*
--------------------------------------------------
*/

gulp.task('svgSprite', function () {
    return gulp.src([source_folder + '/iconsprite/*.svg'])
        .pipe(
            svg_sprite({
                mode: {
                    stack: {
                        sprite: "../icons/icons.svg",
                        example: true
                    }
                }
            })
        )
        .pipe(dest(path.build.img))
    ;
});

gulp.task('otf2ttf', function () {
    return gulp.src([source_folder + '/fonts/otf/*.otf'])
        .pipe(fonter({
            formats: ['ttf']
        }))
        .pipe(dest(source_folder + '/fonts/'))
    ;
});


gulp.task('testNotify', function (callback) {
    gulp.src('.').pipe(notify("Hello Gulp!"));
    callback();
});


/*
--------------------------------------------------
*/


let build = gulp.series(clean, gulp.parallel(js, css, html, images, fonts), fontsStyle);
let watch = gulp.parallel(build, watchFiles, browserSync);


//exports.images = images;
//exports.css = css;
//exports.build = build;
//exports.html = html;
//exports.watch = watch;
exports.default = watch; // Действие по умолчанию

Запуск

Для запуска нужно выдплнить в консоле:

 
gulp

Если же нужно выполнить только один таск (задание), то:

 
gulp svgSprite

Результат

Все файлы, кроме модулея одним архивом. Включая результат и package-lock.json. Последний стоит удалить перед выполнением npm i

Категории: -Памятка-

Пометки: Сборщик Gulp, SASS, SCSS, компиляция, сборка.