Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
It's easy to use: Gulp
let gulp = require('gulp');
let clean = require('gulp-clean');
let concat = require('gulp-concat');
let replace = require('gulp-replace');
let minifyCSS = require('gulp-clean-css');
let uglify = require('gulp-uglify-es').default;
let htmlmin = require('gulp-htmlmin');
let autoprefixer = require('gulp-autoprefixer');
let merge = require('merge-stream');
// Location to our files
let globs = {
dist: './dist',
css: './src/css/*.css',
js: './src/js/*.js',
html: './src/*.html',
images: './src/assets/**',
fonts: './src/fonts/**'
};
// Step: 1 - This will delete the folder and re-create it
gulp.task('clean', gulp.series(function() {
return gulp.src(globs.dist, {read: false})
.pipe(clean());
}));
// Step: 2 - Just copy fonts/ folder
gulp.task('fonts', gulp.series('clean', function() {
return gulp.src(globs.fonts)
.pipe(gulp.dest(globs.dist + '/fonts'));
}));
// Step: 3 - CSS processing
gulp.task('styles', gulp.series('clean', function() {
return gulp.src(globs.css)
.pipe(concat('main.min.css'))
.pipe(autoprefixer())
.pipe(minifyCSS())
.pipe(gulp.dest(globs.dist + '/css'));
}));
// Step: 4 - JS processing
gulp.task('js', gulp.series('clean', function() {
return gulp.src(globs.js)
.pipe(concat('app.min.js'))
.pipe(uglify())
.pipe(gulp.dest(globs.dist + '/js'));
}));
// Step: 5 - Image processing
gulp.task('assets', gulp.series('clean', function() {
return gulp.src(globs.js)
.pipe(imagemin())
.pipe(gulp.dest(globs.dist + '/assets'));
}));
// Step: 6 - HTML processing
gulp.task('html', gulp.series('clean', function() {
return gulp.src(globs.html)
.pipe(replace(`<link rel="stylesheet" href="css/01-style1.css">`, ''))
.pipe(replace(`<link rel="stylesheet" href="css/02-style2.css">`, ''))
// Replace this with our one `main.min.css` file
.pipe(replace(`<link rel="stylesheet" href="css/03-style3.css">`, '<link rel="stylesheet" href="css/main.min.css">'))
.pipe(replace(`<script src="js/01-app1.js"></script>`, ''))
.pipe(replace(`<script src="js/02-app2.js"></script>`, ''))
.pipe(replace(`<script src="js/03-app3.js"></script>`, '<script src="js/app.min.js"></script>'))
.pipe(htmlmin({
collapseWhitespace: true,
removeComments: true
}))
.pipe(gulp.dest('./dist'));
}));
// Step: 7 - Build the task
gulp.task('build', gulp.parallel('fonts', 'styles', 'js', 'assets', 'html'));
gulp.task('default', gulp.series('build'));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.