Skip to content

Instantly share code, notes, and snippets.

@diegoliv
Last active January 4, 2016 19:29
Show Gist options
  • Save diegoliv/8667555 to your computer and use it in GitHub Desktop.
Save diegoliv/8667555 to your computer and use it in GitHub Desktop.
My basic setup of a gulpfile.js.
var gulp = require( 'gulp' ),
less = require( 'gulp-less' ),
autoprefixer = require( 'gulp-autoprefixer' ),
minifycss = require( 'gulp-minify-css' ),
jshint = require( 'gulp-jshint' ),
uglify = require( 'gulp-uglify' ),
imagemin = require( 'gulp-imagemin' ),
rename = require( 'gulp-rename' ),
clean = require( 'gulp-clean' ),
concat = require( 'gulp-concat' ),
notify = require( 'gulp-notify' ),
cache = require( 'gulp-cache' ),
header = require( 'gulp-header' ),
footer = require( 'gulp-footer' );
// styles task
gulp.task( 'styles', function() {
return gulp.src( 'src/styles/main.less' )
.pipe( less({ paths: ['src/styles/'] }) )
.pipe( autoprefixer( 'last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4' ) )
.pipe( gulp.dest( 'dist/assets/css' ) )
.pipe( rename({ suffix: '.min' }) )
.pipe( minifycss() )
.pipe( gulp.dest( 'dist/assets/css' ) )
.pipe( notify({ message: 'Styles task complete' }) );
} );
// scripts task
gulp.task( 'scripts', function() {
var customHeader = [
'(function ( $ ) {',
'"use strict";',
'',
' $(function () {',
''].join('\n');
var customFooter = [
'',
' });',
'',
'}(jQuery));'].join('\n');
return gulp.src( 'src/scripts/**/*.js' )
.pipe( jshint( '.jshintrc' ) )
.pipe( jshint.reporter( 'default' ) )
.pipe( concat( 'main.js' ) )
.pipe( header( customHeader ) )
.pipe( footer( customFooter ) )
.pipe( gulp.dest( 'dist/assets/js' ) )
.pipe( rename({ suffix: '.min' }) )
.pipe( uglify() )
.pipe( gulp.dest( 'dist/assets/js' ) )
.pipe( notify({ message: 'Scripts task complete' }) );
} );
// images task
gulp.task( 'images', function() {
return gulp.src( 'src/images/**/*' )
.pipe( cache( imagemin({ optimizationLevel: 5, progressive: true, interlaced: true }) ) )
.pipe( gulp.dest( 'dist/assets/img' ) )
.pipe( notify({ message: 'Images task complete' } ) );
} );
// clean files and folders
gulp.task( 'clean', function() {
return gulp.src( ['dist/assets/css', 'dist/assets/js', 'dist/assets/img'], {read: false} )
.pipe( clean() );
});
// default task
gulp.task( 'default', ['clean'], function() {
gulp.run( 'styles', 'scripts', 'images' );
} );
// watch task
gulp.task('watch', function() {
// Watch .less files
gulp.watch('src/styles/**/*.less', function(event) {
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
gulp.run('styles');
});
// Watch .js files
gulp.watch('src/scripts/**/*.js', function(event) {
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
gulp.run('scripts');
});
// Watch image files
gulp.watch('src/images/**/*', function(event) {
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
gulp.run('images');
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment