CSS Style Injecting Is Ignored

[joshmedeski]

I'm building my site on Laravel with a MAMP PRO server running. Everything works correctly however the CSS style injection does not work.

It doesn't throw any errors, it just doesn't inject the styles when I hit save.

Here is my Gulp.js file:

// - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
// Gulp
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
var gulp = require('gulp');



// Plugins
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

// Utilities
var gutil        = require('gulp-util'); // Gulp Utilities
var rename       = require('gulp-rename'); // Rename Files
var notify       = require('gulp-notify'); // OSX Notifications
var filesize     = require('gulp-filesize'); // Logs filesizes in human readable Strings

// Live Reloading
var browserSync  = require('browser-sync'); // Live Reloading
var reload       = browserSync.reload;

// Sass
var sass         = require('gulp-sass'); // Sass Compiler
var minifycss    = require('gulp-minify-css'); // CSS Minifier
var autoprefixer = require('gulp-autoprefixer'); // CSS autoprefixing
var pixrem       = require('gulp-pixrem'); // Pixel fallback for REMs

// Javascript
var jshint       = require("gulp-jshint"); // AKA error detector
var stylish      = require('jshint-stylish'); // Stylish reporter for JSHint
var uglify       = require("gulp-uglify"); // JS Minifier
var concat       = require("gulp-concat"); // Concatenator

// TODO: Install Image Optimizer



// Variables
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

// Directories
var SRC     = 'resources/assets';
var BUILD   = 'public';
var BOWER   = 'vendor/bower_components';



// Tasks
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

// Browser Sync
gulp.task('browser-sync', function() {
  browserSync({
    proxy: "http://www.rapidwristbands.local/"
  });
});


// Sass
gulp.task('sass', function() {
  return gulp.src(SRC + '/sass/*.scss')
  .pipe(
    sass({
      outputStyle: 'expanded',
      debugInfo: true,
      lineNumbers: true,
      errLogToConsole: false,
      onError: function(err) {
        gutil.beep();
        notify().write('Gulp Sass Error on line ' + err.line);
        gutil.log(
          'Error ' + gutil.colors.red.inverse(err.message +
            '\nin ' + err.file + ' on line ' + err.line));
      }
    })
    )
  .pipe(gulp.dest(BUILD + '/css')) // plain css output before extra builds
  .pipe(minifycss()) // minifycss has to happen before prefix and pixrem
  .pipe(autoprefixer())
  .pipe(pixrem('16px', { replace: false }))
  .pipe(rename({suffix: '.min'}))
  .pipe(filesize())
  .pipe(gulp.dest(BUILD + '/css'))
  .pipe(reload({stream: true}));
});


// Javascript

function swallowError (error) {
  this.emit('end');
}

gulp.task("js", function() {
  return gulp.src([
    SRC   + '/js/*.js'
    ])
  .pipe(jshint())
  .pipe(jshint.reporter(stylish))
  .pipe(uglify().on('error', swallowError ))
  .pipe(concat('app.js'))
  .pipe(rename({suffix: '.min'}))
  .pipe(gulp.dest(BUILD + '/js'))
  .pipe(filesize());
});

gulp.task('js-vendors', function() {
  return gulp.src([
    BOWER + '/jquery/dist/jquery.min.js',
    BOWER + '/foundation/js/foundation.min.js',
    BOWER + '/magnific-popup/dist/jquery.magnific-popup.min.js',
    BOWER + '/jquery.lazyload/jquery.lazyload.js/',
    BOWER + '/ms-Dropdown/js/msdropdown/jquery.dd.min.js',
    // BOWER + '/responsive-tables/responsive-tables.js',
    BOWER + '/spectrum/spectrum.js',
    ])
  .pipe(uglify().on('error', gutil.log))
  .pipe(concat('vendors.js'))
  .pipe(rename({suffix: '.min'}))
  .pipe(gulp.dest(BUILD + 'js'))
  .pipe(filesize());
})

// Send Modernizr to build folder
gulp.task("modernizr", function () {
  return gulp.src([ BOWER + '/modernizr/modernizr.js'])
  .pipe(uglify())
  .pipe(rename({suffix:'.min'}))
  .pipe(filesize())
  .pipe(gulp.dest(BUILD + 'js'));
});


// Watch
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
gulp.task('watch', function() {
  gulp.watch(SRC + '/sass/**/*.scss', ['sass']);
  gulp.watch(SRC + '/js/*.js', ['js', browserSync.reload]);
  gulp.watch('resources/views/**/*.php').on("change", browserSync.reload);
});


// Default
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
gulp.task('default', [
  'browser-sync',
  'sass',
  'js',
  'watch'
  ]);

[shakyShane]

In your page, do you have a <link> tag pointing to the *.min.css file that your task produces?

[joshmedeski]

We've got a different direction with Gulp (yay, elixir!). So I'll close this issue.