sindresorhus / gulp-ruby-sass Goto Github PK
View Code? Open in Web Editor NEWCompile Sass to CSS with Ruby Sass
License: MIT License
Compile Sass to CSS with Ruby Sass
License: MIT License
Test case file structure:
scss/app.scss
@import "mixins";
// ...
scss/_mixins.scss
// some outputable CSS, just for test case's sake
.foo { color: green; }
Throws:
[01:46:18] gulp-ruby-sass: error ./app.scss (Line 1: File to import not found or unreadable: mixins.
Load path: C:/Users/Ult/AppData/Local/Temp/gulp-ruby-sass)
Now if I add the absolute path to the scss
directory in the loadPath
option, it compiles but the sourcemap throws an warning as in #47 (can't determine the source files' public URL).
I believe I shouldn't have to add an absolute path to loadPath
in order to @import
using paths relative to the current scss file, this appears to be a regression bug.
When not providing a loadPath
, the directory C:/Users/Ult/AppData/Local/Temp/gulp-ruby-sass
contains a copy of app.scss
and a directory _14139e58-9ebe-4c0f-beca-73a65bb01ce9
containing the output css
file whose content is:
/*
Syntax error: File to import not found or unreadable: mixins.
Load path: C:/Users/Ult/AppData/Local/Temp/gulp-ruby-sass
on line 1 of ./app.scss
1: @import "mixins";
2:
3: html {
4: height: 100%;
5: background: linear-gradient(darken(lightblue, 10%), slateblue) fixed;
6: }
Backtrace:
./app.scss:1
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/tree/import_node.rb:66:in `rescue in import'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/tree/import_node.rb:45:in `import'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/tree/import_node.rb:28:in `imported_file'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/tree/import_node.rb:37:in `css_import?'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/tree/visitors/perform.rb:283:in `visit_import'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/tree/visitors/base.rb:36:in `visit'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/tree/visitors/perform.rb:152:in `block in visit'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/stack.rb:79:in `block in with_base'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/stack.rb:121:in `with_frame'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/stack.rb:79:in `with_base'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/tree/visitors/perform.rb:152:in `visit'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/tree/visitors/base.rb:52:in `block in visit_children'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/tree/visitors/base.rb:52:in `map'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/tree/visitors/base.rb:52:in `visit_children'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/tree/visitors/perform.rb:161:in `block in visit_children'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/tree/visitors/perform.rb:173:in `with_environment'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/tree/visitors/perform.rb:160:in `visit_children'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/tree/visitors/base.rb:36:in `block in visit'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/tree/visitors/perform.rb:180:in `visit_root'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/tree/visitors/base.rb:36:in `visit'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/tree/visitors/perform.rb:151:in `visit'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/tree/visitors/perform.rb:8:in `visit'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/tree/root_node.rb:36:in `css_tree'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/tree/root_node.rb:29:in `render_with_sourcemap'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/engine.rb:371:in `_render_with_sourcemap'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/engine.rb:291:in `render_with_sourcemap'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/compass-import-once-1.0.3/lib/compass/import-once/engine.rb:23:in `block in render_with_sourcemap'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/compass-import-once-1.0.3/lib/compass/import-once/engine.rb:29:in `with_import_scope'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/compass-import-once-1.0.3/lib/compass/import-once/engine.rb:22:in `render_with_sourcemap'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/plugin/compiler.rb:412:in `update_stylesheet'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/plugin/compiler.rb:189:in `block in update_stylesheets'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/plugin/compiler.rb:186:in `each'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/plugin/compiler.rb:186:in `update_stylesheets'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/plugin.rb:82:in `update_stylesheets'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/exec.rb:489:in `watch_or_update'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/exec.rb:346:in `process_result'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/exec.rb:43:in `parse'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/lib/sass/exec.rb:22:in `parse!'
c:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.3.7/bin/sass:13:in `<top (required)>'
c:/Ruby200-x64/bin/sass:23:in `load'
c:/Ruby200-x64/bin/sass:23:in `<main>'
*/
Running node 0.10.26, gulp 3.8.3, latest gulp-ruby-sass (git://github.com/sindresorhus/gulp-ruby-sass.git#83bce4ce1317185add687934c3ec77db3cf0cba6
), Windows 7 x64 Ultimate.
.pipe(sass(bundleExec: true, sourcemap: true))
results in:
[10:15:35] [gulp-ruby-sass]
OptionParser::InvalidOption: invalid option: --sourcemap
events.js:72
throw er; // Unhandled 'error' event
^
Error:
OptionParser::InvalidOption: invalid option: --sourcemap
In latest version when I try to import a file in the same directory it failed unless I explicitly add this directory to loadPath[]
.
foo.sass
:
@import bar
Error message:
Syntax error: File to import not found or unreadable: bar.
Load paths:
<project dir>
<project dir>/app
<project dir>/dist/bower_components
on line 1 of <project dir>/app/styles/foo.sass
I'm going a tiny bit crazy trying to figure out how to import CSS files from bower_components
into my stylesheet. Here's my setup…
gulpfile
gulp.task('styles', function () {
return gulp.src(['styles/**/*.scss', 'Gemfile'])
.pipe($.rubySass({
bundleExec: true,
require: 'sass-globbing',
style: 'compressed'
}))
.pipe(gulp.dest('styles'));
});
main.scss
// Vendor
@import "../bower_components/susy/sass/susy";
@import "../bower_components/breakpoint-sass/stylesheets/breakpoint";
@import "../bower_components/sass-toolkit/stylesheets/toolkit";
// Global
@import "global/**/*";
// Modules
@import "modules/**/*";
// Layout
@import "layout/**/*";
package.json
…
"devDependencies": {
"gulp": "^3.6.0",
"gulp-load-plugins": "^0.5.0",
"gulp-ruby-sass": "git://github.com/sindresorhus/gulp-ruby-sass.git#25664c03a40e66c6466dc7f117c48a8aa0307917"
},
…
With this setup, I get an error of…
gulp-ruby-sass: error ./main.scss (Line 2: File to import not found or unreadable: ../bower_components/susy/sass/susy.
Load paths:
/private/var/folders/p6/253gpb7s10x_pdvf877wdhjc0000gn/T/gulp-ruby-sass
Sass::Globbing::Importer)
I can mostly get things to work by adding all .css
and .scss
files from bower_components
to the gulp source, but that's very awkward and then my css output directory ends up with folders for each of the bower components.
…
return gulp.src(['styles/**/*.scss', 'bower_components/**/*.css', 'bower_components/**/*.scss', 'Gemfile'])
…
All of this compiles just fine when running sass via the command line.
sass -r sass-globbing --watch styles:styles
What is the best way to handle an import situation like this?
I did a fresh install of Mavericks yesterday. I installed node (using homebrew), Sass 3.3, Compass, and upgraded Ruby. Nonetheless, gulp-ruby-sass now prints the afore stated error when I try to run it. I reduced my gulpfile to comprise only what is below in a failed process of elimination. Before I did this every gulp task except gulp-ruby-sass worked. If I change the gulp.src to something that doesn't navigate correctly to my main.scss file – such as "source/main.scss"– the 'styles' task runs successfully. But when I point the task to my main.scss file, the error is printed.
Gulpfile:
var gulp = require("gulp"),
sass = require("gulp-ruby-sass");
gulp.task("styles", function(){
return gulp.src("source/scss/main.scss")
.pipe(sass({ compass: true }))
.pipe(gulp.dest("source/css"));
});
Main.scss file:
@import "compass";
@import "0.1. silent/mixins";
@import "0.1. silent/variables";
@import "1. base/reset";
@import "1. base/elements";
@import "2. layout/grid";
@import "2. layout/major-components";
@import "2. layout/minor-components";
@import "3. modules/animation";
@import "3. modules/borders";
@import "3. modules/buttons/buttons";
@import "3. modules/clearfix";
@import "3. modules/colors";
@import "3. modules/doc";
@import "3. modules/font-face";
@import "3. modules/footer";
@import "3. modules/forms";
@import "3. modules/helper";
@import "3. modules/how-do-I";
@import "3. modules/icons";
@import "3. modules/img";
@import "3. modules/index";
@import "3. modules/island";
@import "3. modules/lists";
@import "3. modules/login";
@import "3. modules/logo";
@import "3. modules/margins";
@import "3. modules/masthead";
@import "3. modules/problem";
@import "3. modules/header";
@import "3. modules/typography";
@import "4. states/buttons";
@import "4. states/footer";
@import "4. states/index";
@import "4. states/landing";
@import "4. states/links";
@import "4. states/problem";
@import "4. states/top-nav";
package.json file:
{
"name": "iWantToStudyEngineering",
"description": "An educational web app designed and built by members of the University of Cambridge",
"author": "Max Alfie Murdoch",
"version": "0.1.0",
"repository": {
"type": "git",
"url": "[email protected]:maxalfiemurdoch/iWantToStudyEngineering"
},
"devDependencies": {
"gulp": "^3.5.5",
"gulp-ruby-sass": "^0.4.0",
"gulp-load-plugins": "^0.4.0"
}
}
config.rb file:
http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "img"
javascripts_dir = "js"
fonts_dir = "css/fonts"
#fonts_dir = "iWantToStudyEngineering/css/fonts"
output_style = :nested
relative_assets = false
color_output = false
preferred_syntax = :scss
Any help would be greatly appreciated.
I'm converting my Toolkit project from Grunt to Gulp and my first step was to get Sass working. Thought it would be straight forward, but am running into nothing but problems.
Here's my gulp file: https://github.com/titon/toolkit/blob/2.0/gulpfile.js
When running gulp
without loadPath
defined, it blows up on trying to import a relative file. Example can be found in these 2 files:
https://github.com/titon/toolkit/blob/2.0/scss/toolkit/components/accordion.scss
https://github.com/titon/toolkit/blob/2.0/scss/toolkit/_common.scss#L459
If I add a bunch of paths to loadPath
then it works. I shouldn't have to do this.
This is the issue I've been having that appears to be conflicting with gulp-ruby-sass.
gulpjs/gulp#340
Hi,
I've just tried a Gulp tutorial and I'm getting errors trying to use gulp-ruby-sass.
My gulpfile.js is as follows:
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'),
Livereload depends on tiny-lr server being intialised
lr = require('tiny-lr'),
server = lr();
gulp.task('styles', function() {
return gulp.src('src/styles/**/*.scss')
.pipe(sass({ style: 'expanded' }))
.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(livereload(server))
.pipe(notify({ message: 'Styles task complete' }));
});
After running 'gulp styles' I encounter the following error:
events.js:72
throw er; // Unhandled 'error' event
^
Error: spawn ENOENT
at errnoException (child_process.js:980:11)
at Process.ChildProcess._handle.onexit (child_process.js:771:34)
Anyone got any ideas what is going on here and how I could fix it?
Thanks.
What's the point of this without using the sass binary's watch option?
Generated sourcemap URL
http://localhost:9000/Developer/Work/MyApp/app/styles/_animations.scss
expected sourcemap URL
http://localhost:9000/styles/_animations.scss
I seem to be having a problem with the gulp-ruby-sass, but there's not a lot of descriptive information on the output.
$ gulp
[gulp] Using gulpfile /Users/jalvarado/Documents/Juan/jquery.cbFlyout/gulpfile.js
[gulp] Starting 'clean'...
[gulp] Finished 'clean' after 9.03 ms
[gulp] Starting 'default'...
[gulp] Starting 'styles'...
[gulp] Starting 'scripts'...
[gulp] Finished 'default' after 46 ms
[gulp] gulp-notify: [Gulp notification] Scripts task complete
events.js:72
throw er; // Unhandled 'error' event
^
[gulp] Error in plugin 'gulp-ruby-sass': Exited with error code 1
at ChildProcess.<anonymous> (/Users/jalvarado/Documents/Juan/jquery.cbFlyout/node_modules/gulp-ruby-sass/index.js:93:25)
at ChildProcess.EventEmitter.emit (events.js:98:17)
at maybeClose (child_process.js:743:16)
at Socket.<anonymous> (child_process.js:956:11)
at Socket.EventEmitter.emit (events.js:95:17)
at Pipe.close (net.js:465:12)
My gulpfile looks like this.
var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
clean = require('gulp-clean'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
livereload = require('gulp-livereload'),
lr = require('tiny-lr'),
server = lr();
gulp.task('styles', function() {
return gulp.src('scss/global.scss')
.pipe(sass({ style: 'expanded', compass: true }))
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(gulp.dest('css/'))
.pipe(rename({suffix: '.min'}))
.pipe(minifycss())
.pipe(gulp.dest('css/'))
.pipe(livereload(server))
.pipe(notify({ message: 'Styles task complete' }));
});
gulp.task('scripts', function() {
return gulp.src('js/src/*.js')
.pipe(concat('main.js'))
.pipe(gulp.dest('js/dist/'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('js/dist/'))
.pipe(livereload(server))
.pipe(notify({ message: 'Scripts task complete' }));
});
gulp.task('clean', function() {
return gulp.src(['css/', 'js/dist/'], {read: false})
.pipe(clean());
});
gulp.task('default', ['clean'], function() {
gulp.start('styles', 'scripts');
});
gulp.task('watch', function() {
// Listen on port 35729
server.listen(35729, function (err) {
if (err) {
return console.log(err)
};
// Watch .scss files
gulp.watch('scss/*.scss', ['styles']);
// Watch .js files
gulp.watch('js/src/*.js', ['scripts']);
});
});``
Directory Structure
├── README.md
├── gulpfile.js
├── index.html
├── css
├── js
│ ├── dist
│ │ ├── main.js
│ │ └── main.min.js
│ └── src
│ ├── jquery.cbFlyout.js
│ ├── jquery.js
│ └── main.js
├── node_modules
├── package.json
└── scss
└── global.scss
Any tips on what might be happening?
Hi, while trying to run my gulp settings, i encounter an error with the plugin, can't figure out what's wrong ? I've install gulp and plugins with npm.
Looks like 'sass' is "unknow" ? Does this mean that i need to install ruby or something like that ?
C:\Workspace\webapp>gulp
[gulp] Using file C:\Workspace\webapp\gulpfile.js
[gulp] Working directory changed to C:\Workspace\webapp
[gulp] Running 'clean'...
[gulp] Finished 'clean' in 4.92 ms
[gulp] Running 'default'...
[gulp] Running 'styles'...
[gulp] Running 'images'...
[gulp] Finished 'default' in 6.29 ms
[gulp] Finished 'images' in 5.59 ms
events.js:72
throw er; // Unhandled 'error' event
^
[←[32mgulp←[39m] Error in plugin '←[36mgulp-ruby-sass←[39m':
'sass' n'est pas reconnu en tant que commande interne
ou externe, un programme ex´┐¢cutable ou un fichier de commandes.
at ChildProcess.<anonymous> (C:\Workspace\webapp\node_modules\gulp-ruby-sass
\index.js:73:25)
at ChildProcess.EventEmitter.emit (events.js:98:17)
at maybeClose (child_process.js:735:16)
at Socket. (child_process.js:948:11)
at Socket.EventEmitter.emit (events.js:95:17)
at Pipe.close (net.js:466:12)
Thanks for your help.
If you use "bundleExec: true" as option your gulp plugin crashes.
This is the console output:
stream.js:94
throw er; // Unhandled stream error in pipe.
^
[gulp] Error in plugin 'gulp-ruby-sass': Exited with error code 1
at ChildProcess.<anonymous> (/Users/user/Desktop/gulp/node_modules/gulp-ruby-sass/index.js:60:16)
at ChildProcess.EventEmitter.emit (events.js:98:17)
at maybeClose (child_process.js:735:16)
at Socket.<anonymous> (child_process.js:948:11)
at Socket.EventEmitter.emit (events.js:95:17)
at Pipe.close (net.js:466:12)
PS: I've tried it with following options (without problem though):
style: 'nested',
debugInfo: false,
lineNumbers: true,
loadPath: 'scss'
I have a tiered structure in my app/assets/sass/
directory which I am trying to mirror in the CSS output files in public/css/
, but all the *.scss files in my sass directory and subdirectories are being put into the root public/css/
folder.
Here is my gulpfile:
When I comment out the lines between gulp.src(sassDir ...)
and .pipe(gulp.dest('public/css'));
the directory structure is maintained, but the sass is not compiled. Uncommenting the .pipe(sass(...))
line reproduces the issue.
var gulp = require('gulp');
var plumber = require('gulp-plumber');
var gutil = require('gulp-util');
var minifycss = require('gulp-minify-css');
var autoprefixer = require('gulp-autoprefixer');
var sass = require('gulp-ruby-sass');
var coffee = require('gulp-coffee');
var sassDir = 'app/assets/sass/';
var coffeeDir = 'app/assets/coffee/';
gulp.task('sass', function() {
return gulp.src(sassDir + '**/*.scss', { base: sassDir })
.pipe(plumber())
.pipe(sass({ style: 'compress' }).on('error', gutil.log))
.pipe(autoprefixer('last 10 versions'))
.pipe(minifycss())
.pipe(gulp.dest('public/css'));
});
gulp.task('coffee', function() {
return gulp.src(coffeeDir + '**/*.coffee', { base: coffeeDir })
.pipe(plumber())
.pipe(coffee({ bare: true }).on('error', gutil.log))
.pipe(gulp.dest('public/js/coffee)'));
});
gulp.task('watch', function() {
gulp.watch(sassDir + '/**/*.scss', ['sass']);
gulp.watch(coffeeDir + '/**/*.coffee', ['coffee']);
});
gulp.task('default', ['sass', 'coffee', 'watch']);
I get a warning if I don't use fontspring bulletproof syntax in my webfont declaration.
In the URL specified in the warning the article says that there is a new version of this syntax:
Further Hardening of the Bulletproof Syntax
http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax
Which one should we use? (If I use the new one I still receive this warning)
I'm not sure why, but this plugin is slow. I think it has to do with trying to parallelize the compilation (although using the orig source as a load path is pretty clever).
I ran a test with these files, but duplicating the test file 50 times. For one run I used gulp-ruby-sass then autoprefixer, and for the other I used gulp-intermediate running sass in a spawned process over all files at once and then autoprefixer. Task setup:
gulp.task('styles', function () {
return gulp.src('app/styles/**/*.scss')
.pipe($.rubySass())
.pipe($.autoprefixer('last 2 versions'))
.pipe(gulp.dest('.tmp/styles'));
});
gulp.task('styles-int', function () {
return gulp.src('app/styles/**/*.scss')
.pipe($.intermediate('temp/app/styles', function(tempDir, cb) {
var sass = spawn('sass', ['--update', '.:temp'], {cwd: tempDir});
sass.on('close', cb);
}))
.pipe($.autoprefixer('last 2 versions'))
.pipe(gulp.dest('.tmp/styles'));
});
I think it's faster to process everything at the same time. If you like I can write up a PR to start it off, but probably won't have time to make it complete for a couple weeks.
When using sass --watch, errors are printed to the css stylesheet in body:before which causes them to show up on the page in the browser. Is this possible currently? If not, I would find it very useful so I don't have to keep an eye on my gulp console.
I noticed that gulp-sass has a functionality "errLogToConsole" that makes the task not stop the whole watch-process if there is a synthax-error in the SASS. Are there plans to add this to this sass-version?
Apologies for the noob question but how do I add options to this task? See below for my existing task?
// Compile Our Sass
gulp.task('sass', function() {
gulp.src(['./scss/kickoff.scss', './scss/kickoff-old-ie.scss', './scss/styleguide.scss'])
.pipe(sass())
.pipe(gulp.dest('./css'));
});
Thanks
With debugInfo set to true @media mixins nested into normal rules are mis-rendered.
For example:
html
{
@include mq(xlp)
{
font-size: 80%;
}
@include mq(stol)
{
font-size: 62.5%;
}
@include mq(sl)
{
font-size: 54.5%;
}
}
All those mixins are rendered as normal rules surronded by thoses @media debug infos markups, instead of having @media queries:
@media -sass-debug-info{filename{font-family:file\:\/\/\/Volumes\/Data\/vivien\/Outils\/Modeles\/Developpement\/gulp_workflow\/_source\/_sass\/_element\.scss}line{font-family:\000038}}
* {
margin-bottom: 0;
}
@media -sass-debug-info{filename{font-family:file\:\/\/\/Volumes\/Data\/vivien\/Outils\/Modeles\/Developpement\/gulp_workflow\/_source\/_sass\/_element\.scss}line{font-family:\0000313}}
html {
font-size: 80%;
}
@media -sass-debug-info{filename{font-family:file\:\/\/\/Volumes\/Data\/vivien\/Outils\/Modeles\/Developpement\/gulp_workflow\/_source\/_sass\/_element\.scss}line{font-family:\0000313}}
html {
font-size: 62.5%;
}
@media -sass-debug-info{filename{font-family:file\:\/\/\/Volumes\/Data\/vivien\/Outils\/Modeles\/Developpement\/gulp_workflow\/_source\/_sass\/_element\.scss}line{font-family:\0000313}}
html {
font-size: 54.5%;
}
}
This behavior doesn't happen with sass when used directly with ruby.
This might have a positive effect on speed, especially for large sass projects. I'm using this plugin as a template for another plugin I'm playing around with, so after I grok what's going on here I'll try a PR.
Here's a simplified test case:
app.scss
@import "partial";
_partial.scss
// must contain some outputable CSS
.foo { color: blue; }
gulpfile.js:
var gulp = require('gulp'),
sass = require('gulp-ruby-sass');
gulp.task('default', function() {
gulp.src('scss/app.scss')
.pipe(sass({ sourcemap: true }))
.pipe(gulp.dest('public/css'));
});
Throws:
WARNING: Couldn't determine public URL for "path/to/_partial.scss" while generating sourcemap.
Without a public URL, there's nothing for the source map to link to.
Using Sass 3.3.5, gulp-ruby-sass 0.4.3, gulp 3.6.2, node 0.10.26.
Is this a bug? Am I overlooking something? Any possible workaround?
Thanks.
When compiling with source maps, the imports go to the root ('/') and back again to the folder where the scss files reside, example:
"sources": ["../../../../../../Users/xxx/Documents/test/src/styles/_normalize.scss"]
This makes it impossible to run the source maps in a localhost web server.
I have partials in a sub directory of my sass folder and when I compile my sass they are ignored correctly, however they remain in the stream and are copied to my css folder. This means any further processing tasks break and I have partials in my distribution folder that I don't really want. I can remove them with gulp-ignore but it would be nice if this could be done automatically.
I am creating a gulp task using 'gulp-ruby-sass' and I getting this error back in the terminal.
Syntax error: File to import not found or unreadable: compass.
Load paths:
/Users/antonioortiz/Sites/_test/_aortizRefresh_
/Users/antonioortiz/Sites/_test/_aortizRefresh_/source/assets/sass
on line 38 of /Users/antonioortiz/Sites/_test/_aortizRefresh_/source/assets/sass/style.scss
My compass version is Compass 0.12.4 (Alnilam)
And my version of sass is Sass 3.2.18 (Media Mark)
This is some excerpts of my gulfile.js
var sassSources = ['source/assets/sass/style.scss'];
gulp.task('sass', function(){
gulp.src(sassSources)
.pipe(sass({style:'expanded', lineNumbers:true}))
.pipe(concat('style.css'))
.pipe(gulp.dest('source/stylesheets'))
.pipe(livereload());
});
gulp.task('watch', function() {
var server = livereload();
gulp.watch(jsSources,['js']);
gulp.watch(sassSources,['sass']);
gulp.watch(['javascript/script.js', 'source/*.html'], function(e){
server.changed(e.path);
});
});
gulp.task('default', [ 'sass', 'js', 'watch']);
Any help would be fantastic!
Please add default encoding UTF-8.
sass -E UTF-8 scss:css
When gulp-ruby-sass is running with gulp.watch()
and a new file is created, it's not processing the file.
I'm not sure if this is a problem with gulp.watch
or gulp-ruby-sass.
Task is as follows:
var gulp = require('gulp'),
sass = require('gulp-ruby-sass');
gulp.task('sass', function () {
gulp.src('./scss/*.scss')
.pipe(sass({
style : 'compressed'
}))
.pipe(gulp.dest('./css'));
});
gulp.task('default', function () {
gulp.watch([
'./scss/*.scss',
'./scss/**/*.scss'
], function () {
gulp.run('sass');
})
})
Versions:
"devDependencies": {
"gulp": "~3.4.0",
"gulp-ruby-sass": "~0.1.2"
}
I'm trying to use sass-json-vars to allow me to read variable values from a JSON file. I've included the JSON file in the src glob but then I get the not found/unreadable error, I assume because gulp-ruby-sass is trying to interpret it as an SCSS file. If I remove the JSON file from my src glob I still get the not found error (which I think is explained in issue #63).
Is there anyway to import other types of files so that plugins can interact with them?
With the source map option enabled the plugin outputs the compiled css and source map file into the /tmp/ directory with temporary names, but only the compiled css makes it to the destination directory as style.css.
Also, the style.css in the target directory still has the temporary map name on the sourceMappingURL line. The final output (for me) was
/tmp/
9941bc42-517f-433c-ab65-e1168fbcd722.sass.map
9941bc42-517f-433c-ab65-e1168fbcd722.sass
/[project]/sass/
style.scss
/[project]/css/
style.css
where the sourceMappingURL on the final line of css/style.css is
/*# sourceMappingURL=9941bc42-517f-433c-ab65-e1168fbcd722.sass.map */
I'm taking a guess that sass cacheing isn't working in this plugin currently, because each file is written to the temp directory before processing which gives it a newer file-changed date than the cached file.
Can't think of a fix for this off the top of my head — using gulp-changed would work for files that no other files depend on, but without knowing the dependency tree I'm not sure how to handle a file containing a mixin that unchanged files depend on (like _obj.scss in the test files). Sass probably has this figured out, and it might just work with a combo of -changed, -intermediate, adding the source files to load paths, and a Sass cache in the local root folder.
Some docs on sass-caching: https://twitter.com/nex3/status/475324934491602945
I am getting this error, any idea?
vents.js:72
throw er; // Unhandled 'error' event
^
[gulp] Error in plugin 'gulp-ruby-sass':
DEPRECATION WARNING on line 25 of /Users/max/workspace/dev/sass/bourbon/addons/_html5-input-types.scss:
Assigning to global variable "$unquoted-inputs-list" by default is deprecated.
In future versions of Sass, this will create a new local variable.
If you want to assign to the global variable, use "$unquoted-inputs-list: append($unquoted-inputs-list, unquote($input-type), comma) !global" instead.
Note that this will be incompatible with Sass 3.2.
DEPRECATION WARNING on line 36 of /Users/max/workspace/dev/sass/bourbon/addons/_html5-input-types.scss:
Assigning to global variable "$all-text-inputs-hover" by default is deprecated.
In future versions of Sass, this will create a new local variable.
If you want to assign to the global variable, use "$all-text-inputs-hover: append($all-text-inputs-hover, $input-type-hover, comma) !global" instead.
Note that this will be incompatible with Sass 3.2.
DEPRECATION WARNING on line 44 of /Users/max/workspace/dev/sass/bourbon/addons/_html5-input-types.scss:
Assigning to global variable "$all-text-inputs-focus" by default is deprecated.
In future versions of Sass, this will create a new local variable.
If you want to assign to the global variable, use "$all-text-inputs-focus: append($all-text-inputs-focus, $input-type-focus, comma) !global" instead.
Note that this will be incompatible with Sass 3.2.
at ChildProcess.<anonymous> (/Users/max/workspace/dev/node_modules/gulp-ruby-sass/index.js:87:25)
at ChildProcess.EventEmitter.emit (events.js:98:17)
at maybeClose (child_process.js:743:16)
at Socket.<anonymous> (child_process.js:956:11)
at Socket.EventEmitter.emit (events.js:95:17)
at Pipe.close (net.js:465:12)
I'm trying to use sass-globbing in a project and am mostly up & running now using the latest commit: 66069e7. Part of the solution I gathered from #32 is including my Gemfile in the src files, but this seems to blow up whenever a gem from Git is specified:
gem 'bourbon', git: '[email protected]:thoughtbot/bourbon.git', ref: '43e9c5bed97fc7d214107dc788451c7bdcaddad6'
gem 'shopify_theme', git: '[email protected]:Shopify/shopify_theme.git', ref: '678ca2d6e8c890d11cc868f69afd98b3d86fcd6d'
Either of the above error out in compilation with this:
[20:21:21] gulp-ruby-sass: /Users/eric/.rvm/gems/ruby-1.9.3-p448@global/gems/bundler-1.6.2/lib/bundler/source/git/git_proxy.rb:151:in `allowed_in_path': The git source [email protected]:thoughtbot/bourbon.git is not yet checked out. Please run `bundle install` before trying to start your application (Bundler::GitError)
from /Users/eric/.rvm/gems/ruby-1.9.3-p448@global/gems/bundler-1.6.2/lib/bundler/source/git/git_proxy.rb:47:in `revision'
from /Users/eric/.rvm/gems/ruby-1.9.3-p448@global/gems/bundler-1.6.2/lib/bundler/source/git.rb:211:in `revision'
from /Users/eric/.rvm/gems/ruby-1.9.3-p448@global/gems/bundler-1.6.2/lib/bundler/source/git.rb:81:in `install_path'
from /Users/eric/.rvm/gems/ruby-1.9.3-p448@global/gems/bundler-1.6.2/lib/bundler/source/path.rb:126:in `load_spec_files'
from /Users/eric/.rvm/gems/ruby-1.9.3-p448@global/gems/bundler-1.6.2/lib/bundler/source/git.rb:184:in `load_spec_files'
from /Users/eric/.rvm/gems/ruby-1.9.3-p448@global/gems/bundler-1.6.2/lib/bundler/source/path.rb:92:in `local_specs'
from /Users/eric/.rvm/gems/ruby-1.9.3-p448@global/gems/bundler-1.6.2/lib/bundler/source/git.rb:154:in `specs'
from /Users/eric/.rvm/gems/ruby-1.9.3-p448@global/gems/bundler-1.6.2/lib/bundler/definition.rb:522:in `block in converge_locked_specs'
from /Users/eric/.rvm/gems/ruby-1.9.3-p448@global/gems/bundler-1.6.2/lib/bundler/definition.rb:511:in `each'
from /Users/eric/.rvm/gems/ruby-1.9.3-p448@global/gems/bundler-1.6.2/lib/bundler/definition.rb:511:in `converge_locked_specs'
from /Users/eric/.rvm/gems/ruby-1.9.3-p448@global/gems/bundler-1.6.2/lib/bundler/definition.rb:191:in `resolve'
from /Users/eric/.rvm/gems/ruby-1.9.3-p448@global/gems/bundler-1.6.2/lib/bundler/definition.rb:133:in `specs'
from /Users/eric/.rvm/gems/ruby-1.9.3-p448@global/gems/bundler-1.6.2/lib/bundler/definition.rb:178:in `specs_for'
from /Users/eric/.rvm/gems/ruby-1.9.3-p448@global/gems/bundler-1.6.2/lib/bundler/definition.rb:167:in `requested_specs'
from /Users/eric/.rvm/gems/ruby-1.9.3-p448@global/gems/bundler-1.6.2/lib/bundler/environment.rb:18:in `requested_specs'
from /Users/eric/.rvm/gems/ruby-1.9.3-p448@global/gems/bundler-1.6.2/lib/bundler/runtime.rb:13:in `setup'
from /Users/eric/.rvm/gems/ruby-1.9.3-p448@global/gems/bundler-1.6.2/lib/bundler.rb:120:in `setup'
from /Users/eric/.rvm/gems/ruby-1.9.3-p448@global/gems/bundler-1.6.2/lib/bundler/setup.rb:17:in `<top (required)>'
from /Users/eric/.rvm/rubies/ruby-1.9.3-p448/lib/ruby/site_ruby/1.9.1/rubygems/core_ext/kernel_require.rb:55:in `require'
from /Users/eric/.rvm/rubies/ruby-1.9.3-p448/lib/ruby/site_ruby/1.9.1/rubygems/core_ext/kernel_require.rb:55:in `require'
var paths = {
styles: ['Gemfile','assets/bower/**/*.{css,scss}','assets/fonts/*.scss','assets/styles/**/*']
};
gulp.task('sass', function(){
gulp.src(paths.styles)
.pipe(sass({
bundleExec: true,
loadPath: ['assets/bower','assets/fonts','assets/styles'],
require: ['sass-globbing'],
sourcemap: true
}))
.on('error', logError)
.pipe(gulp.dest('theme/assets'))
});
For now I'm working around this with a separate Gemfile for these particular dependencies (it's a CLI util), but this should work.
I realise that there have already been a few issues raised with the way errors are handled, and from what I understand the problem lies with Gulp rather than gulp-ruby-sass... that being said, I'd love it if at least for the meantime we could get more customised success/error messages. https://github.com/dlmanning/gulp-sass allows for personalisation of the terminal making feedback much easier to read without killing the watch task - compare the below screenshots.
I believe much of the attraction of Gulp/Grunt - especially over GUI's - is the high level of customisation, it would be nice we could get something similar in gulp-ruby-sass, even if it's just until Gulp has come up with a better solution.
Thanks!
Hello everyone.
I'm not a SCSS expert so, maybe, I'm writing it wrong but when I try to do something like
[Other code ]
$prefix-webkit: $original-prefix-webkit ! global;
[Other code]
Gulp throws me an exception
Syntax error: Invalid CSS after "...dules, $name) !": expected identifier, was " global;"
The solution is easy, just remove the !
near the global
identifier but I know that that is a correct SCSS statement so gulp might be wrong. Anyone has this issue?
I'm using
[gulp] CLI version 3.6.2
[gulp] Local version 3.8.0
Hi,
The plugin seems to be very sensitive when running gulp watch, making a small mistake completely kills the watch task completely. How can I prevent prevent this task from dieing instead just getting a notification?
[gulp] Finished 'compass' in 606 ms
[gulp] Running 'compass'...
[gulp] Running 'livereload'...
[gulp] Finished 'livereload' in 61 μs
events.js:72
throw er; // Unhandled 'error' event
^
[gulp] Error in plugin 'gulp-ruby-sass':
Syntax error: Invalid CSS after " line-height: 1": expected ";", was "."
on line 10 of /Users/kylehouston/Sites/the-quays-static/css/src/partials/_lists.scss
from line 13 of /Users/kylehouston/Sites/the-quays-static/css/src/base.scss
at ChildProcess.<anonymous> (/Users/kylehouston/Sites/the-quays-static/node_modules/gulp-ruby-sass/index.js:74:25)
at ChildProcess.EventEmitter.emit (events.js:98:17)
at maybeClose (child_process.js:735:16)
at Socket.<anonymous> (child_process.js:948:11)
at Socket.EventEmitter.emit (events.js:95:17)
at Pipe.close (net.js:466:12)
My task for sass and my watch command are as follow:
// SASS + Compass Tasks.
gulp.task('compass', function() {
return gulp.src('./css/src/base.scss')
.pipe(sass({ style: 'compressed', compass: true }))
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('./css'))
.pipe(livereload(server))
.pipe(notify({ message: 'Compass task complete.' }));
});
// Watch Task.
gulp.task('watch', function() {
gulp.watch('./js/*/*.js', ['scripts']);
gulp.watch('./css/src/**/*.scss', ['compass', 'livereload']);
gulp.watch('./templates/*.hbs', ['templates']);
});
i'd like to provide an alternative source of compass config
if the compass
prop would be an object, it would be converted into a temporary config.rb
to be used by sass --compass
.
so config like
//...
.pipe(sass({
compass : {
sassDir : 'assets/styles',
imagesDir : 'assets/images',
fontsDir : 'assets/fonts',
generatedImagesDir : 'public/images',
cssDir : 'public/styles',
httpPath : '/',
httpStylesheetsPath : '/styles',
httpGeneratedImagesPath : '/images',
httpFontsPath : '/fonts'
}
})
//...
would create a temporary config.rb
file looking like
sass_dir = "assets/styles"
images_dir = "assets/images"
fonts_dir = "assets/fonts"
generated_images_dir = "public/images"
css_dir = "public/styles"
http_path = "/"
http_stylesheets_path = "/styles"
http_generated_images_path = "/images"
http_fonts_path = "/fonts"
hope that makes sense?
what about an onSuccess? I've got the following
// SCSS Compiling and Minification
gulp.task('scss', function(){
return gulp.src(build + '/styles/app.scss')
.pipe( sass({ style: 'expanded', debugInfo: true, lineNumbers: true }).on("error", notify.onError(function (error) {
gutil.beep();
return error.message;
})))
.pipe( gulp.dest(dist + '/css') )
.pipe( notify({
message: "Generated file: <%= file.relative %>"
}));
});
I only want to notify minification success message on success. Right now it spits that last notify message even after an error has been thrown. When an error is thrown I want to notify of the error and not have the .pipe( notify({}) ) be run at the end. I've tried moving things around and can't seem to get the desired outcome.
Also noticed that gutil.beep() doesn't work inside of the onError, this is probably something stupid but wondering if I'm on the right track.
It would be nice to have the following
// SCSS Compiling and Minification
gulp.task('scss', function(){
return gulp.src(build + '/styles/app.scss')
.pipe(
sass({ style: 'expanded', debugInfo: true, lineNumbers: true })
.on("error", notify.onError(function (error) {
gutil.beep();
return error.message;
}))
.on("success", notify({
message: "Generated file: <%= file.relative %>"
}))
)
.pipe( gulp.dest(dist + '/css') );
});
You wrote:
Note that files starting with _ are ignored even if they match the globbing pattern.
But how can I work with partials and @import? Have a look at http://stackoverflow.com/questions/21558235/sass-imports-dont-work-with-gulp-ruby-sass/ where I describe my problem. I don't know if it is a problem from the package or by me. Have you any suggestions?
Thanks in advance
Ralf
Updated just now to the new Sass release and gulp-ruby-sass 0.4, and now it would seem gulp-ruby-sass dies every time it tries to compile the css.
This is the error:
events.js:72
throw er; // Unhandled 'error' event
^
[gulp] Error in plugin 'gulp-ruby-sass': Exited with error code 1
at ChildProcess.<anonymous> (/Users/fred/www/node_modules/gulp-ruby-sass/index.js:93:25)
at ChildProcess.EventEmitter.emit (events.js:98:17)
at maybeClose (child_process.js:735:16)
at Socket.<anonymous> (child_process.js:948:11)
at Socket.EventEmitter.emit (events.js:95:17)
at Pipe.close (net.js:466:12)
What could I try to debug this?
the following task causes all partials to be duplicated into the output directory:
gulp.task('scss', function () {
return gulp.src(WEBAPP_PATH + '/scss/*/.scss')
.pipe(cache('scss'))
.pipe(sass({ style: 'expanded' }))
.pipe(gulp.dest(WEBAPP_PATH + '/public/css'))
});
Any thoughts on how to avoid?
Current 'styles' gulp task:
//styles
gulp.task('styles', function() {
var stream = gulp.src(paths.scss)
.pipe(sass({ style: 'expanded' }).on('error', function(error) {
gutil.log('SASS error', error.message);
}))
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(gulp.dest(paths.css))
.pipe(rename({suffix: '.min'}))
.pipe(minifycss())
.pipe(gulp.dest(paths.css));
});
and watch task:
// watch task
gulp.task('watch', function() {
// Watch .scss files
gulp.watch(paths.scss, ['styles']);
// Watch .js files
gulp.watch(paths.scripts_src, ['scripts']);
});
When there is an error, the scss source files will end up in the dist directory.
When my stream finishes, I have gulp-notify
at the end to let me know everything is complete. I've tested gulp-sass
and when an error occurs it doesn't continue the stream and reach notify.
However, with gulp-ruby-sass
, despite an error, it'll continue on and reach notify. Is there a way to prevent this behaviour?
Hi ;
I think we've got some relative path stripping issue.
I have to work on that kind of file structure:
/Styles
/Styles/FR
/Styles/FR/FRA
/Styles/FR/FRA/style1
/Styles/FR/FRA/style1/Content
/Styles/FR/FRA/style1/Content/style1.scss
/Styles/FR/FRA/style2
/Styles/FR/FRA/style2/Content
/Styles/FR/FRA/style2/Content/style2.scss
[...]
I want to directly process the .scss files to ouput the .css in the same directory, avoiding :
.pipe(gulp.dest('dist'))
My gulpfile.js
is run from the root /
:
gulp.task('css', function() {
return gulp.src('Styles/FR/FRA/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('Styles/FR/FRA'))
.pipe(debug());
});
I guess it should results as :
[...]
/Styles/FR/FRA/style2/Content/style2.scss
/Styles/FR/FRA/style2/Content/style2.css
However, instead of keeping my file structure, it outputs:
[...]
/Styles/FR/FRA/style2/Content/style2.scss
/Styles/FR/FRA/style2.css
Which is kind of tricky to handle, as I've hundreds of scss files I don't want to concatenate.
Any fix please?
Hi, and sorry its noob error I'm getting. I keep getting the below, even though I have full acess. Any ideas?
stream.js:94
throw er; // Unhandled stream error in pipe. Error: EACCES, mkdir '/css'
I get the following error when running gulp:
events.js:72
throw er; // Unhandled 'error' event
^
[gulp] Error in plugin 'gulp-ruby-sass':
Errno::ETXTBSY: Text file busy - ./.sass-cache/67dd0e11dbc3b251e42363d30b0218c1867f13d9/main.scssc20140219-11533-163s3hi-0 or ./.sass-cache/67dd0e11dbc3b251e42363d30b0218c1867f13d9/main.scssc
at ChildProcess.<anonymous> (/vagrant/gulp_test_1/node_modules/gulp-ruby-sass/index.js:74:25)
at ChildProcess.EventEmitter.emit (events.js:98:17)
at maybeClose (child_process.js:743:16)
at Socket.<anonymous> (child_process.js:956:11)
at Socket.EventEmitter.emit (events.js:95:17)
at Pipe.close (net.js:466:12)
The only way to get it working is to set noCache: true
Here is my gulpfile.js
var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
var sass = require('gulp-ruby-sass');
gulp.task('css', function(){
return gulp.src('./assets/scss/main.scss')
.pipe(sass({
style: 'expanded'
}))
.pipe(autoprefixer('last 5 versions'))
.pipe(gulp.dest('./assets/css'));
});
gulp.task('watch', function(){
gulp.watch('./assets/scss/*.scss', ['css']);
});
gulp.task('default', ['css', 'watch']);
Readme says "files starting with _
are ignored even if they match the globbing pattern," which makes sense to me. But what's happening is that the _
-prefixed SCSS files are being copied to my dest
folder (remaining uncompiled SCSS).
So with a file structure like this --
- docs/content/example-styles/
- compiled/
- _example-variables.scss
- circle.scss
- square.scss
- triangle.scss
-- when I run a task that looks like this --
gulp.src(['./docs/content/example-styles/*.scss'])
.pipe(sass({
'style': 'expanded'
}))
.pipe(gulp.dest('./docs/content/example-styles/compiled/'));
-- I end up with this:
- docs/content/example-styles/
- compiled/
- _example-variables.scss
- circle.css
- square.css
- triangle.css
- _example-variables.scss
- circle.scss
- square.scss
- triangle.scss
See how _example-variables.scss
got copied over, placed alongside the compiled CSS?
Am I missing something, or is this a bug?
Currently :
Won't play nice with sass-globbing v1.1.0. My setup works 100% elsewhere using the versions of Sass and Compass above plus Sass Globbing mentioned w/Grunt. This setup with gulp however fails to compile.
all files are outputed flat into the css output directory. the native sass behavior is to keep the folder structure of the scss files and put the css files into those folders
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.