Why is gulp not creating css destination folder?

Question

My coworker has this exact code, and is able to run gulp with no problems, but I can't seem to compile the css files. Gulp does not make the css destination file or the files themselves. Gulp makes the build and js folder without any problems, it only has a problem with the css. Every package is the latest release.

This leads me to believe this might be an environmental issue. Even after reinstalling node, the issue persists.

node version: v4.4.4

npm version: 2.15.1

path: /Users/[me]/perl5/perlbrew/bin:/Users/[me]/perl5/perlbrew/perls/perl-5.16.0/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin

This is my gulp file:

    var gulp = require('gulp'),                       //Task runner
    uglify       = require('gulp-uglify'),        //Minimizies JS
    sass         = require('gulp-ruby-sass'),     //Compiles to CSS
    imagemin     = require('gulp-imagemin'),      // Minimize images
    concat       = require('gulp-concat'),
    concatCss    = require('gulp-concat-css'),
    gutil        = require('gulp-util'),
    autoprefixer = require('gulp-autoprefixer'),
    cssnano      = require('gulp-cssnano'),
    pug          = require('gulp-pug'),
    //htmlmin      = require('gulp-htmlmin'),
    browserSync  = require('browser-sync'),
    reload       = browserSync.reload;

//Error look-out
function errorLog(error){
  console.error.bind(error);
  this.emit('end');
}

// Scripts
gulp.task('scripts', function(){
  gulp.src('./src/js/*.js')
    .pipe(uglify())
    .on('error', errorLog)
    .pipe(concat('main.js'))
    .pipe(gulp.dest('./app/build/js'))
    .pipe(browserSync.stream());
});

/*gulp.task('htmlmin', function() {
  return gulp.src('./*.html')
    .pipe(htmlmin({collapseWhitespace: true}))
    .pipe(gulp.dest('./app'));
});*/

gulp.task('pug', function buildHTML() {
  return gulp.src('./views/*.pug')
  .pipe(pug())
  .pipe(gulp.dest('./app'));
});


var autoprefixerOptions = {
  browsers: ['last 2 versions', '> 5%', 'Firefox ESR']
};

// Styles
gulp.task('styles', function(){
  return sass('./src/sass/**/*.sass',{
    style: 'compressed'
  })
  .on('error', errorLog)
  .pipe(autoprefixer(autoprefixerOptions))
  .pipe(cssnano())
  .pipe(gulp.dest('./app/build/css'))
  .pipe(browserSync.stream())
});


// Images
gulp.task('imagemin', function(){
  gulp.src('./src/images/*/*')
  .pipe(imagemin())
  .pipe(gulp.dest('./app/build/images'));
});

// Static server
gulp.task('browser-sync', function() {

     browserSync.init({
          server: {
                baseDir: "./app"
          }
     });

      gulp.watch('./views/*.pug').on('change', reload);
});


// Watchers
gulp.task('watch', ['browser-sync'], function(){
  gulp.watch('./src/js/*.js', ['scripts']);
  gulp.watch('./src/sass/**/*.sass', ['styles']);
  gulp.watch('./src/images/*/*', ['imagemin']);
  //gulp.watch('./*.html', ['htmlmin']);
  gulp.watch('./views/*.pug', ['pug']);
});


//Run task
gulp.task('default', [
  'browser-sync',
  'scripts',
  //'htmlmin',
  'pug',
  'styles',
  'imagemin',
  'watch'
], browserSync.reload);

user4520208 · Accepted Answer · 2016-05-21 04:00:36Z

1

Change your task and try again:

gulp.task('styles', function(){
  return sass('./src/sass/**/*.sass',{
    style: 'compressed'
  })
  .on('error', errorLog)
  .pipe(autoprefixer(autoprefixerOptions))
  .pipe(browserSync.stream())
  .pipe(cssnano())
  .pipe(gulp.dest('./app/build/css/'))    /*Add '/' at the end of css */
});

answered May 21, 2016 at 4:00

user4520208

Sign up to request clarification or add additional context in comments.

Comments

S M Hasan Mansur · Accepted Answer · 2016-05-20 19:57:38Z

0

you might check again the directory permissions & might set the permissions to a less restrictive one to see whether it works.

answered May 20, 2016 at 19:57

S M Hasan Mansur

463 bronze badges

1 Comment

Lanre Over a year ago

All of our folders, files, and permissions match, and are set at the appropriate access level.

Collectives™ on Stack Overflow

Why is gulp not creating css destination folder?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related