My colleague has the exact same code and can run gulp without any issues, but I'm struggling to compile the css files using Gulp. Gulp isn't creating the css destination file or the css files themselves. However, it works perfectly fine for building the js folder. All packages are up to date.
This makes me think that there might be an environmental problem causing this issue. Even after reinstalling Node.js, the problem 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:/sbinThis is my Gulp file:
var gulp = require('gulp'), // Task runner
uglify = require('gulp-uglify'), // Minifies JS
sass = require('gulp-ruby-sass'), // Compiles to CSS
imagemin = require('gulp-imagemin'), // Minimizes 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'),
browserSync = require('browser-sync'),
reload = browserSync.reload;
// Error handling
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);