шпаргалка по Gulp


Синтаксис файла соответствует Gulp 4.0.alfa

Пример варианта Gulp конфига поддерживающий современные JS/TS и SASS разбитый на файлы для удобства

// необходимые зависимости в package.json "devDependencies": { // пресет для Babel для перевода ES6 в ES5 "babel-preset-es2015": "^6.6.0", // пресет позволяющий использовать самые последние возможности JS (ES7) "babel-preset-stage-0": "^6.5.0", // минисервер с возможностью синхронизации и лайврелоадом "browser-sync": "^2.11.2", // удаляем папку "del": "^2.2.0", // базовый модуль Галпа "gulp": "github:gulpjs/gulp#4.0", // добавляет префиксы браузеров в CSS "gulp-autoprefixer": "^3.1.0", // базовый модуль Babel для работы с современным JS "gulp-babel": "^6.1.2", // кеш файл для оптимизации скорости работы Галп "gulp-cached": "^1.1.0", // объединяет файлы в один "gulp-concat": "^2.6.0", // выводит дополнительную информацию об операциях с файлами "gulp-debug": "^2.1.2", // проверка стиля для JS "gulp-eslint": "^2.0.0", // выполнение операций в зависимости от условий "gulp-if": "^2.0.0", // модуль для удобной загрузки других модулей Галп "gulp-load-plugins": "^1.2.0", // фильтр пропускающий файлы которые изменились с предыдущего раза "gulp-newer": "^1.1.0", // выводит удобное сообщение об ошибках "gulp-notify": "^2.2.0", // проброс сообщения об ошибке через всю цепочку задач "gulp-plumber": "^1.1.0", // запоминает прошедшие через него файлы и вставляет их обратно в поток // работает в паре с gulp-cached который пропускает только изменившиеся файлы "gulp-remember": "^0.3.0", // переводит sass в css "gulp-sass": "^2.2.0", // добавляет карты с исходным кодом для JS и CSS "gulp-sourcemaps": "^1.6.0", // проверка стиля кода для Typescript "gulp-tslint": "^4.3.4", // переоводит Typescript в JS "gulp-typescript": "^2.12.1", // минификация JS "gulp-uglify": "^1.5.3", // минификация CSS "gulp-uglifycss": "^1.0.6", // резолвит path "path": "^0.12.7", // позволяет объединять файлы в один поток. Более удобный синтаксис "stream-combiner2": "^1.1.1", // позволяет создавать собственные задачи в потоке "through2": "^2.0.1", }, 

./gulpfile.json

'use strict'; require('./gulp'); 

./gulp/index.js

Основной файл с конфигурация всех нужных папок

 

'use strict'; const src = 'src'; const dist = 'public'; const server = dist; const assets = 'demo'; const isDev = !process.env.NODE_ENV || process.env.NODE_ENV === 'development'; const cssCacheName = 'csscash'; const jsCacheName = 'jscache'; const gulp = require('gulp'); const path = require('path'); const _task = require('./_loader'); _task('serve', path.resolve('./gulp/server'), {dist}); _task('css-compile', path.resolve('./gulp/css-compile'), {src, dist, jsCacheName}); _task('js-compile', path.resolve('./gulp/js-compile'), {src, dist, cssCacheName}); _task('clean', path.resolve('./gulp/clean'), {dist}); _task('assets', path.resolve('./gulp/assets'), {src, dist, assets}); _task('watch', path.resolve('./gulp/watch'), { src, dist, assets, assetsTaskName: 'assets', cssCacheName, cssTaskName: 'css-compile', jsCacheName, jsTaskName: 'js-compile' }); gulp.task('dev', gulp.series('clean', gulp.parallel('css-compile', 'js-compile', 'assets'), gulp.parallel('watch', 'serve'))); gulp.task('build', gulp.series('clean', gulp.parallel('css-compile', 'js-compile', 'assets'))); gulp.task('default', gulp.series('dev')); 

./gulp.js/_loader.js

Ленивый лоадер модулей в зависимости от вызванной задачи

  'use strict'; const gulp = require('gulp'); module.exports = function loadTask(taskName, path, options) { options.taskName = taskName; gulp.task(taskName, function (callback) { let task = require(path).call(this, options); return task(callback); }) };   

./gulp/assets.js

Копируем файлы из папки assets в дистанционную

  'use strict'; const $ = require('gulp-load-plugins')(); const gulp = require('gulp'); const combiner = require('stream-combiner2').obj; module.exports = function (options) { return function () { return combiner( gulp.src(options.src +'/'+ options.assets +'/**', {since: gulp.lastRun(options.taskName)}), $.newer(options.dist), $.debug({title: options.taskName}), gulp.dest(options.dist) ) }; }; 

./gulp/clean.js

Удаление папки для сборки проекта

  'use strict'; const del = require('del'); module.exports = function (options) { return function () { return del(options.dist); } }; 

./gulp/css-compile.js

Преобразование SASS в CSS

 

'use strict'; const $ = require('gulp-load-plugins')(); const gulp = require('gulp'); const combiner = require('stream-combiner2').obj; module.exports = function (options) { return function () { return combiner( gulp.src(options.src + '/**/*.{scss,sass}'), $.cached(options.cssCacheName), $.sourcemaps.init(), $.remember(options.cssCacheName), $.sass(), $.autoprefixer(), $.concat('style.css'), $.uglifycss({ "maxLineLen": 80, "uglyComments": true }), $.sourcemaps.write('.'), gulp.dest(options.dist) ).on('error', $.notify.onError()) } }; 

./gulp/server.js

Минисервер с лайврелоадом и синхронизацией состояния браузеров

'use strict'; const bs = require('browser-sync').create(); module.exports = function (options) { return function () { bs.init( { port: 9000, server: options.dist }); return bs.watch(options.dist +'**/*.*').on('change', bs.reload); } }; 

./gulp/watch.js

Задачи которые следят за изменениями в файлах

'use strict'; const gulp = require('gulp'); const $ = require('gulp-load-plugins')(); module.exports = function (options) { return function () { gulp.watch(options.src + '/**/*.scss', gulp.series(options.cssTaskName)) .on('unlink', function (filepath) { $.remember.forget(options.cssCacheName, path.resolve(filepath)); delete cached.caches[options.cssCacheName][path.resolve(filepath)]; }); gulp.watch(options.src + '/**/*.{js, ts}', gulp.series(options.jsTaskName)) .on('unlink', function (filepath) { $.remember.forget(options.jsCacheName, path.resolve(filepath)); delete cached.caches[options.jsCacheName][path.resolve(filepath)]; }); gulp.watch(options.src +'/'+ options.assets +'/**/*.*', gulp.series(options.assetsTaskName)) }; }; 

Заметки Для обработки ошибок во время компиляции часто используется gulp-notify, который не только оформляет ошибку, но и выводит сообщение через нотификацию операционной системы.

const notify = require('gulp-notify'); 

Поскольку ошибка не пробрасывается через весь pipe, и для того что бы не вешать перехват на каждую отдельную задачу используется следующие плагины gulp-plumber Позволяет пробрасывать ошибку через весь поток:

const notify = require('gulp-notify'); const plumber = require('gulp-plumber'); gulp.task('sass', function () { return gulp.src(srcCurrent + '/**/*.scss') // используем plumber в начале потока обработки и он сработает там где будут ошибки .pipe(plumber({errorHandler: notify.onError()})) .pipe(cached('styles')) .pipe(gulpIf(isDev, sourcemaps.init())) .pipe(remember('sass')) .pipe(sass()) .pipe(autoprefixer()) .pipe(concat('all.css')) .pipe(gulpIf(isDev, sourcemaps.write('.'))) .pipe(gulp.dest(dist)) }); 

stream-combiner2 (использует stream-3) или multipipe (использует stream-2)

const notify = require('gulp-notify'); const multipipe = require('multipipe'); const combiner = require('stream-combiner2').obj; gulp.task('sass', function () { return combiner( gulp.src(srcCurrent + '/**/*.scss'), cached('styles'), gulpIf(isDev, sourcemaps.init()), remember('sass'), sass(), autoprefixer(), concat('all.css'), gulpIf(isDev, sourcemaps.write('.')), gulp.dest(dist) ).on('error', notify.onError()) }); // или полностью аналогично multipipe gulp.task('sass', function () { return multipipe( gulp.src(srcCurrent + '/**/*.scss'), cached('styles'), gulpIf(isDev, sourcemaps.init()), remember('sass'), sass(), autoprefixer(), concat('all.css'), gulpIf(isDev, sourcemaps.write('.')), gulp.dest(dist) ).on('error', notify.onError()) }); 

Для создания собственных обработчиков задач используется модуль through2

const through2 = require('through2'); gulp.task('sass', function () { return gulp.src(srcCurrent + '/**/*.scss') .pipe(through2(function(file, enc, callback){ // file - получаемый на вход файл // enc - кодировка файла (если текстовый) // callback - функция которая должно обязательно вызываться // this.push() используется для добавление в поток новых файлов // Пример: // let file2 = file.clone(); // file.path += '.bak'; //this.push(file2); // ... что то делаем с файлом и возвращаем его // через callback обратно в поток // это ОБЯЗАТЕЛЬНО callback(null, file); //первый аргумент сообщение об ошибке // если просто вызвать колбек то файл далее не передастся callback(); })) .pipe(gulp.dest(dist)) }); 

Важно знать что file приходит в виде Vinyl объекта.

(c)

Реклама
Поделиться
Качественные премиум темы и шаблоны для Вашего сайта:

Смотреть полный каталог качественных тем и шаблонов

Здесь Вы можете выбрать из более чем 46 000 готовых дизайнов. Шаблоны сайтов + установка + хостинг + персонализация + поисковая оптимизация + копирайтинг — все эти услуги вы всегда можете получить от профессионалов мирового уровня!

Добавить коментарий

пять × 2 =