patternjavascriptMinor
Optimizing gulpfile.js
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/**/*
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:
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:
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:
I might be missing something but it seems pointless and confusing.
Same thing for the last one,
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.