const gulp = require('gulp');
const gulpHtml = require('gulp-html');
const webpackStream = require('webpack-stream');
const gulpAutoprefix = require('gulp-autoprefixer');
const gulpSass = require('gulp-sass');
const gulpWatch = require('gulp-watch');
const gulpSourceMap = require('gulp-sourcemaps');
const browserSync = require('browser-sync').create();
const gulpStylelint = require('gulp-stylelint');
const gulpImage = require('gulp-image');
const historyFallback = require('connect-history-api-fallback');
const webpackConfig = require('./webpack.config.js');
export const stylesheets = () => {
return gulp.src('./src/scss/**/*.scss')
.pipe(gulpStylelint({
failAfterError: false,
reporters : [
{
formatter: 'string',
console : true,
fix : true,
},
],
}))
.pipe(gulpSourceMap.init())
.pipe(gulpSass({
outputStyle: 'compressed',
})).on('error', gulpSass.logError)
.pipe(gulpAutoprefix({
browsers: ['last 2 versions'],
}))
.pipe(gulpSourceMap.write())
.pipe(gulp.dest('./dev/css/'))
.pipe(browserSync.stream());
};
export const stylesheetsProduction = () => {
return gulp.src('./src/scss/**/*.scss')
.pipe(gulpStylelint({
failAfterError: true,
reporters : [
{
formatter: 'string',
console : true,
fix : true,
},
],
}))
.pipe(gulpSass({
outputStyle: 'compressed',
})).on('error', gulpSass.logError)
.pipe(gulpAutoprefix({
browsers: ['last 2 versions'],
}))
.pipe(gulp.dest('./build/css/'));
};
export const js = () => {
return gulp.src('./src/js/main.js')
.pipe(webpackStream(webpackConfig))
.pipe(gulp.dest('./dev/js'))
.pipe(browserSync.stream());
};
export const jsProduction = () => {
webpackConfig.watch = false;
gulp.src('./src/js/main.js')
.pipe(webpackStream(webpackConfig))
.pipe(gulp.dest('./build/js'));
};
export const image = () => {
return gulp.src('./src/images/*')
.pipe(gulpImage())
.pipe(gulp.dest('./dev/images'))
.pipe(browserSync.stream());
};
export const imageProduction = () => {
return gulp.src('./src/images/*')
.pipe(gulpImage())
.pipe(gulp.dest('./build/images'));
};
export const html = () => {
return gulp.src('./src/template/**/*.html')
.pipe(gulpHtml())
.pipe(gulp.dest('./dev'))
.pipe(browserSync.stream());
};
export const htmlProduction = () => {
return gulp.src('./src/template/**/*.html')
.pipe(gulpHtml())
.pipe(gulp.dest('./build'));
};
const watch = () => {
gulpWatch(['./src/scss/**/*.scss'], () => {
gulp.start('stylesheets');
});
gulpWatch(['./src/images/**/*'], () => {
gulp.start('image');
});
gulpWatch(['./src/template/**/*.html'], () => {
gulp.start('html');
});
};
const server = () => {
return gulp.series(function () {
browser.init({
server: {
baseDir : './dev',
middleware: [
historyFallback(),
],
},
open : true,
port : 8080,
});
});
};
// ХЗ что это такое....
// gulp.task('server', gulp.series('build', function () {
// browser.init({
// server: {
// baseDir : './dev',
// middleware: [
// historyFallback(),
// ],
// },
// open : true,
// port : 8080,
// });
// }));
export const development = gulp.series(
gulp.parallel(
stylesheets,
js,
image,
html,
),
gulp.parallel(
watch,
server,
),
);
export const production = gulp.parallel(
stylesheetsProduction,
jsProduction,
imageProduction,
htmlProduction,
);
