Gulp and Visual Studio: VS is locking files

Question

Previously we were using Bower for managing SASS and JavaScript packages. We recently switched to NPM for management of these packages and Gulp for bundling and minification. When running Gulp tasks from Visual Studio, we're consistently running into problems due to files being locked. What can be done to prevent this from happening or force a retry/overwrite?

Here's what the Gulpfile looks like:

gulp.task("sass", ['npmSass','npmBootstrapSass', 'minifySass'])

gulp.task('npmBootstrapSass', function () {
   return gulp.src(NODE_MODULES + '/bootstrap/scss/**', { base: NODE_MODULES + '/bootstrap/scss' })
        .pipe(gulp.dest(SCSS_DEST + '/bootstrap'))
});

gulp.task('npmSass', function () {
    return gulp.src(nodepackages(npm_scss, "/**/*.scss"), { base: NODE_MODULES })
        .pipe(gulp.dest(SCSS_DEST));
});

gulp.task('minifySass', function () {
    return gulp.src(['Content/styles/scss/*.scss'])
        .pipe(sass())
        .pipe(concat('bundle-sass.css'))
        .pipe(gulp.dest('wwwroot/dist/'))
        .pipe(uglifyCSS())
        .pipe(rename({ suffix: '.min' }))
        .pipe(gulp.dest('wwwroot/dist/'))
});

Answer 1

The issue was that the gulp tasks were running asynchronously, so files were indeed getting locked. I installed a plugin called gulp-sync so that the tasks could be roun synchronously. This seemed to fix the issue, so my assumption that the Visual Studio IDE was locking files was probably incorrect.

The solution looks like this:

var gulpsync = require('gulp-sync')(gulp);
gulp.task("sass", gulpsync.sync(['npmSass','npmBootstrapSass', 'minifySass']) );