Skip to content

Instantly share code, notes, and snippets.

@madeas
Last active July 18, 2019 13:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save madeas/e1b3910d8f8762c1abd9e36c90d52494 to your computer and use it in GitHub Desktop.
Save madeas/e1b3910d8f8762c1abd9e36c90d52494 to your computer and use it in GitHub Desktop.
Gulp 4 tasks for PUG+SCSS+JS and imagemin
const
gulp = require('gulp'),
pug = require('gulp-pug'),
sourcemaps = require('gulp-sourcemaps'),
concat = require('gulp-concat'),
cleanCSS = require('gulp-clean-css'),
mmq = require('gulp-merge-media-queries'),
babel = require('gulp-babel'),
uglify = require('gulp-uglify'),
cache = require('gulp-cache'),
imagemin = require('gulp-imagemin'),
imageminOptipng = require('imagemin-optipng'),
imageminZopfli = require('imagemin-zopfli'),
imageminMozjpeg = require('imagemin-mozjpeg');
gulp.task('pug', function buildHTML() {
return gulp.src('build/pug/pages/*.pug')
.pipe(pug({
pretty: true
}))
.pipe(gulp.dest('.'))
})
gulp.task('sass', () => {
return gulp.src(['global.css', '1.css', '2.css'].map(file => `build/css/${file}`))
.pipe(sourcemaps.init())
.pipe(concat('style.min.css'))
.pipe(mmq({
log: true
}))
.pipe(cleanCSS())
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('css'))
})
gulp.task('scripts', () => {
return gulp.src('build/js/*.js')
.pipe(sourcemaps.init())
.pipe(babel({
presets: ['@babel/preset-env']
}))
.pipe(concat('scripts.min.js'))
.pipe(uglify())
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('js'))
})
gulp.task('assembly', () => {
gulp.watch('build/pug/pages/*.pug', gulp.series('pug'))
gulp.watch('build/css/*.css', gulp.series('sass'))
gulp.watch('build/js/*.js', gulp.series('scripts'))
})
gulp.task('watch', gulp.series(gulp.parallel('pug', 'sass', 'scripts'), 'assembly'))
gulp.task('imagemin', () => {
return gulp.src('build/src/**/*.{png,jpg}')
.pipe(cache(imagemin([
imageminOptipng({
optimizationLevel: 5
}),
imageminZopfli({
more: true
}),
imagemin.jpegtran({
progressive: true
}),
imageminMozjpeg({
quality: 80
})
])))
.pipe(gulp.dest('src/new'))
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment