-
-
Save mtraynham/b09ce6d2fa3cf076b93e to your computer and use it in GitHub Desktop.
My gulpfile example for How to enhance your front-end development workflow using Gulp
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* 0x1ad2 base Gulp.js file | |
* https://twitter.com/0x1ad2 | |
*/ | |
/* | |
* Define plugins | |
*/ | |
var gulp = require('gulp'); | |
var $ = require('gulp-load-plugins')(); | |
var jshintStylish = require('jshint-stylish'); | |
/* | |
* Define paths | |
*/ | |
var paths = { | |
scripts: './public/js/*.js', | |
css: './public/css/*.css', | |
dist: './public/dist' | |
}; | |
/* | |
* Lint your JavaScript | |
*/ | |
gulp.task('js-lint', function () { | |
return gulp.src(paths.scripts) | |
.pipe($.jshint()) | |
.pipe($.jshint.reporter(jshintStylish)); | |
}); | |
/* | |
* Lint your CSS | |
*/ | |
gulp.task('css-lint', function () { | |
return gulp.src(paths.css) | |
.pipe($.csslint()) | |
.pipe($.csslint.reporter()); | |
}); | |
/* | |
* Beautify your CSS | |
*/ | |
gulp.task('beautify-css', ['css-lint'], function () { | |
return gulp.src(paths.css) | |
.pipe($.cssbeautify()) | |
.pipe(gulp.dest('./public/css/')); | |
}); | |
/* | |
* Beautify your JavaScript | |
*/ | |
gulp.task('beautify-js', ['js-lint'], function () { | |
return gulp.src(paths.scripts) | |
.pipe($.jsbeautifier({ | |
config: '.jsbeautifyrc', | |
mode: 'VERIFY_AND_WRITE' | |
})) | |
.pipe(gulp.dest('./public/js/')); | |
}); | |
/* | |
* Strip, prefix, minify and concatenate your CSS during a deployment | |
*/ | |
gulp.task('css-dist', ['beautify-css'], function () { | |
$.util.log('Gulp.js:', $.util.colors.red('• enable gulp-plumber')); | |
$.util.log('Gulp.js:', $.util.colors.red('• run CSS tasks for distribution')); | |
$.util.log('Gulp.js:', $.util.colors.red('• strip comments, add prefixes, minify files,')); | |
$.util.log('Gulp.js:', $.util.colors.red(' concatenate files, gzip files and write files to destination folder')); | |
$.util.log('Gulp.js:', $.util.colors.red('• finished running CSS tasks for distribution')); | |
$.util.beep(); | |
return gulp.src(paths.css) | |
.pipe($.plumber()) | |
.pipe($.stripComments()) | |
.pipe($.autoprefixer({ | |
browsers: ['last 2 versions'], | |
cascade: false | |
})) | |
.pipe($.concat('style.css'), {newLine: ''}) | |
.pipe($.minifyCss({compatibility: 'ie8'})) | |
.pipe($.gzip()) | |
.pipe(gulp.dest(paths.dist)); | |
}); | |
/* | |
* Strip, minify and concatenate your JavaScript during a deployment | |
*/ | |
gulp.task('js-dist', ['beautify-js'], function () { | |
$.util.log('Gulp.js:', $.util.colors.red('• enable gulp-plumber')); | |
$.util.log('Gulp.js:', $.util.colors.red('• run JavaScript tasks for distribution')); | |
$.util.log('Gulp.js:', $.util.colors.red('• strip comments, minify files,')); | |
$.util.log('Gulp.js:', $.util.colors.red(' concatenate files, gzip files and write files to destination folder')); | |
$.util.log('Gulp.js:', $.util.colors.red('• finished running CSS tasks for distribution')); | |
$.util.beep(); | |
return gulp.src(paths.scripts) | |
.pipe($.plumber()) | |
.pipe($.stripComments()) | |
.pipe($.uglify()) | |
.pipe($.concat('main.js'), {newLine: ';'}) | |
.pipe($.gzip()) | |
.pipe(gulp.dest(paths.dist)); | |
}); | |
/* | |
* Watchers | |
*/ | |
gulp.task('watch', function () { | |
gulp.watch(paths.scripts, ['beautify-js']); | |
gulp.watch(paths.css, ['beautify-css']); | |
gulp.watch(paths.scripts, ['js-lint']); | |
gulp.watch(paths.css, ['css-lint']); | |
}); | |
/* | |
* Run multiple tasks at the same time | |
*/ | |
gulp.task('default', ['css-dist', 'js-dist']); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment