Support the ongoing development of Laravel.io →
Configuration Views
Last updated 2 years ago.
0

Tried this another way using gulp-sass instead of gulp-ruby-sass: https://www.npmjs.org/package/gulp-sass

This uses the node-sass package underneath so there's no ruby+sass required. It's a little faster. It doesn't compress whitespace quite as well, but that's negligible. Downside is source maps can only be inlined and they're broken (as of today): https://github.com/sass/node-sass/issues/337

Since pre-processors are primarily a development tool, I'm inclined to stick with gulp-ruby-sass and simply commit both my Sass and compiled CSS in the repo.

For personal projects, the repo bloat is far less concern than the burden of maintaining rvm, ruby, and sass on the server. For team projects, that probably won't work and potentially creates annoying merge conflicts locally. Leaning toward compiling on the server for consistency because local versions may differ between developers locally.

Not a great resolution, but I'll probably test out installing ruby + sass on Linode or Digital Ocean this weekend just to see how it goes. Some links:

Last updated 2 years ago.
0

The other semi-annoying part about compiling on the server is that gulp-notifier only makes sense on the developer's machine. So the gulpfile gets more complicated to handle environments differently, and that's annoying: http://stackoverflow.com/questions/22329406/gulp-notify-error-no-reporter-specified

Last updated 2 years ago.
0

So I've reached an acceptable solution for compiling Sass via Gulp on Forge. Notes:

  1. Use the gulp-sass package (not gulp-ruby-sass). Dealing with installing and keeping Ruby updated is not worth the effort to me. I rewrote my Sass to use Autoprefixer instead of Compass, and for sprites you should be using SVGs not compiled bitmaps at this point. It's a fair deal.

  2. Since gulp-sass is based on node-sass and hence libsass, it is behind the Ruby implementation of Sass. This means Sass 3.3 is not supported and external source maps are not available (inline only). My application is small and I wrote all the CSS so working without source maps isn't a huge barrier.

  3. I'm using the gulp-if and minimist package to detect environments and prevent Growl-style notifications from running on my server. Here's snippet of some of that code:

var gulp = require('gulp');

var autoprefixer = require('gulp-autoprefixer');
var cache        = require('gulp-cache');
var concat       = require('gulp-concat');
var del          = require('del');
var gulpif       = require('gulp-if');
var imagemin     = require('gulp-imagemin');
var jshint       = require('gulp-jshint');
var notify       = require('gulp-notify');
var plumber      = require('gulp-plumber');
var rename       = require('gulp-rename');
var sass         = require('gulp-sass');
var shell        = require('gulp-shell');
var svgmin       = require('gulp-svgmin');
var uglify       = require('gulp-uglify');

// ----------------------------------------------
// Environment Detection
// Run as "gulp --production" to prevent notifications on server.
// See: http://journal.toddsmithsalter.com/a-simple-gulp-build-task/

var flags        = require('minimist')(process.argv.slice(2));
var isProduction = flags.production || flags.prod || false;

// ==============================================
// Error Handling
// ==============================================

function handleError (err) {
    console.log(err.toString());
    this.emit('end');
}

// ==============================================
// Tasks
// ==============================================

gulp.task('default', ['clean'], function () {
    gulp.start('css');
});

// ----------------------------------------------
// Clean
// Delete old generated files.
// The "callback" ensures completion before proceeding to generation tasks.
// See: http://markgoodyear.com/2014/01/getting-started-with-gulp/

gulp.task('clean', function (callback) {
    del([
        '_themes/manuals/css/*.css',
        '_themes/manuals/js/build/*.js'
    ], callback);
});

// ----------------------------------------------
// CSS

gulp.task('css', function () {
    return gulp.src('assets/scss/**/*.scss')
        .pipe(plumber({ errorHandler: handleError }))
        .pipe(sass({
            outputStyle: 'compressed'
            //sourceComments: 'map'
        }))
        .pipe(autoprefixer({
            browsers: ['last 2 version', 'safari 6', 'ie >= 10', 'opera 12.1', 'ios 6', 'android 4']
        }))
        .pipe(gulp.dest('public/css'))
        .pipe(gulpif(!isProduction, notify({
            title: 'Gulp: CSS',
            message: 'Finished <%= file.relative %>'
        })));
});

Then edit your Forge deploy script to add:

gulp --production

So that's how I'm working with Sass + Gulp + Forge. It's not perfect but it works.

Last updated 2 years ago.
0

Sign in to participate in this thread!

Eventy

Your banner here too?

Moderators

We'd like to thank these amazing companies for supporting us

Your logo here?

Laravel.io

The Laravel portal for problem solving, knowledge sharing and community building.

© 2024 Laravel.io - All rights reserved.