Skip to content

Instantly share code, notes, and snippets.

@wedancedalot
Last active September 28, 2015 07:51
Show Gist options
  • Save wedancedalot/1f68652dd61032b8f4c2 to your computer and use it in GitHub Desktop.
Save wedancedalot/1f68652dd61032b8f4c2 to your computer and use it in GitHub Desktop.
Sharing my gulpfile
// npm install --save-dev gulp gulp-sass gulp-autoprefixer gulp-minify-css gulp-notify gulp-jshint gulp-concat gulp-rename gulp-uglify gulp-livereload gulp-imagemin gulp-cache
var gulp = require('gulp'),
sass = require('gulp-sass'),
prefix = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
notify = require('gulp-notify'),
jshint = require('gulp-jshint'),
concat = require('gulp-concat'),
rename = require('gulp-rename'),
uglify = require('gulp-uglify'),
livereload = require('gulp-livereload'),
imagemin = require('gulp-imagemin'),
cache = require('gulp-cache');
// Styles
gulp.task('styles', function() {
gulp.src('./src/styles/**/*.scss')
.pipe(sass({
outputStyle: 'expanded'
}))
.pipe(prefix(
"last 1 version", "> 1%", "ie 8", "ie 7"
))
.pipe(minifycss())
.pipe(gulp.dest('./assets/css'))
.pipe(notify({
message: 'Styles task complete'
}));
});
// Js hint
gulp.task('jshint', function() {
gulp.src(['./src/scripts/**/*.js', '!./src/scripts/vendor/**/*.js'])
.pipe(jshint())
.pipe(jshint.reporter('jshint-stylish'))
.pipe(notify({
message: 'Jshint task complete'
}));
})
// Minify Scripts
gulp.task('scripts', ['jshint'], function() {
return gulp.src('./src/scripts/**/*.js')
.pipe(concat('main.js'))
.pipe(rename({
suffix: '.min'
}))
.pipe(uglify())
.pipe(gulp.dest('./assets/js'))
.pipe(notify({
message: 'Scripts task complete'
}));
});
// Images
gulp.task('images', function() {
return gulp.src('./src/images/**/*')
.pipe(cache(imagemin()))
.pipe(gulp.dest('./assets/img'))
.pipe(notify({
message: 'Images task complete'
}));
});
// Default task
gulp.task('default', function() {
gulp.run('styles', 'scripts', 'images');
});
// Watch
gulp.task('watch', function() {
livereload.listen();
// Watch .scss files
gulp.watch('./src/styles/**/*.scss', ['styles']).on('change', livereload.changed);
// Watch .js files
gulp.watch('./src/scripts/**/*.js', ['scripts']).on('change', livereload.changed);
// Watch image files
gulp.watch('./src/images/**/*', ['images']).on('change', livereload.changed);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment