Exploration #4

Gulp

What is Gulp?

Gulp is a toolkit for automating time-consuming tasks used in the development workflow.

Because Gulp is working on the backend on your server, there isn't a good way to show what its doing on a webpage.

Instead, below are listed some of the basic functions that can done with Gulp. Check them out!

Copy HTML

This function allows you to copy any changes to your HTML files that you want to publish to your live site.

                
                    gulp.task('html', function(){
                        gulp.src('src/*.html')
                        .pipe(gulp.dest('dist'));
                    });
                
            

ImageMin

This function minifies images from your source, making the use less storage on your distribution.

                
                    gulp.task('imageMin', function(){
                        gulp.src('src/images/*')
                        .pipe(imagemin())
                        .pipe(gulp.dest('dist/images'));
                    });
                
            

Minify

This function, similarly to the one above, minifies your JavaScript files to take up less space.

                
                    gulp.task('minify', function(){
                        gulp.src('src/js/*.js')
                        .pipe(uglify())
                        .pipe(gulp.dest('dist/js'));
                    });
                
            

SASS

SASS is a CSS extension language that makes designing a bit more fun and easy. This function converts your SASS files to CSS.

                
                    gulp.task('sass', function(){
                        gulp.src('src/sass/*.scss')
                        .pipe(sass().on('error', sass.logError))
                        .pipe(gulp.dest('dist/css'))
                    });
                
            

JavaScript Concatenation

This function concatenates all your JavaScript files into one file for distribution. This along with minify will help you use less storage.

                
                    gulp.task('scripts', function(){
                        gulp.src('src/js/*.js')
                        .pipe(concat('main.js'))
                        .pipe(uglify())
                        .pipe(gulp.dest('dist/js'));
                    });
                
            

JSHint

JSHint is a troubeshooting/error checking tool that makes it easier to see where you messed up code.

                
                    gulp.task('hint', function(){
                        gulp.src('src/sass/*.scss')
                        .pipe(jshint())
                        .pipe(jshint.reporter('default'));
                    });
                
            

Default

The default function runs whenever you simply type 'gulp' in the command line. You can code it to run anything you want, but in this case, it runs all the other functions together.

                
                    gulp.task('default', ['message', 'html', 'imageMin', 'sass', 'scripts', 'hint']);
                
            

Watch

The watch function is a useful tool for automatically updating your distrubition files whenever you save to your source files. It will update whatever files you point it at whenver it sees a change has been made.

                
                    gulp.task('watch', function(){
                        gulp.watch('src/js/*.js', ['scripts']);
                        gulp.watch('src/images/*', ['imageMin']);
                        gulp.watch('src/sass/*.scss', ['sass']);
                        gulp.watch('src/*.html', ['html']);
                    });
                
            

jbrooks.us - Josh Brooks