function img() {
return gulp.src(paths.images.src, {
encoding: false
})
.pipe(imagemin())
.pipe(gulp.dest(paths.images.dest));
}npm uninstall gulp-imagemin --save-devnpm install gulp-imagemin@7.1.0 --save-devconst imagemin = require('gulp-imagemin');
gulp.task('clean:dist', function() {
return del(['./dist/**', '!./dist/images/**']);
});
gulp.task('build', gulp.series('clean:dist', gulp.parallel('sass', 'useref', 'images', 'fonts')));gulp.перед parallel
usePollingwatch(["app/**/*.scss"], { usePolling: true }, styles);npm install gulp sass browser-sync del --save-dev// gulpfile.js
'use strict';
const { src, dest, lastRun, watch, series, parallel } = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const browserSync = require('browser-sync').create();
const del = require('del');
const path = {
templates: {
src: 'src/templates/*.html',
dest: 'build',
watching: 'src/templates/**/*.html',
},
styles: {
src: 'src/styles/main.scss',
dest: 'build/assets/css',
watching: 'src/styles/parsials/**/*.scss',
},
fonts: {
src: 'src/fonts/*',
dest: 'build',
watching: 'src/fonts/**/*',
},
images: {
src: 'src/images/*',
dest: 'build',
watching: 'src/images/**/*',
},
};
function cleanup() {
return del([path.build]);
}
function server() {
browserSync.init({
server: {
baseDir: './build/',
},
port: 3004,
open: false,
notify: true,
browser: 'default',
online: true,
// logLevel: 'debug',
});
}
function templates() {
return src(path.templates.src)
.pipe(dest(path.templates.dest))
.on('end', browserSync.reload);
}
function styles() {
return src(path.styles.src)
.pipe(sass.sync())
.pipe(dest(path.styles.dest))
.on('end', browserSync.reload);
}
function watching() {
watch(path.templates.watching, series('templates'));
watch(path.styles.watching, series('styles'));
watch(path.images.watching, series('images'));
}
exports.default = series(templates, styles);
exports.development = series(cleanup, exports.default, parallel(watching, server));// package.json добавить
.....
"scripts": {
"start": "gulp development",
},
.......npm run start
const wait = require('gulp-wait');
gulp.task('html', function() {
return gulp.src(path.html)
.pipe(gulp.dest(path.html))
/* wait */
.pipe(wait(200))
.pipe(connect.reload());
});[
`${PATHS.doc}/**/*.*`,
`${PATHS.pic}/**/*.*`,
`!${PATHS.pic}/**/*.+(pdn|psd|ai)`
][
`${PATHS.doc}/**/*.!(pdn|psd|ai)`,
`${PATHS.pic}/**/*.*`
]function build() {
return gulp.src([
`${PATHS.doc}/**/*.*`,
`${PATHS.pic}/**/*.*`
],{
ignore: `${PATHS.pic}/**/*.+(pdn|psd|ai)`
})
.pipe(gulp.dest("./dist/"));
}const gulp = require('gulp');
const browserSync = require('browser-sync').create();
const sass = require('gulp-sass');
const cleanCSS = require('gulp-clean-css');
const autoprefixer = require('gulp-autoprefixer');
const rename = require("gulp-rename");
const imagemin = require('gulp-imagemin');
const htmlmin = require('gulp-htmlmin');
gulp.task('server', function() {
browserSync.init({
server: {
baseDir: "./dist/"
}
});
browserSync.watch("./dist/**/*.*").on('change', browserSync.reload);
});
gulp.task('styles', function() {
return gulp.src("src/sass/**/*.+(scss|sass)")
.pipe(sass({ outputStyle: 'compressed' }).on('error', sass.logError))
.pipe(rename({ suffix: '.min', prefix: '' }))
.pipe(autoprefixer())
.pipe(cleanCSS({ compatibility: 'ie8' }))
.pipe(gulp.dest("dist/css"));
});
gulp.task('html', function() {
return gulp.src("src/*.html")
.pipe(htmlmin({ collapseWhitespace: true }))
.pipe(gulp.dest('dist/'));
});
gulp.task('scripts', function() {
return gulp.src("src/js/**/*.js")
.pipe(gulp.dest('dist/js'));
});
gulp.task('icons', function() {
return gulp.src("src/icons/**/*")
.pipe(gulp.dest('dist/icons'));
});
gulp.task('images', function() {
return gulp.src("src/img/**/*")
.pipe(imagemin())
.pipe(gulp.dest('dist/img'));
});
gulp.task('watch', function() {
gulp.watch("src/sass/**/*.+(scss|sass|css)", gulp.series('styles'));
gulp.watch("src/*.html", gulp.series('html'));
});
gulp.task('default', gulp.series('styles', 'scripts', 'icons', 'html', 'images', gulp.parallel('watch', 'server')));var { src, dest, watch, series, parallel } = require('gulp'),
del = require('del'),
gulpif = require('gulp-if'),
sass = require('gulp-sass'),
autoprefixer = require('gulp-autoprefixer'),
cleanCSS = require('gulp-clean-css'),
browserSync = require('browser-sync').create(),
uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
rename = require('gulp-rename'),
/* Environment Variables */
isDevelopment = !process.env.NODE_ENV || process.env.NODE_ENV === 'development',
isSourcemaps = isDevelopment ? true : false;
function clear() {
return del('./build/');
}
function html() {
return src('./app/**/*.html')
.pipe(dest('./build/'));
}
function styles() {
return src('./app/scss/**/*.scss', {
sourcemaps: isSourcemaps,
})
.pipe(sass.sync({
outputStyle: 'comprossed'
}).on('error', sass.logError))
.pipe(autoprefixer({
browsers: [' last 2 version '],
cascade: false,
}))
.pipe(rename({
suffix: '.min',
}))
.pipe(gulpif(!isDevelopment, cleanCSS({
compatibility: 'ie8',
level: 2,
})))
.pipe(dest('./build/css/', {
sourcemaps: isSourcemaps
}));
}
function scripts() {
return src(['node_modules/slick-carousel/slick/slick.js'], {
sourcemaps: isSourcemaps,
})
.pipe(concat('libs.min.js'))
.pipe(gulpif(!isDevelopment, uglify({
toplevel: true,
})))
.pipe(dest('./build/js/', {
sourcemaps: isSourcemaps
}));
}
function server() {
browserSync.init({
browserSync: {
server: {
baseDir: './build/',
},
port: 3004,
open: true,
notify: true,
browser: 'default',
},
});
browserSync.watch('./build/**/*.*').on('change', browserSync.reload);
}
function watch() {
watch('./app/scss/**/*.scss', series('styles'));
watch('./app/js/**/*.js', series('scripts'));
watch('./app/**/*.html', series('html'));
}
exports.server = server;
exports.clear = clear;
exports.html = html;
exports.styles = styles;
exports.scripts = scripts;
exports.watch = watch;
exports.default = series(html, styles, scripts);
exports.dev = series(clear, exports.default, parallel(watch, server));
exports.build = series(clear, exports.default);module.exports = function() {
$.gulp.task('pug', ()=> {
return $.gulp.src('./dev/pug/pages/*.pug')
/* gulp-newer*/
.pipe(newer({
dest: './build/',
extra: './dev/pug/{components,data,decorators,helpers,layouts,partials}/**/*.*'
}))
.pipe($.gp.pug({
locals : {
nav: JSON.parse($.fs.readFileSync('./data/navigation.json', 'utf8')),
content: JSON.parse($.fs.readFileSync('./data/content.json', 'utf8')),
},
pretty: true
}))
.on('error', $.gp.notify.onError(function(error) {
return {
title: 'Pug',
message: error.message
};
}))
.pipe($.gulp.dest('./build/'))
.on('end', $.browserSync.reload);
});
});gulp.task('style:build', function() {
gulp.src(path.src.style, { sourcemaps: true })
//.pipe(sassGlob())
.pipe(plumber({
errorHandler: notify.onError("Error: <%= error.message %>")
}))
.pipe(sass().on('error', sass.logError))
.pipe(prefixer())
//.pipe(cssmin())
.pipe(gulp.dest(path.build.css, { sourcemaps: true }))
.pipe(browserSync.stream());
});