Create a gist now

Instantly share code, notes, and snippets.

Comparison between gulp and Grunt. See http://markgoodyear.com/2014/01/getting-started-with-gulp/ for a write-up.
/*!
* gulp
* $ npm install gulp-ruby-sass gulp-autoprefixer gulp-cssnano gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev
*/
// Load plugins
var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
autoprefixer = require('gulp-autoprefixer'),
cssnano = require('gulp-cssnano'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
livereload = require('gulp-livereload'),
del = require('del');
// Styles
gulp.task('styles', function() {
return sass('src/styles/main.scss', { style: 'expanded' })
.pipe(autoprefixer('last 2 version'))
.pipe(gulp.dest('dist/styles'))
.pipe(rename({ suffix: '.min' }))
.pipe(cssnano())
.pipe(gulp.dest('dist/styles'))
.pipe(notify({ message: 'Styles task complete' }));
});
// Scripts
gulp.task('scripts', function() {
return gulp.src('src/scripts/**/*.js')
.pipe(jshint('.jshintrc'))
.pipe(jshint.reporter('default'))
.pipe(concat('main.js'))
.pipe(gulp.dest('dist/scripts'))
.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(gulp.dest('dist/scripts'))
.pipe(notify({ message: 'Scripts task complete' }));
});
// Images
gulp.task('images', function() {
return gulp.src('src/images/**/*')
.pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
.pipe(gulp.dest('dist/images'))
.pipe(notify({ message: 'Images task complete' }));
});
// Clean
gulp.task('clean', function() {
return del(['dist/styles', 'dist/scripts', 'dist/images']);
});
// Default task
gulp.task('default', ['clean'], function() {
gulp.start('styles', 'scripts', 'images');
});
// Watch
gulp.task('watch', function() {
// Watch .scss files
gulp.watch('src/styles/**/*.scss', ['styles']);
// Watch .js files
gulp.watch('src/scripts/**/*.js', ['scripts']);
// Watch image files
gulp.watch('src/images/**/*', ['images']);
// Create LiveReload server
livereload.listen();
// Watch any files in dist/, reload on change
gulp.watch(['dist/**']).on('change', livereload.changed);
});
/*!
* Grunt
* $ npm install grunt-contrib-uglify grunt-autoprefixer grunt-contrib-cssmin grunt-contrib-imagemin grunt-contrib-sass grunt-contrib-watch grunt-contrib-concat grunt-contrib-clean grunt-contrib-jshint grunt-notify --save-dev
*/
module.exports = function(grunt) {
grunt.initConfig({
// Sass
sass: {
dist: {
options: {
style: 'expanded'
},
files: {
'dist/styles/main.css': 'src/styles/main.scss'
}
}
},
// Autoprefix
autoprefixer: {
options: {
browsers: [
'last 2 version'
]
},
dist: {
src: 'dist/styles/main.css'
}
},
// CSS minify
cssmin: {
dist: {
files: {
'dist/styles/main.min.css': 'dist/styles/main.css'
}
}
},
// JShint
jshint: {
files: ['src/scripts/**/*.js'],
options: {
jshintrc: '.jshintrc'
}
},
// Concat
concat: {
js: {
src: ['src/scripts/**/*.js'],
dest: 'dist/scripts/main.js'
},
},
// Uglify
uglify: {
dist: {
src: 'dist/scripts/main.js',
dest: 'dist/scripts/main.min.js'
},
},
// Imagemin
imagemin: {
dist: {
options: {
optimizationLevel: 3,
progressive: true,
interlaced: true
},
files: [{
expand: true,
cwd: 'src/images',
src: ['**/*.{png,jpg,gif}'],
dest: 'dist/images'
}]
}
},
// Clean
clean: {
build: ['dist/styles', 'dist/scripts', 'dist/images']
},
// Notify
notify: {
styles: {
options: {
message: 'Styles task complete',
}
},
scripts: {
options: {
message: 'Scripts task complete',
}
},
images: {
options: {
message: 'Images task complete',
}
},
},
// Watch
watch: {
styles: {
files: 'src/styles/**/*.scss',
tasks: ['sass', 'autoprefixer', 'cssmin', 'notify:styles'],
},
scripts: {
files: 'src/scripts/**/*.js',
tasks: ['concat', 'uglify', 'notify:scripts'],
},
images: {
files: 'src/images/**/*',
tasks: ['imagemin', 'notify:images'],
},
livereload: {
options: { livereload: true },
files: [
'dist/styles/**/*.css',
'dist/scripts/**/*.js',
'dist/images/**/*'
]
}
}
});
// Default task
grunt.registerTask('default', [
'jshint',
'clean',
'concat',
'uglify',
'sass',
'autoprefixer',
'cssmin',
'imagemin'
]);
// Load plugins
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-notify');
};
@lmartins

Have you found any way to only emit notifications when errors happen?

@el-rotny

Im interested in learning how to use this with vagrant. I have my set up pretty well defined and haven't run vagrant up just yet. Is there any documentation you have available that might clear that up?

@el-rotny

Never mind, seems like as long as I run gulp locally and the host sync dir is properly mounted, it should all work out.

@antwonlee

I am having little trouble with livereload with vagrant.

@luckylooke

Thanks for sharing! ;)

@mangowebdesign

Really helped a lot! thank you!

@styleyan

thinks。。,

@nilghe
nilghe commented Feb 27, 2015

For those that may be running into issues with gulp-ruby-sass. The latest version has changed the syntax. I ran into this issue and took me a while to figure out that the api has changed. The examples used here are for an older version.

https://github.com/sindresorhus/gulp-ruby-sass/tree/rw/1.0#usage

gulp.src() is now deprecated in 1.0. Use sass().

@xiatsing

It's very nice!

@dyygtfx
dyygtfx commented Aug 5, 2015

may be you forgot the gulp-watch plugin

@juanmanuelsanchez

Thank you very much for sharing , it's been really helpful!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment