Skip to content

Instantly share code, notes, and snippets.

@Rotron
Last active February 14, 2020 12:51
Show Gist options
  • Save Rotron/3da8df73f32e0450df515ce211237b59 to your computer and use it in GitHub Desktop.
Save Rotron/3da8df73f32e0450df515ce211237b59 to your computer and use it in GitHub Desktop.
Gulp 4.x Configuration Pack-js pack-css minify-html
npm install --save-dev gulp gulp-concat gulp-clean-css gulp-minify gulp-htmlmin gulp-html-replace
var gulp = require('gulp');
var concat = require('gulp-concat');
var minify = require('gulp-minify');
var cleanCss = require('gulp-clean-css');
var htmlmin = require('gulp-htmlmin');
var htmlreplace = require('gulp-html-replace');
gulp.task('pack-js', function () {
return gulp.src(['js/*.js'])
.pipe(concat('bundle.js'))
.pipe(minify())
.pipe(gulp.dest('build/js'));
});
gulp.task('pack-css', function () {
return gulp.src(['css/loader.css', 'css/custom.css'])
.pipe(concat('stylesheet.css'))
.pipe(cleanCss())
.pipe(gulp.dest('build/css'));
});
gulp.task('minify-html', () => {
return gulp.src('indexmini.html')
.pipe(htmlmin({ collapseWhitespace: true }))
.pipe(gulp.dest('build'));
});
gulp.task('html-replace', function() {
gulp.src('index.html')
.pipe(htmlreplace({
'css': 'styles.min.css',
'js': 'js/bundle.min.js'
}))
.pipe(gulp.dest('build/'));
});
gulp.task('default', gulp.series('pack-js', 'pack-css', 'html-replace','minify-html'));
<!-- build:css -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<!-- endbuild -->
</head>
<body>
<!-- build:js -->
<script src="js/player.js"></script>
<script src="js/monster.js"></script>
<script src="js/world.js"></script>
<!-- endbuild -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment