Using a created file in another task in gulp

Question

I am trying to set up a small gulp script for the following actions:

1. Concatenate all Javascript files into one
2. Uglify this built Javascript file
3. Compile all SASS files to CSS
4. Minify these CSS files

In addition, I'd like to save the results of step 1 and 3 into one folder (developer version) and the results of step 2 and 4 into another (productive version). The problem is, gulp doesn't seem to find the generated files in step 2 and 4, so it always builds the files depending on the old version of the files. The workaround for this problem is to always run my gulp script twice. Does anyone know why this is the case and how I could fix that problem?

var gulp = require('gulp');
var plumber = require('gulp-plumber');
var concat = require('gulp-concat');
var minifyCSS = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var sass = require('gulp-sass');

var DEV_JS = 'dev/js/*.js';
var DEV_SASS = 'dev/sass/*scss';
var BUILT_PROD_JS = 'built/prod/js';
var BUILT_PROD_CSS = 'built/prod/css';
var BUILT_DEV_JS = 'built/dev/js';
var BUILT_DEV_CSS = 'built/dev/css';

gulp.task('concat', function(){
    gulp.src(DEV_JS)
    .pipe(plumber())
    .pipe(concat('simple-ui.js'))
    .pipe(gulp.dest(BUILT_DEV_JS));
});

gulp.task('compress',['concat'], function(){
    return gulp.src(BUILT_DEV_JS + '/*.js')
    .pipe(plumber())
    .pipe(uglify())
    .pipe(gulp.dest(BUILT_PROD_JS));
});

gulp.task('sass', function(){
    gulp.src(DEV_SASS)
    .pipe(plumber())
    .pipe(sass())
    .pipe(gulp.dest(BUILT_DEV_CSS));
});

gulp.task('minify-css',['sass'], function(){
    return gulp.src(BUILT_DEV_CSS + '/*.css')
    .pipe(plumber())
    .pipe(minifyCSS({keepSpecialComments: 1})
    .pipe(gulp.dest(BUILT_PROD_CSS)));
});

gulp.task('default', ['compress', 'minify-css']);

Answer 1

I would fix two things in your code. First all your tasks should have return statements (one way to indicate they have finished to other tasks), so

gulp.task('concat', function(){
   return gulp.src(DEV_JS)
    .pipe(plumber())
    .pipe(concat('simple-ui.js'))
    .pipe(gulp.dest(BUILT_DEV_JS));
});

gulp.task('sass', function(){
   return gulp.src(DEV_SASS)
    .pipe(plumber())
    .pipe(sass())
    .pipe(gulp.dest(BUILT_DEV_CSS));
});

And secondly you appear to have a typo in this line:

var DEV_SASS = 'dev/sass/*scss';

Change to:

var DEV_SASS = 'dev/sass/*.scss';