HiveBrain v1.2.0
Get Started
← Back to all entries
patternjavascriptMinor

Optimizing gulpfile.js

Submitted by: @import:stackexchange-codereview··
0
Viewed 0 times
optimizinggulpfilestackoverflow

Problem

I'm fairly new to JavaScript and Gulp. I was following this article for creating my gulpfile, trying to follow best practices, but it seems to me that this peace of code can be optimized and written better.

Can you please give me some advice on how can I improve this code?

Git repo can be found here: git@g.vova.io:Skok/jekyll-gulp.git

```
var gulp = require('gulp'),
sass = require('gulp-sass'),
browserSync = require('browser-sync'),
autoprefixer = require('gulp-autoprefixer'),
uglify = require('gulp-uglify'),
jshint = require('gulp-jshint'),
header = require('gulp-header'),
rename = require('gulp-rename'),
minifyCSS = require('gulp-minify-css'),
concat = require('gulp-concat'),
cp = require('child_process'),
notify = require('gulp-notify'),
size = require('gulp-size'),
imageResize = require('gulp-image-resize'),
imageMin = require('gulp-imagemin'),
cwebp = require('gulp-cwebp'),
plumber = require('gulp-plumber'),
beep = require('beepbeep'),
gutil = require('gulp-util'),

reload = browserSync.reload;

package = require('./package.json');
var banner = [
'/*!\n' +
' * \n' +
' * \n' +
' * \n' +
' * @author \n' +
' * @version \n' +
' * Copyright ' + new Date().getFullYear() + '. licensed.\n' +
' */',
'\n'
].join('');

// create system beeps & highlight error messages on error
var onError = function (err) {
beep([0, 0, 0]);
gutil.log(gutil.colors.green(err));
};

// copy task for copying bower assests
gulp.task('copy', function() {
return gulp.src('bower_components/bootstrap-sass-official/assets/stylesheets/**/*

Solution

Duplication

Some strings appear suspiciously often:

  • build/images



  • build/css



  • assets/images



  • assets/js



  • assets/scss



It might be a good idea to extract these to constants. Maybe you will never change their values, but variables would have the advantage of easy autocompletion in a descent IDE.

Also, this array appears twice, and might be useful to put it in a variable near the top where it's easier to find and edit:

['*.html', '*.md', '_posts/*', '_includes/*', '_layouts/*']


Semicolons

You're using semicolons inconsistently: sometimes you end statements with it, sometimes you don't. jshint.com recommends to use them. Or at least you can be consistent about it and either use them always or never.

Correctness

What's the point of the commas at the end of each statement inside the function:

gulp.task('default', ['sass', 'js', 'images', 'jekyll-build'], function () {
    gulp('assets/scss/**/*.scss', ['sass']),
    gulp('assets/js/**/*.js', ['js']),
    gulp('assets/images/*', ['images']),
    gulp(['*.html', '*.md', '_posts/*', '_includes/*', '_layouts/*'], ['jekyll-build']);
});


I might be missing something but it seems pointless and confusing.

Same thing for the last one, gulp.task('watch', ...

Code Snippets

['*.html', '*.md', '_posts/*', '_includes/*', '_layouts/*']
gulp.task('default', ['sass', 'js', 'images', 'jekyll-build'], function () {
    gulp('assets/scss/**/*.scss', ['sass']),
    gulp('assets/js/**/*.js', ['js']),
    gulp('assets/images/*', ['images']),
    gulp(['*.html', '*.md', '_posts/*', '_includes/*', '_layouts/*'], ['jekyll-build']);
});

Context

StackExchange Code Review Q#62986, answer score: 3

Revisions (0)

No revisions yet.