Skip to content

Instantly share code, notes, and snippets.

@Scribblerockerz
Last active September 30, 2015 20:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Scribblerockerz/0bce0a98405c7fcf4160 to your computer and use it in GitHub Desktop.
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
/**
* 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