Dealing with Gulp, Bundler, Ruby and Susy - sass

According to this it's possible to compile susy install from Ruby with Gulp.
But is it possible to use gulp-sass instead of gulp-compass or gulp-ruby-sass because of performance and deprecation ?
Actually I use this in my gulpfile.js:
gulpfile
var gulp = require('gulp');
// Include plugins
var plugins = require('gulp-load-plugins')();
// Variables de chemins
var source = './sass/**/*.scss'; // dossier de travail
var destination = './css/'; // dossier à livrer
gulp.task('sasscompil', function () {
return gulp.src(source)
.pipe(plugins.sass({
outputStyle: 'compressed',
includePaths: ['/home/webmaster/vendor/bundle/gems/susy-2.2.2/sass']
}).on('error', sasscompil.logError))
.pipe(plugins.csscomb())
.pipe(plugins.cssbeautify({indent: ' '}))
.pipe(plugins.autoprefixer())
.pipe(gulp.dest(destination + ''));
});
But the error log doesn't work because sasscompil isn't define.
Then I need to give the path for all ex-compass includes like susy, sassy-button,etc..
is it possible to give a global path for gems ?
other thing, do I install gulp plugins despite of using gulp-load-plugins ? because gulp doesn't find plugins if I don't do that.
Thanks

You need to change sasscompil.logError to plugins.sass.logError
such that
gulpfile.js
gulp.task('sasscompil', function () {
return gulp.src(source)
.pipe(plugins.sass({
outputStyle: 'compressed',
includePaths: ['/home/webmaster/vendor/bundle/gems/susy-2.2.2/sass']
}).on('error', plugins.sass.logError))
...
});
gulp-sass doc:
Pass in options just like you would for node-sass; they will be passed along just as if you were using node-sass. Except for the data option which is used by gulp-sass internally. Using the file option is also unsupported and results in undefined behaviour that may change without notice.
example
gulp.task('sass', function () {
return gulp.src('./sass/**/*.scss')
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
.pipe(gulp.dest('./css'));
});

Related

Can't get simple Sass task to complete in Gulp

I'm new to Gulp and was attempting to convert my Sass to CSS via a simple Gulp task.
I've tried the following (return statement):
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var uglifycss = require('gulp-uglifycss');
sass.compiler = require('node-sass');
//Compile Sass to CSS
function sass() {
return gulp.src('./assets/sass/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./assets/css'));
};
and (done)
//Complie Sass to CSS
function sass(done) {
gulp.src('./assets/sass/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./assets/css'))
done();
};
But both return with
[18:38:07] The following tasks did not complete: sass
[18:38:07] Did you forget to signal async completion?
I figured using the return statement or the done parameter would complete the task. I can't figure out why it's telling me the taks can't be completed.
I also have a very similar CSS minify task running (hence the uglify variable) that is working.
Any ideas?
Thanks!

Gulp libsass/autoprefixer error on comments in sass file

I am switching from gulp-ruby-sass to gulp-sass. Gulp ruby sass was working without errors, but to make life easy on our Windows devs I am trying to remove the dependency on Ruby.
I installed the packages at set up my gulp file like so:
var sassFiles = './app/assets/sass/**/*.{scss,sass}';
var cssFiles = './app/assets/css';
var sassOptions = {
errLogToConsole: true,
outputStyle: 'compact'
};
var autoprefixerOptions = {
browsers: ['last 2 versions']
};
gulp.task('sass', function () {
return gulp
.src(sassFiles)
.pipe(sourcemaps.init())
.pipe(autoprefixer(autoprefixerOptions))
.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(sourcemaps.write())
.pipe(gulp.dest(cssFiles))
.pipe(browserSync.stream());
});
Except it fails every time over the comments in my file:
[08:20:39] Starting 'sass'...
events.js:154
throw er; // Unhandled 'error' event
^
CssSyntaxError: /Users/stevelombardi/github/designsystem- 3/app/assets/sass/design_system.scss:1:1: Unknown word
////
^
/// This is a poster comment.
which maps to a comment in the scss file. Note that even if I remove this block, sass simply errors on the next comment.
If I comment out the autoprefixer pipe it works. So what's the issue here?
FWIW, I was following the guidelines from this site.
There are no Javascript-style single-line // comments in CSS, only multi-line /* */ comments.
Single-line // comments are supported by SASS/SCSS, but stripped from the resulting CSS.
Since autoprefixer only operates on CSS not SASS/SCSS you need to run sass() before autoprefixer():
.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(autoprefixer(autoprefixerOptions))

Using SASS with Aurelia's Skeleton Navigation project

var gulp = require('gulp');
var sass = require('gulp-sass');
var runSequence = require('run-sequence');
var changed = require('gulp-changed');
var plumber = require('gulp-plumber');
var to5 = require('gulp-babel');
var sourcemaps = require('gulp-sourcemaps');
var paths = require('../paths');
var compilerOptions = require('../babel-options');
var assign = Object.assign || require('object.assign');
// transpiles changed es6 files to SystemJS format
// the plumber() call prevents 'pipe breaking' caused
// by errors from other gulp plugins
// https://www.npmjs.com/package/gulp-plumber
gulp.task('build-system', function () {
return gulp.src(paths.source)
.pipe(plumber())
.pipe(changed(paths.output, {extension: '.js'}))
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(to5(assign({}, compilerOptions, {modules:'system'})))
.pipe(sourcemaps.write({includeContent: false, sourceRoot: paths.sourceMapRelativePath }))
.pipe(gulp.dest(paths.output));
});
gulp.task('build-sass', function() {
gulp.src(paths.sass + '**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass({
style: 'expanded',
includePaths: [
paths.sass,
paths.jspmDir + '/github/Dogfalo/materialize#0.96.0/sass',
],
errLogToConsole: true }))
.pipe(sourcemaps.write(paths.sourceMapRelativePath))
.pipe(gulp.dest(paths.cssOutput))
});
// copies changed css files to the output directory
gulp.task('build-css', function () {
return gulp.src(paths.css)
.pipe(changed(paths.output, {extension: '.css'}))
.pipe(gulp.dest(paths.output));
});
// copies changed html files to the output directory
gulp.task('build-html', function () {
return gulp.src(paths.html)
.pipe(changed(paths.output, {extension: '.html'}))
.pipe(gulp.dest(paths.output));
});
// this task calls the clean task (located
// in ./clean.js), then runs the build-system
// and build-html tasks in parallel
// https://www.npmjs.com/package/gulp-run-sequence
gulp.task('build', function(callback) {
return runSequence(
'clean',
['build-system', 'build-html','build-css','build-sass'],
callback
);
});
gulp.task('default', ['build']);
I have gulp-sass working but I am not sure how to reference the System.config({
"map": { short hand to paths.
I am trying to use the materialize css framework so I imported it using
jspm install github:Dogfalo/materialize#0.96.0
which worked fine, but my concern now is that in my build task I have to reference the specific path to the sass folder including the version numbers in the includePaths property
If I look at the config.js file, jspm saved a reference to materialize under the System.config.map section, it seems if I could just reference the short hand materialize name in the code below this would solve my problem
Here is my build-sass task that I added to build.js
gulp.task('build-sass', function() {
gulp.src(paths.sass + '**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass({
style: 'expanded',
includePaths: [
paths.sass,
paths.jspmDir + '/github/Dogfalo/materialize#0.96.0/sass', //I would like to just reference to shorcut path included in the config.js to materialize
],
errLogToConsole: true }))
.pipe(sourcemaps.write(paths.sourceMapRelativePath))
.pipe(gulp.dest(paths.cssOutput))
});
Or if you have any better way to include a github package such as materialize using jspm and reference it in code letting jspm manage the package and version and just referencing the shorthand that jspm created
Thanks,
Dan
SASS build task
You'll need to install gulp-sass, like you mentioned. Then, you'll want to add the following task to your build file. Notice the task includes plumber and changed as well. This will signal watch to rebuild your sass when you edit it and not break serving on syntax errors.
// compiles sass to css with sourcemaps
gulp.task('build-css', function() {
return gulp.src(paths.style)
.pipe(plumber())
.pipe(changed(paths.style, {extension: '.css'}))
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(sourcemaps.write())
.pipe(gulp.dest('./styles'));
});
Build task
You'll also need to add this new sass build task to your general build task, so that it is included in the build pipeline.
gulp.task('build', function(callback) {
return runSequence(
'clean',
['build-system', 'build-html', 'build-css'],
callback
);
});
Using a CSS framework in code
As you mentioned, having jspm install materialize will let jspm take care of all the heavy lifting for you. Once installed, jspm will modify the config paths to point to the right place. Then, when you need to reference it in code, you can import it normally. To install, you will want to add materialize to your package.json dependencies.
"jspm": {
"dependencies": {
"materialize": "github:Dogfalo/materialize#0.96.0",
Then, jspm will set up a map for you so you can use the normal module syntax.
import 'materialize/js/collapsible';
Materialize is not using the module syntax so, at the moment, you will need to (a) import each piece that you want specifically, as above, and (b) manually import jQuery, since materialize doesn't declare dependencies.
For more information, please see my full write up including examples here:
http://www.foursails.co/blog/building-sass/

Combining SCSS and SASS syntax with Gulp?

This is the first time I use a Taskrunner but I've used Sass a lot and I really like the Sass syntax rather than the SCSS syntax. However, I want to use the Bourbon library in my new project and it's written with SCSS, so it doesn't compile for me if I don't have all of my CSS written in SCSS, since I only compile the files with the .sass ending. Is there a way to compile both or to use some other gulp plugin that does this? I've never had this problem using Compass, Codekit or the Sass compiler that's built into Jekyll. I attached my code and remember that I'm new to this, so feel free to point out if I've done some stupid decisions or if there's something that looks weird, I'd love to improve.
var gulp = require('gulp'),
browserify = require('gulp-browserify'),
sass = require('gulp-sass'),
browserSync = require('browser-sync'),
reload = browserSync.reload;
//Tasks regarding scripts--------------------------------------------------|
gulp.task('scripts', function(){
// Single entry point to browserify
gulp.src('vendor/scripts/main.js')
.pipe(browserify({
insertGlobals : true,
debug : !gulp.env.production
}))
.pipe(gulp.dest('./dist/js'))
console.log("This is reloaded");
});
//Tasks regarding styles----------------------------------------------------|
gulp.task('sass', function(){
gulp.src('vendor/styles/**/*.scss')
.pipe(sass({
outputStyle: 'nested',
onError: console.error.bind(console, 'Sass error:')
}))
.pipe(gulp.dest('./dist/css'))
});
//Live reload--------------------------------------------------------------------|
gulp.task('serve', ['scripts','sass'], function () {
gulp.watch([
'dist/**/*'
]).on('change', reload);
gulp.watch('vendor/styles/**/*.scss', ['sass']);
gulp.watch('vendor/scripts/*.js', ['scripts']);
browserSync({
notify: false,
port: 9000,
server: {
baseDir: ['.tmp', 'dist'],
routes: {
'/bower_components': 'bower_components'
}
}
});
});
gulp-sass is based on libsass, the native C implementation of Sass, and libsass is well known to have issues with different syntaxes. I'd recommend using the plugin gulp-ruby-sass to fall back on the original Ruby implementation. The one you also use with Codekit, Compass, and so on. Be aware that gulp-ruby-sass has a different interface:
var sass = require('gulp-ruby-sass');
gulp.task('sass', function(){
return sass('vendor/styles/**/*.scss')
.pipe(gulp.dest('./dist/css'))
});
It's a lot slower that gulp-sass, but you won't come into such issues since there's still a huge difference between those implementations.
Btw: Good turn on your first Gulpfile! Just make sure to return streams in your subtasks so Gulp knows how to orchestrate them (just place a return statement before gulp.src)
According to
https://css-tricks.com/gulp-for-beginners/
You just need to change
/*.scss to *.+(scss|sass)
The plus + and parentheses () allows Gulp to match multiple patterns, with different patterns separated by the pipe | character. In this case, Gulp will match any file ending with .scss or .sass in the root folder.
This are my plugins:
// Load plugins
var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
autoprefixer = require('gulp-autoprefixer'),
cssnano = require('gulp-cssnano'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
haml = require('gulp-ruby-haml'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
livereload = require('gulp-livereload'),
coffee = require('gulp-coffee'),
gutil = require('gulp-util'),
slim = require("gulp-slim"),
del = require('del');
This worked for me:
// Styles
gulp.task('styles', function() {
return sass('src/styles/**/*.+(scss|sass)', { style: 'expanded' })
.pipe(autoprefixer('last 2 version'))
.pipe(gulp.dest('dist/css'))
.pipe(rename({ suffix: '.min' }))
.pipe(cssnano())
.pipe(gulp.dest('dist/css'));
});

Libsass with Susy not working + Gulp

I've no doubt others have got this working... I just haven't quite worked out how right now.
Gulp
var gulp = require('gulp');
var sass = require('gulp-sass');
var handleErrors = require('../util/handleErrors');
var sourcemaps = require('gulp-sourcemaps');
var minifyCSS = require('gulp-minify-css');
gulp.task('sass', function () {
return gulp.src('./frontend/sass/style.scss')
.pipe(sourcemaps.init())
.pipe(sass({
'require':'susy'
}))
//.pipe(minifyCSS())
.pipe(sourcemaps.write('./app/www/css'))
.on('error', handleErrors)
.pipe(gulp.dest('./app/www/css'))
});
Sass
#import "susy";
Gulp Running
[23:58:08] Starting 'sass'...
stream.js:94
throw er; // Unhandled stream error in pipe.
^
Error: file to import not found or unreadable: susy
Current dir: C:/var/www/rnli.hutber.com/frontend/sass/
I have installed susy#2.2.2 in the root along side the gulp file with the following: gem install susy
Current working setup with gulp-ruby-sass
I do however have it working, which confirms that susy is working via the gem installed with the following code:
var gulp = require('gulp');
var sass = require('gulp-ruby-sass');
var handleErrors = require('../util/handleErrors');
var minifyCSS = require('gulp-minify-css');
gulp.task('sass', function () {
return gulp.src('./frontend/sass/style.scss')
.pipe(sass({
'sourcemapPath':'./app/www/css',
'require':'susy'
}))
//.pipe(minifyCSS())
.on('error', handleErrors)
.pipe(gulp.dest('./'))
});
NOTE The above code will not working using gulp-ruby-sass#1.0.0alpha' It will only work as I can tell withv0.7.1`
package.json
"devDependencies": {
"gulp": "~3.8.10",
"gulp-sass": "~1.3.2",
"gulp-ruby-sass": "~0.7.1",
"gulp-sourcemaps": "~1.3.0",
"susy":"~2.2.1"
}
How do I get susy working correctly and able to compile into css?
I've managed to get susy working with libsass (gulp-sass)
gulp-sass needs to know where to find files specified with an #import directive. You can try set the includesPath option in gulp-sass to point to your local copy of susy.
As I've installed susy with bower, I have something like this:
var sass = require('gulp-sass');
gulp.task('sass', function () {
return gulp.src(config.src)
.pipe(sass({
includePaths: [
'bower_components/susy/sass'
]
}))
...
});
I had the same issue, but with Grunt instead of Gulp.
You could do is use the full path for susy.
First find out where your gems are installed (gem env, and look up for GEM PATHS; in my case they where in /Library/Ruby/Gems/2.0.0).
And then in your style.scss file instead of #import susy you do:
#import "/Library/Ruby/Gems/2.0.0/gems/susy-2.2.2/sass/susy";
(Replace 2.2.2 for your version of susy, but if you are going to use libsass you should use something quite up to date; and you'll have to change that line when you upgrade...)
Not as elegant, but a small price to pay to use libsass.
Update: If you put includePaths: ['/Library/Ruby/Gems/2.0.0/gems/susy-2.2.2/sass'] in your Gulp task you can get away with just "#import susy;", although you just moved the untidyness somewhere else.
It's probably neater to do it with Bower, as explained in another answer down here, and to have a local susy install for the project; but since I'm not using bower yet (shame on me), I just use a global susy copy for all my projects.

Resources