Last active
September 30, 2015 20:49
-
-
Save Scribblerockerz/0bce0a98405c7fcf4160 to your computer and use it in GitHub Desktop.
Workflow with Sass compilation, JavaScript concatenation and image optimisation — so many *ation's
This file contains 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
/** | |
* Terminal shortcut: | |
* `npm install --save-dev gulp gulp-imagemin gulp-sass gulp-sourcemaps gulp-concat gulp-uglify gulp-rename` | |
*/ | |
var gulp = require('gulp'), | |
sass = require('gulp-sass'), | |
imagemin = require('gulp-imagemin'), | |
sourcemaps = require('gulp-sourcemaps'), | |
concat = require('gulp-concat'), | |
uglify = require('gulp-uglify'), | |
rename = require('gulp-rename'), | |
autoprefixer = require('gulp-autoprefixer'); | |
/** | |
* Compile scss to css | |
*/ | |
gulp.task('compile:css', function(){ | |
// Scan all scss files | |
gulp.src('assets/sass/**/*.scss') | |
// initalize sourcemaps | |
.pipe(sourcemaps.init()) | |
// compile sass files | |
.pipe(sass().on('error', sass.logError)) | |
// apply vendor prefixes | |
.pipe(autoprefixer({ | |
browsers: ['last 2 versions'], | |
cascade: false | |
})) | |
// write sourcemaps | |
.pipe(sourcemaps.write()) | |
// deliver assets | |
.pipe(gulp.dest('public/css')); | |
}); | |
/** | |
* Concatinate JavaScript files | |
*/ | |
gulp.task('concat:js', function(){ | |
// Scan all js files and attach the main init file to the end of the queue | |
gulp.src(['assets/js/**/!(init)*.js', 'assets/js/init.js']) | |
// initalize sourcemaps | |
.pipe(sourcemaps.init()) | |
// concat all files into common.js | |
.pipe(concat('common.js')) | |
// write sourcemaps | |
.pipe(sourcemaps.write()) | |
// deliver assets | |
.pipe(gulp.dest('public/js')) | |
// uglify current files in stream | |
.pipe(uglify()) | |
.pipe(rename({suffix: '.min'})) | |
// deliver assets | |
.pipe(gulp.dest('public/js')) | |
}); | |
/** | |
* Optimize images | |
*/ | |
gulp.task('optimize:images', function(){ | |
// scan images | |
gulp.src('assets/images/**/*') | |
// run through an optimizer | |
.pipe(imagemin({ | |
progressive: true, | |
svgoPlugins: [{removeViewBox: false}] | |
})) | |
// deliver images | |
.pipe(gulp.dest('public/images')); | |
}); | |
/** | |
* Watch files | |
*/ | |
gulp.task('watch', ['compile:css', 'concat:js', 'optimize:images'], function(){ | |
gulp.watch('assets/sass/**/*.scss', ['compile:css']); | |
gulp.watch('assets/js/**/*.js', ['concat:js']); | |
gulp.watch('assets/images/**/*', ['optimize:images']); | |
}); | |
/** | |
* Build | |
*/ | |
gulp.task('build', ['compile:css', 'concat:js', 'optimize:images']); | |
/** | |
* Kickouff workflow | |
*/ | |
gulp.task('default', ['watch']); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment