I've just started using gulp for the first time, required all the plugins I want to use and written the first task for sass compilation. It seems to work but there are two problems, firstly when I type gulp on the command line it seems to take 3 or 4 seconds to start which seems slower than grunt (I started using gulp because I understood it was faster). Is this normal?
The main problem though is that I have a default task which calls the sass task. The command line output seems to suggest that both are being run which means the sass is being compiled twice. It is also outputting my single gulp-notify notification twice which doesn't seem right.
Here is the command line output...
λ gulp default
[00:53:40] Using gulpfile ~\Desktop\jon\gulpfile.js
[00:53:40] Starting 'sass'...
[00:53:40] Finished 'sass' after 10 ms
[00:53:40] Starting 'default'...
[00:53:40] Finished 'default' after 7.93 μs
[00:53:41] gulp-notify: [Gulp notification] Css created
[00:53:41] gulp-notify: [Gulp notification] Css created
And here is my gulp file in full...
var gulp = require('gulp'),
gutil = require('gulp-util'),
compass = require('gulp-compass'),
rename = require('gulp-rename'),
uglify = require('gulp-uglify'),
watch = require('gulp-watch'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
jshint = require('gulp-jshint'),
autoprefixer = require('gulp-autoprefixer'),
minifyCSS = require('gulp-minify-css'),
traceur = require('gulp-traceur'),
svgmin = require('gulp-svgmin'),
imagemin = require('gulp-imagemin'),
ngAnnotate = require('gulp-ng-annotate'),
expect = require('gulp-expect-file'),
sourcemaps = require('gulp-sourcemaps');
var paths = {
src: "src",
css: "stylesheets",
img: "images",
js: "js"
}
// Compile Our Sass
gulp.task('sass', function() {
gulp.src(paths.src + '/sass/*.scss')
.pipe(sourcemaps.init())
.pipe(compass({
sass: 'src/sass',
environment: 'development',
outputStyle: 'expanded',
debugInfo: false,
noLineComments: true
}))
.pipe(autoprefixer('> 5%', 'last 2 version', 'ie 9'))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(paths.css))
.pipe(notify({ message: 'Css created' }));
});
// Dev Task
gulp.task('default', ['sass']);
Anybody know what's going on here? Have I misunderstood how Gulp tasks work?
Use the onLast
option of gulp-notify if you only want a single notification per-stream:
//...
.pipe(notify({message: 'Css created', onLast: true}));
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With