Skip to content

Instantly share code, notes, and snippets.

@wouterds

wouterds/Gulpfile.js

Created Jun 28, 2015
Embed
What would you like to do?
Personal Gulpfile barebone
/**
* Gulpfile
*/
var Gulpfile = function() {
// Paths
var paths = {
dest: 'public/**/',
scripts: {
src: 'resources/scripts/',
dest: 'public/js/',
destVendor: 'public/js/vendor/'
},
styles: {
src: 'resources/scss/',
dest: 'public/css/'
},
images: {
src: 'resources/images/',
dest: 'public/images/'
},
bower: {
components: 'bower_components/'
}
};
// Filters
var filters = {
scripts: '**/*.js',
styles: '**/*.scss',
everything: '**/*'
};
// Requirements
var requirements = [
'del',
'gulp',
'gulp-sass',
'gulp-bower',
'gulp-cache',
'gulp-jshint',
'gulp-uglify',
'gulp-rename',
'gulp-concat',
'gulp-notify',
'gulp-filter',
'gulp-imagemin',
'gulp-livereload',
'main-bower-files',
'gulp-autoprefixer'
];
/**
* Init
*/
var init = function() {
// Get requirements
initRequirements();
// Register tasks
registerTasks();
};
/**
* Init requirements
*/
var initRequirements = function() {
var tmpRequirements = {};
// Get requirements
requirements.forEach(function(requirement) {
tmpRequirements[dashesToCamelCase(requirement)] = require(requirement);
});
requirements = tmpRequirements;
};
/**
* Register tasks
*/
var registerTasks = function() {
// Register default task, clean will be executed before default
requirements.gulp.task('default', ['clean'], taskDefault);
// Register clean task
requirements.gulp.task('clean', taskClean);
// Register clean:bower task, bower:main-files will be executed before bower:clean
requirements.gulp.task('clean:bower', ['bower:main-files'], taskCleanBower);
// Register bower:main-files task, bower:install will be executed before bower:main-files
requirements.gulp.task('bower:main-files', ['bower:install'], taskBowerMainFiles);
// Register bower:install task
requirements.gulp.task('bower:install', taskBowerIntall);
// Register styles task
requirements.gulp.task('styles', taskStyles);
// Register scripts task
requirements.gulp.task('scripts', taskScripts);
// Register images task
requirements.gulp.task('images', taskImages);
// Register watch task
requirements.gulp.task('watch', taskWatch);
};
/**
* Gulp task: default
* Start our main tasks: bower, styles, scripts & image compression
*/
var taskDefault = function() {
requirements.gulp.start('clean:bower', 'styles', 'scripts', 'images');
};
/**
* Gulp task: bower
* Download our bower components
*/
var taskBowerIntall = function() {
return requirements.gulpBower();
};
/**
* Gulp task: clean
* Delete old generated stuff
*/
var taskClean = function(callback) {
requirements.del([paths.styles.dest, paths.scripts.dest, paths.images.dest], callback);
};
/**
* Gulp task: clean:bower
* Separate clean task because all tasks run asynchronously and we have a few dependencies before we can clean bower.
*/
var taskCleanBower = function(callback) {
requirements.del([paths.bower.components], callback);
};
/**
* Gulp task: bower:main-files
* This task will fetch all main js files, inify them & move them to our js vendor.
* However it can be extended in the future to do this as well for fonts, css, ..
*/
var taskBowerMainFiles = function() {
var jsFilter = requirements.gulpFilter(filters.scripts);
return requirements.gulp.src(requirements.mainBowerFiles())
.pipe(jsFilter)
.pipe(requirements.gulpUglify())
.pipe(requirements.gulp.dest(paths.scripts.destVendor))
.pipe(jsFilter.restore())
.pipe(requirements.gulpNotify({ message: 'Bower main files copied' }));
};
/**
* Gulp task: styles
* This task will compile our scss to minified css & fix vendor prefixes.
*/
var taskStyles = function() {
return requirements.gulp.src(paths.styles.src + filters.styles)
.pipe(requirements.gulpSass({ outputStyle: 'compressed' }))
.pipe(requirements.gulpAutoprefixer('last 2 version'))
.pipe(requirements.gulp.dest(paths.styles.dest))
.pipe(requirements.gulpNotify({ message: 'Styles compiled' }));
};
/**
* Gulp task: scripts
* This task will validate our js & uglify/minify it.
*/
var taskScripts = function() {
return requirements.gulp.src(paths.scripts.src + filters.scripts)
.pipe(requirements.gulpJshint('.jshintrc'))
.pipe(requirements.gulpJshint.reporter('default'))
.pipe(requirements.gulpUglify())
.pipe(requirements.gulp.dest(paths.scripts.dest))
.pipe(requirements.gulpNotify({ message: 'Scripts compiled' }));
};
/**
* Gulp task: images
* This task will compress our images if needed.
*/
var taskImages = function() {
var imagemin = requirements.gulpImagemin({
optimizationLevel: 5,
progressive: true,
interlaced: true
});
return requirements.gulp.src(paths.images.src + filters.everything)
.pipe(requirements.gulpCache(imagemin))
.pipe(requirements.gulp.dest(paths.images.dest))
.pipe(requirements.gulpNotify({ message: 'Images compressed' }));
};
/**
* Gulp task: watch
* This task watches specific folders for specific files and executes the matching task for it.
*/
var taskWatch = function() {
// Watch for style changes
requirements.gulp.watch(paths.styles.src + filters.styles, ['styles']);
// Watch for js changes
requirements.gulp.watch(paths.scripts.src + filters.scripts, ['scripts']);
// Watch for images changes
requirements.gulp.watch(paths.images.src + filters.everything, ['images']);
// Start livereload server
requirements.gulpLivereload.listen();
// Watch dest folder, if anything changes, trigger livereload
requirements.gulp.watch([paths.dest]).on('change', requirements.gulpLivereload.changed);
};
/**
* Dashed string to camel case
*
* @param {string} str
* @return {string}
*/
var dashesToCamelCase = function(str) {
return str.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); });
};
// Go go go
init();
};
new Gulpfile();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment