Answer the question
In order to leave comments, you need to log in
How to solve Gulp's problem with wrapping and optimizing images?
Greetings. For a long time there is a problem in my collector related to images. When a certain number of them in the project is reached, it stops shifting new folders from the folder. Sometimes fiercely freezes on optimization. Disabling the optimizer does not solve the problem
Task code
gulp.task('image:build', function () {
for (var i = 0; i < typeProject; i++) {
gulp.src(path.src.media)
// .pipe(imagemin({
// progressive: true,
// svgoPlugins: [{removeViewBox: false}],
// use: [pngquant()],
// interlaced: true
// }))
.pipe(gulp.dest(path.build.media[i]))
.pipe(reload({stream: true}));
}
});
'use strict';
var gulp = require('gulp'),
watch = require('gulp-watch'),
prefixer = require('gulp-autoprefixer'),
uglify = require('gulp-uglify'),
sass = require('gulp-sass'),
sourcemaps = require('gulp-sourcemaps'),
cssmin = require('gulp-clean-css'),
imagemin = require('gulp-imagemin'),
pngquant = require('imagemin-pngquant'),
rimraf = require('rimraf'),
rename = require('gulp-rename'),
order = require('gulp-order'),
concat = require('gulp-concat'),
browserSync = require('browser-sync'),
plumber = require('gulp-plumber'),
include = require('gulp-include'),
gcmq = require('gulp-group-css-media-queries'),
svgstore = require('gulp-svgstore'),
inlinesource = require('gulp-inline-source'),
svgmin = require('gulp-svgmin'),
pathFnc = require('path'),
rev = require('gulp-rev-append'),
babel = require('gulp-babel'),
reload = browserSync.reload;
var typeProject = 1; // 1 - only create folder 'build', create folders 'build' and 'public' (public - default name)
var prodactionFolder = 'public';
var path = {
build: {
html: 'build/',
js: ['build/js/', '../'+prodactionFolder+'/js/'],
json: ['build/json/', '../'+prodactionFolder+'/json/'],
css: ['build/css/', '../'+prodactionFolder+'/css/'],
media: ['build/img/', '../'+prodactionFolder+'/media/'],
fonts: ['build/fonts/', '../'+prodactionFolder+'/fonts/'],
inlineStyle: 'src/html/templates/parts/',
},
src: {
html: 'src/html/*.html',
jsManual: 'src/js/parts/[^_]*.js',
jsLibs: 'src/js/libs/*.js',
json: 'src/json/**/*.json',
style: 'src/style/**/*.scss',
inlineStyle: 'src/inline/**/*.scss',
media: 'src/media/**/*.*',
svgIcons: 'src/media/sprite/**/*.*',
fonts: 'src/fonts/**/*.*'
},
watch: {
html: 'src/**/*.html',
js: 'src/js/**/*.js',
json: 'src/json/**/*.json',
style: 'src/style/**/*.scss',
inlineStyle: 'src/inline/**/*.scss',
media: 'src/media/**/*.*',
svgIcons: 'src/media/sprite/**/*.*',
fonts: 'src/fonts/**/*.*'
},
clean: './build'
};
var config = {
server: {
baseDir: './build'
},
// tunnel: true,
tunnel: false,
host: 'localhost',
port: 9000,
logPrefix: 'NameProject'
};
gulp.task('webserver', function () {
browserSync(config);
});
gulp.task('clean', function (cb) {
rimraf(path.clean, cb);
});
gulp.task('html:build', function () {
gulp.src(path.src.html)
.pipe(include())
.pipe(rev())
.pipe(gulp.dest(path.build.html))
.pipe(reload({stream: true}));
});
gulp.task('js:build', function () {
for (var i = 0; i < typeProject; i++) {
gulp.src(path.src.jsManual)
.pipe(plumber())
.pipe(include())
.pipe(concat('scripts.js'))
.pipe(gulp.dest(path.build.js[i]))
.pipe(uglify())
.pipe(rename('scripts.min.js'))
.pipe(gulp.dest(path.build.js[i]))
.pipe(reload({stream: true}))
gulp.src(path.src.jsLibs)
.pipe(plumber())
.pipe(concat('libs.js'))
.pipe(gulp.dest(path.build.js[i]))
.pipe(uglify())
.pipe(rename('libs.min.js'))
.pipe(gulp.dest(path.build.js[i]));
}
});
gulp.task('json:build', function() {
for (var i = 0; i < typeProject; i++) {
gulp.src(path.src.json)
.pipe(gulp.dest(path.build.json[i]))
.pipe(reload({stream: true}))
}
});
gulp.task('style:build', function () {
for (var i = 0; i < typeProject; i++) {
gulp.src([path.src.style, '!'+path.src.style+'/inline/**/*.scss'])
.pipe(plumber())
.pipe(order([
'base/_setting.scss',
'base/_mixin.scss',
'base/normalize.scss',
'vendors/**/*.scss',
'ui/**/*.scss',
'layout/**/*.scss',
'page/**/*.scss'
]))
.pipe(sourcemaps.init())
.pipe(concat('style.scss'))
.pipe(sass({
includePaths: ['src/style/style.scss'],
outputStyle: 'expanded',
sourceMap: false,
errLogToConsole: true
}))
.pipe(prefixer({browsers: ['last 16 versions']}))
.pipe(gcmq())
.pipe(gulp.dest(path.build.css[i]))
.pipe(reload({stream: true}))
.pipe(cssmin())
.pipe(rename('style.min.css'))
.pipe(gulp.dest(path.build.css[i]));
}
});
gulp.task('inline-css:build', function () {
gulp.src(path.src.inlineStyle)
.pipe(plumber())
.pipe(concat('inline.scss'))
.pipe(sass({
includePaths: ['style/inline.scss'],
outputStyle: 'compact',
sourceMap: false,
errLogToConsole: true
}))
.pipe(prefixer({browsers: ['last 16 versions']}))
.pipe(gcmq())
.pipe(cssmin())
.pipe(rename('inline.html'))
.pipe(gulp.dest(path.build.inlineStyle))
.pipe(reload({stream: true}));
});
gulp.task('svg:build', function () {
for (var i = 0; i < typeProject; i++) {
return gulp.src(path.src.svgIcons)
.pipe(svgmin(function (file) {
var prefix = pathFnc.basename(file.relative, pathFnc.extname(file.relative));
return {
plugins: [{
cleanupIDs: {
prefix: prefix + '-',
minify: true
}
}]
}
}))
.pipe(rename({prefix: 'icon-'}))
.pipe(svgstore())
// .pipe(rename('sprite.html'))
.pipe(gulp.dest(path.build.media[i]))
.pipe(reload({stream: true}));
}
});
gulp.task('image:build', function () {
for (var i = 0; i < typeProject; i++) {
gulp.src(path.src.media)
// .pipe(imagemin({
// progressive: true,
// svgoPlugins: [{removeViewBox: false}],
// use: [pngquant()],
// interlaced: true
// }))
.pipe(gulp.dest(path.build.media[i]))
.pipe(reload({stream: true}));
}
});
gulp.task('fonts:build', function() {
for (var i = 0; i < typeProject; i++) {
gulp.src(path.src.fonts)
.pipe(gulp.dest(path.build.fonts[i]))
.pipe(reload({stream: true}))
}
});
gulp.task('build', [
'image:build',
'svg:build',
'js:build',
'json:build',
'style:build',
'inline-css:build',
'fonts:build',
'html:build',
]);
gulp.task('watch', function(){
watch([path.watch.media], function(event, cb) {
gulp.start('image:build');
});
watch([path.watch.style], function(event, cb) {
setTimeout(function () {
gulp.start('style:build');
}, 1000);
});
watch([path.watch.inlineStyle], function(event, cb) {
setTimeout(function () {
gulp.start('inline-css:build');
}, 1000);
});
watch([path.watch.js], function(event, cb) {
setTimeout(function () {
gulp.start('js:build');
}, 1000);
});
watch([path.watch.svgIcons], function(event, cb) {
setTimeout(function () {
gulp.start('svg:build');
}, 1000);
});
watch([path.watch.json], function(event, cb) {
setTimeout(function () {
gulp.start('json:build');
}, 1000);
});
watch([path.watch.html], function(event, cb) {
gulp.start('html:build');
});
watch([path.watch.fonts], function(event, cb) {
setTimeout(function () {
gulp.start('fonts:build');
}, 1000);
});
});
gulp.task('default', ['build', 'webserver', 'watch']);
gulp.task('prod', ['clean', 'build', 'watch']);
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question