Created
January 16, 2021 21:00
-
-
Save murattcan/ce121aaaff6e89c6353708726f0ce528 to your computer and use it in GitHub Desktop.
Gulp task sample (css and js minify+concat, compress images, watching for changes)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Defining dependency variables | |
| var gulp = require('gulp'), | |
| cache = require('gulp-cache'), | |
| clean = require('gulp-clean'), | |
| stream = require('event-stream'), | |
| size = require('gulp-size'), | |
| jshint = require('gulp-jshint'), | |
| concat = require('gulp-concat'), | |
| uglify = require('gulp-uglify'), | |
| minifyCSS = require('gulp-minify-css'), | |
| rename = require('gulp-rename'), | |
| imagemin = require('gulp-imagemin'); | |
| // Checking for errors in scripts | |
| gulp.task('lint', function() { | |
| return gulp.src(['js/*.js', '!js/*.min.js', '!js/*jquery*', '!js/*bootstrap*']) | |
| .pipe(jshint()) | |
| .pipe(jshint.reporter('default')); | |
| }); | |
| // Concatenate and minify styles | |
| // When specifying sources in gulp.src, the order in which they are specified is taken into account, | |
| // that is, the first in the final file will be the bootstrap styles, because we have to | |
| // first declare them so that you can override them with your own styles | |
| // The same goes for scripts - we first declare dependencies and only then | |
| // connect our scripts (for example, jquery will always be the first if it is used | |
| // in the project, and then all the other scripts) | |
| gulp.task('styles', function() { | |
| return gulp.src(['css/*bootstrap*', 'css/*.css']) | |
| .pipe(concat('styles.min.css')) | |
| .pipe(minifyCSS({ | |
| keepBreaks: true | |
| })) | |
| .pipe(gulp.dest('production/css')); | |
| }); | |
| // Concatenate and minify scripts | |
| // Two contexts stand out here - jquery plugins / our scripts and dependencies (without which | |
| // at least one of our scripts will not work, for example jquery) | |
| // Since this is just an example, the best option would be to split into main and | |
| // auxiliary scripts (for example, main scripts - jquery / bootstrap and auxiliary scripts - lightbox / fotorama) | |
| gulp.task('scripts', function() { | |
| var js = gulp.src(['js/*.js', '!js/*jquery*', '!js/*bootstrap*']) | |
| .pipe(concat('all.min.js')) | |
| .pipe(uglify()) | |
| .pipe(size({ | |
| title: 'size of custom js' | |
| })) | |
| .pipe(gulp.dest('production/js')); | |
| var jsDeps = gulp.src(['js/*jquery*', 'js/*bootstrap*']) | |
| .pipe(concat('main.js')) | |
| .pipe(size({ | |
| title: 'size of js dependencies' | |
| })) | |
| .pipe(gulp.dest('production/js')); | |
| stream.concat(js, jsDeps); | |
| }); | |
| // Compress images (we cache to compress only changed images) | |
| // optimizationLevel is the number of passes, the parameter range is 0-7, and starting from 1, the compression is enabled | |
| gulp.task('images', function () { | |
| return gulp.src(['images/*', '!images/*.db']) | |
| .pipe(cache(imagemin({ | |
| optimizationLevel: 5, | |
| progressive: true, | |
| interlaced: true | |
| }))) | |
| .pipe(size({ | |
| title: 'size of images' | |
| })) | |
| .pipe(gulp.dest('production/images')); | |
| }); | |
| // Clean the destination directory and rebuild so that the files removed from the project do not remain | |
| gulp.task('clean', function() { | |
| return gulp.src(['production/css', 'production/js', 'production/images'], {read: false}) | |
| .pipe(clean()); | |
| }); | |
| // Watch for changes and auto-build | |
| // After the first run (gulp command in the console) execute gulp watch, | |
| // to keep track of changes and automatically rebuild sources taking into account | |
| // last changes | |
| gulp.task('watch', function() { | |
| gulp.watch('js/*.js', ['lint', 'scripts']); | |
| gulp.watch('css/*.css', ['styles']); | |
| gulp.watch('images/*', ['images']); | |
| }); | |
| // Do it by default (first clean up and rebuild the destination directory, and then perform other tasks) | |
| gulp.task('default', ['clean'], function() { | |
| gulp.start('styles', 'scripts', 'images'); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment