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:
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
So I've reached an acceptable solution for compiling Sass via Gulp on Forge. Notes:
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.
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.
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.
Sign in to participate in this thread!
The Laravel portal for problem solving, knowledge sharing and community building.
The community