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!
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'));
});
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'));
});
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 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'))
});
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 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'));
});
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']);
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