I'm trying out gulp for the first time on a Windows Server 2012 VM. I'm normally a Mac user, so I'm a bit new to Windows & Powershell for dev tools like this. I installed Node.js & npm (and nothing else). I created the following basic Gulpfile to compile my Sass:
Gulpfile.js
var gulp = require('gulp'),
sass = require('gulp-ruby-sass');
gulp.task('styles', function() {
return gulp.src('Content/sass_new/application.scss')
.pipe(sass({ style: 'expanded', }))
.pipe(gulp.dest('Content/css'))
});
gulp.task('watch', function() {
gulp.watch('Content/sass_new/*', ['styles']);
})
gulp.task('default', ['styles']);
In Windows Powershell, I run the gulp command, and it outputs the following:
[10:02:57] Using gulpfile C:\[path to]\gulpfile.js
[10:02:57] Starting 'styles'...
[10:02:57] gulp-ruby-sass: 'sass' is not recognized as an internal or external command,
operable program or batch file.
[10:02:57] Finished 'styles' after 316 ms
[10:02:57] Starting 'default'...
[10:02:57] Finished 'default' after 15 μs
Am I missing something here? Do I need to install Ruby or Sass? I thought to do that, I'd need a Ruby command prompt and PowerShell wouldn't have access to it. Any guidance is appreciated!
Yes that's right, you need to install Ruby and Sass to get gulp-ruby-sass working.
Begin by download the Ruby installer depending on your specs at this address. Once installed you supposed to have it on your system and accessible by PowerShell or the simple command line.
After, just run the command
gem install sass
And you're done.
Download and Install Ruby : http://rubyinstaller.org/
set ruby location to Path Environment Variable
restart the command prompt
and run gem install sass
That's it.
Related
On Bash on Ubuntu on Windows, a gulp task like this;
gulp.task('default', function() {
gulp.watch('./', function() {console.log('change!')});
});
or just calling fs.watch directly from node;
node -e "require('fs').watch('./')"
both fail with the following;
Error: watch ./ EPERM
at exports._errnoException (util.js:1012:11)
at FSWatcher.start (fs.js:1429:19)
at Object.fs.watch (fs.js:1456:11)
at [eval]:1:15
at ContextifyScript.Script.runInThisContext (vm.js:25:33)
at Object.exports.runInThisContext (vm.js:77:17)
at Object.<anonymous> ([eval]-wrapper:6:22)
at Module._compile (module.js:541:32)
at bootstrap_node.js:315:29
at _combinedTickCallback (internal/process/next_tick.js:67:7)
How can I use gulp.watch under Bash on Ubuntu on Windows?
Currently Bash on Ubuntu on Windows has no support for filesystem watchers like inotify. You can vote for such a feature on the project's uservoice.
Further discussion in this github issue
EDIT: Looks like this has now been fixed in development and is set to be released to the general public sometime early 2017.
I'm using the gulp-ruby-sass module to compile my SCSS files. On my Mac the gulp task works fine. However, I cannot get my Windows 10 machine to do the same job, as it keeps throwing an error with broken encoding, so I cannot even read ang google it properly.
[19:22:55] Starting 'sass'...
[19:22:55] "sass" �� ����� ����७��� ��� ���譥�
��������, �ᯮ��塞�� �ணࠬ��� ��� �������� 䠩���.
[19:22:55] Finished 'sass' after 38 ms
Can anyone please help?
Check your <Ruby_installation_path>/bin directory is in
PATHenvironment variable. If not, append it and restart console.
Check compass gem is installed in Ruby. If not, run gem install
compass.
I am trying out gulp as an alternative build tool to Grunt, to compile my scss to css, as I have heard it can be much faster.
I having problems doing even a basic compile of my scss files. I have tried using the gulp-sass, gulp-ruby-sass and gulp-compass plugins for gulp and I get pretty much the same error message every time:
error screen.scss (Line 2 of _grid.scss: Undefined mixin 'box-sizing'.)
So it looks like it is falling down as soon as it hits a compass mixin. I have ruby installed on my PC with compass version 1.0.0.alpha.19 and sass version 3.3.7.
Here is my gulpfile:
var gulp = require('gulp'),
compass = require('gulp-compass'),
sass = require('gulp-ruby-sass');
gulp.task('compass', function() {
gulp.src('../sass/UK/screen.scss')
.pipe(compass({
css: '../css',
sass: '../sass',
sourcemap: true,
style: 'compressed'
}))
.pipe(gulp.dest('../css/UK/screen.css'));
});
gulp.task('sass', function () {
gulp.src('../sass/UK/**/*.scss')
.pipe(sass({ style: 'compressed', sourcemap: true }))
.pipe(gulp.dest('../css/UK'));
});
Any ideas how I tell it where my copy of compass is installed? I thought it was installed globally.
There is bit of confusion around using Compass with Gulp. There are three gulp extensions: gulp-ruby-sass, gulp-compass and gulp-sass. They basically do the same thing. They compile SASS to CSS. But:
gulp-ruby-sass: Is a wrapper around command line tool: sass that comes with the language. It is written in Ruby and it is installed via gem - Ruby's package manager.
gulp-compass: Is a wrapper around command line tool: compass that comes with Compass framework. It is written in Ruby and it is also installed via gem. However, Compass is just a framework. It consists of SASS files only. All that compass command do, is setting paths to framework SASS files to sass command so that Compass dependencies are being resolved.
gulp-sass: Is a wrapper around tool: node-sass which is Node.JS binding to libsass: a C/C++ implementation of a Sass compiler.
The above answers did not work for me since I am using gulp-sass. It does not see Compass files out of the box. So first I installed compass-mixins (SASS files of Compass framework) and later I imported them with compass-importer:
import compass from 'compass-importer';
import sass from 'gulp-sass';
gulp.task('styles', function () {
return gulp.src(config.styles.src)
.pipe(sass({
importer: compass
})
.pipe(gulp.dest(config.styles.dest))
})
You right, compass should be installed globally on your system to get this work, at least easily. I recommend you to uninstall sass and compass to get something clean using
gem uninstall sass && gem uninstall compass
And then re-install them with :
gem install sass
gem install compass --pre
And after you can define a gulp task like so
gulp.task('compass', function () {
return gulp.src('../sass/UK/screen.scss')
.pipe(sass({ compass: true, sourcemap: true, style: 'compressed' }))
.pipe(gulp.dest('../css/UK/screen.css'));
});
Notice that gulp-ruby-sass has a new syntax which should look like:
gulp.task('compass', function ()
sass(../sass/UK/screen.scss, { compass: true, sourcemap: true, style: 'compressed' })
.pipe(gulp.dest('../css/UK/screen.css'));
});
This is my first time using gulp. Up until now I've always used bundle exec compass watch to compile my scss files.
I'm getting the following error in the command prompt when I run gulp:
Syntax error: file to import not found or unreadable: singularitygs
load paths: ... .. on line 14 of C:\<my path>\scss\partials\0_global\_base.scss
events.js:72 throw er; /unhandled 'error' event
<-[36mgulp-ruby-sass<-[39m] Error in plugin '<-[36mgulp-ruby-sass<-[39m':
..
..
at ChildProcess. <anonamous> c:\<my path>\node_modules\gulp-ruby-by-sass\index.js:100:25)
at ChlidProcess.EventEmitter.emit(events.js:98:17)
at maybeClose(child_process.js:743:16)
at Process.ChildProcess._handle.onexit (child_process.js:810:5)
On my _base.scss file, it's seeing:
#import 'singularitygs';
#import 'toolkit';
#import 'sassy-buttons';
All of these extensions are declared in my config.rb file and in my gemfile and work fine when I run bundle exec compass watch
If I comment out singularitygs, I get the same error for toolkit and sassy-buttons if I comment out toolkit. If I comment all of them out, it throws me an error because it doesn't notice variables that toolkit uses.
My gulpfile.js includes the following:
var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
clean = require('gulp-clean'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
livereload = require('gulp-livereload')
compass = require('gulp-compass');
gulp.task('styles',function(){
return gulp.src('scss/*.scss')
.pipe(sass({style: 'expanded', bundleExec:true}))
.pipe(compass({config_file: 'config.rb', css:'stylesheets', sass:'scss', font:'stylesheets/fonts', require: ['singularitygs', 'toolkit', 'sassy-buttons'], bundle_exec:true}))
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(gulp.dest('dist/assets/css'))
.pipe(rename({suffix: '.min'}))
.pipe(minifycss())
.pipe(gulp.dest('dist/assets/css'))
.pipe(notify({message: 'Styles task complete'}));
});
I've been racking my brain at this for over 4 hours and having searching elsewhere for what it could with zero luck. I'm surely not the first person to not have bundled dependencies not work with gulp.
All of my gems are up to date and everything works fine when I compile with bundle exec compass watch. I've also tried reinstalling several different gulp packages like:
npm install gulp-ruby-sass
npm install gulp-compass
I'm also using WAMP and windows 8,.. if that matters at all.
Thanks for your time.
Please try commented the notify line.
ref https://github.com/appleboy/gulp-compass/issues/40
gulp-ruby-sass was messing things up, for some reason. Seems like more people would have ran into this problem before me though.
I commented out sass = require('gulp-ruby-sass'), and .pipe(sass({style: 'expanded', bundleExec:true})) and it worked.
Got an error when trying to run Jeet 2:
In CMD:
Compiling Stylus OK!
Saving Compiled Stylus OK!
Live Reload is on and listening!
Compiling SCSS ... Error!
I'm on Windows XP
Is there something with the Ruby installation on Windows?
I followed your tutorial on https://github.com/CorySimmons/jeet#quick-start
If you can type ruby into your Command Prompt and it doesn't return an error then you have Ruby.
You need to install Compass as well: http://compass-style.org/install/
In Windows command prompt you don't use the $ in front of the gem command! You just type gem update system, instead of $ gem update system.