шпаргалка по 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 готовых дизайнов. Шаблоны сайтов + установка + хостинг + персонализация + поисковая оптимизация + копирайтинг — все эти услуги вы всегда можете получить от профессионалов мирового уровня!

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

тринадцать − 9 =