Av ren nyfikenhet skulle jag kolla på hur Gulp fungerade eftersom jag kört Grunt rätt länge nu. Alltid bra att jämföra olika verktyg då och då för du vill alltid ha det bästa när du jobbar med webdev (det vill i alla fall jag).
Eftersom Gulp var lätt att sätta sig in i blev processen inte så lång. Det jag behövde i nuläget var bara funktionerna för att köra linting och uglify på JavaScript, Sass/Compass på min CSS samt kombinera mina filer så det bara blir en fil av varje filtyp istället för flera. Jag inkluderade även Livereload eftersom det underlättar arbetet vid redigering av CSS.
Min gulpfile.js ser idag ut så här:
var gulp = require('gulp');
var sass = require('gulp-ruby-sass');
var autoprefixer = require('gulp-autoprefixer');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var gutil = require('gulp-util');
var jshint = require('gulp-jshint');
var livereload = require('gulp-livereload');
gulp.task('css', function() {
return gulp.src('src/css/*.sass')
.pipe(concat('styles.min.sass'))
.pipe(gulp.dest('destination/css'))
.pipe(sass({ style: 'compressed', compass: true, trace: true }))
.on('error', handleError)
.pipe(autoprefixer('last 15 version'))
.pipe(gulp.dest('destination/css/'))
.pipe(livereload())
});
gulp.task('js', function() {
return gulp.src('src/js/*.js')
.pipe(concat('scripts.min.js'))
.pipe(gulp.dest('destination/js'))
.pipe(jshint())
.pipe(jshint.reporter('default'))
.on('error', handleError)
.pipe(uglify())
.on('error', handleError)
.pipe(gulp.dest('destination/js'))
.pipe(livereload())
});
gulp.task('default', function() {
gulp.run('css');
gulp.run('js');
gulp.watch('src/css/*.sass', function() {
gulp.run('css');
});
gulp.watch('src/js/*.js', function() {
gulp.run('js');
});
});
function handleError(err) {
console.log(err.toString());
this.emit('end');
}
Notera funktionen ”handleError” längst ner i filen. Den är där för att Gulp stoppar watch processen vid ett fel. Så om jag skriver fel syntax i min js eller sass-fil så kommer den inte köra när jag rättar den – om jag inte använder den här funktionen och binder den till ”error” på följande vis:
.pipe(uglify())
.on('error', handleError)
Jag antar att det är en bug för det kan omöjligt vara meningen att det ska vara så. Men med tanke på att Gulp är så pass nytt blir jag inte förvånad.
Det jag blev förvånad över däremot är att jag upplever att Gulp är snabbare än Grunt. Det hade jag inte väntat mig, utan jag trodde mer att det Gulp skulle vara bra på var att ha bättre syntax för samma saker som Grunt gör och på så vis vara lättare att hantera.
Så från att vara en snubbe som använder Grunt är jag nu en snubbe som använder Gulp! Det finns säkert mycket mer att göra med Gulp, men i nuläget behöver jag inte fler saker än dessa. Bara detta lilla hjälper mig väldigt mycket när jag utvecklar.
Har du tips på vad du använder Gulp (eller Grunt för den delen) så skriv gärna en kommentar!
