Всем привет.
Есть вот такой галпфайл
var gulp = require('gulp'),
browserSync = require('browser-sync').create(),
reload = browserSync.reload,
spritesmith = require("gulp.spritesmith"),
pugInheritance = require('gulp-pug-inheritance'),
pug = require('gulp-pug'),
changed = require('gulp-changed'),
cached = require('gulp-cached'),
gulpif = require('gulp-if'),
filter = require('gulp-filter'),
stylus = require('gulp-stylus'),
concat = require('gulp-concat'),
uglify = require('gulp-uglifyjs'),
del = require('del'),
sourcemaps = require('gulp-sourcemaps'),
csscomb = require('gulp-csscomb'),
plumber = require("gulp-plumber"),
notify = require("gulp-notify"),
tinypng = require('gulp-tinypng'),
autoprefixer = require('gulp-autoprefixer');
// PUG
gulp.task('pug', function() {
return gulp.src('dev/**/*.pug')
//only pass unchanged *main* files and *all* the partials
.pipe(changed('dist', { extension: '.html' }))
//filter out unchanged partials, but it only works when watching
.pipe(gulpif(global.isWatching, cached('pug')))
//find files that depend on the files that have changed
.pipe(pugInheritance({ basedir: 'dev', extension: '.pug', skip: 'node_modules' }))
//filter out partials (folders and files starting with "_" )
.pipe(filter(function(file) {
return !/\/_/.test(file.path) && !/^_/.test(file.relative);
}))
.pipe(plumber())
.pipe(pug({
pretty: true
}))
.on("error", notify.onError(function(error) {
return "Message to the notifier: " + error.message;
}))
.pipe(gulp.dest('dist'));
});
gulp.task('setWatch', function() {
global.isWatching = true;
});
// STYLUS
gulp.task('stylus', function() {
return gulp.src([
'dev/static/stylus/main.styl',
'dev/static/stylus/libs.styl',
])
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(stylus({
'include css': true,
compress: true
}))
.on("error", notify.onError(function(error) {
return "Message to the notifier: " + error.message;
}))
.pipe(autoprefixer(['last 2 version']))
.pipe(sourcemaps.write('.'))
.pipe(csscomb())
.pipe(gulp.dest('dist/static/css/'))
.pipe(browserSync.reload({
stream: true
}));
});
// Работа с JS
gulp.task('libs-scripts', function() {
return gulp.src([
'dev/static/libs/magnific/jquery.magnific-popup.min.js'
])
.pipe(concat('libs.min.js'))
.pipe(uglify())
.pipe(gulp.dest('dist/static/js'))
});
gulp.task('jquery-scripts', function() {
return gulp.src([
'dev/static/js/jquery.js'
])
.pipe(gulp.dest('dist/static/js'))
});
gulp.task('scripts-all', function() {
return gulp.src([
'dev/static/js/main.js',
'dev/_blocks/**/*.js'
])
.pipe(concat('main.min.js'))
.pipe(uglify())
.pipe(gulp.dest('dist/static/js'))
.pipe(browserSync.reload({
stream: true
}));
});
// СЕРВЕР
gulp.task('browserSync', function() {
browserSync.init({
server: './dist'
});
});
// Сборка спрайтов PNG
gulp.task('cleansprite', function() {
return del.sync('dev/static/img/sprite/sprite.png');
});
gulp.task('spritemade', function() {
var spriteData =
gulp.src('dev/static/img/sprite/*.*')
.pipe(spritesmith({
imgName: 'sprite.png',
cssName: '_sprite.styl',
padding: 10,
cssFormat: 'stylus',
algorithm: 'binary-tree',
cssTemplate: 'stylus.template.mustache',
cssVarMap: function(sprite) {
sprite.name = 's-' + sprite.name;
}
}));
spriteData.img.pipe(gulp.dest('dist/static/img/sprite/')); // путь, куда сохраняем картинку
spriteData.css.pipe(gulp.dest('dev/static/stylus/')); // путь, куда сохраняем стили
});
gulp.task('sprite', ['cleansprite', 'spritemade']);
gulp.task('dev-img', function () {
gulp.src(['dev/static/img/**/*',
'!dev/static/img/sprite/*'])
.pipe(gulp.dest('dist/static/img/'));
});
// Сжатие картинок
gulp.task('img', function () {
gulp.src(['dev/static/img/**/*',
'!dev/static/img/**/*.svg',
'!dev/static/img/sprite/*'])
.pipe(tinypng('Vn1KyNknYUVUSNNDazCNtOs4UbGruz5V'))
.pipe(gulp.dest('dist/static/img/'));
});
// СЛЕЖКА
gulp.task('watch', ['browserSync', 'stylus', 'libs-scripts', 'jquery-scripts'], function() {
gulp.watch('dev/static/stylus/**/*.styl', ['stylus']);
gulp.watch('dev/**/*.pug', ['pug']);
gulp.watch(['dev/static/img/**/*', '!dev/static/img/sprite/*'], ['dev-img']);
gulp.watch('dist/*.html').on('change', browserSync.reload);
gulp.watch(['dev/static/js/main.js', 'dev/_blocks/**/*.js'], ['scripts-all']);
});
// Дефолтный таск
gulp.task('default', ['watch']);
// Очистка папки сборки
gulp.task('clean', function() {
return del.sync('prodact');
});
// Сборка проекта
gulp.task('build', ['clean', 'stylus', 'libs-scripts', 'scripts-all', 'img'], function() {
var buildCss = gulp.src('dist/static/css/*.css')
.pipe(gulp.dest('prodact/static/css'));
var buildFonts = gulp.src('dist/static/fonts/**/*')
.pipe(gulp.dest('prodact/static/fonts'));
var buildJs = gulp.src('dist/static/js/*.js')
.pipe(gulp.dest('prodact/static/js'));
var buildHtml = gulp.src('dist/*.html')
.pipe(gulp.dest('prodact/'));
var buildImg = gulp.src('dev/static/img/sprite/sprite.png')
.pipe(tinypng('Vn1KyNknYUVUSNNDazCNtOs4UbGruz5V'))
.pipe(gulp.dest('dist/static/img/sprite/'));
});
Проблема - компиляция pug файлов.
Через gulp-pug-inheritance не работает толком ничего.
Нашел какое-то решение новое
https://github.com/mrmlnc/emitty
Вопросы
1.Можно ли его интегрировать в мой файл? Рекомендуют вот
этот вариант . Вопрос возник т.к. там галп 4
2. Стоит ли переходить на галп4? Насколько сложно будет перенести указанный галпфайл на 4ю версию?
Заранее спасибо!