g13013 / broccoli-compass Goto Github PK
View Code? Open in Web Editor NEWLicense: MIT License
License: MIT License
I would like to compile scss files which contains compass helpers (spriting) with broccoli-compass. Sass compilation is actually very slow (= 12 sec). I am running on a symfony project and don't use ember. I do not really understand how to convert my Gruntfile or config.rb into broccoli-compass file.
If broccoli-compass uses compass to compile will it be as slower as a compass compilation ?
Anyone could help me ?
this is the config.rb I am using
line_comments = false
output_style = :compressed
project_path = 'src/Project/DPBundle/Resources'
css_dir = 'public/css'
sass_dir = 'sass'
images_dir = 'public/images'
http_path = '/'
http_images_path = '/bundles/projectdp/images/'
http_generated_images_path = '/bundles/projectdp/images/'
relative_assets = false
sourcemap = true
My Brocfile.js contains the following:
var compileCompass = require('broccoli-compass');
app.styles = function() {
return compileCompass(this.appAndDependencies(), this.name + '/styles/app.scss', {
outputStyle: 'expanded',
sassDir: this.name + '/styles',
imagesDir: 'public/images',
cssDir: '/assets'
});
};
I keep getting the error:
[broccoli-compass] Error: Command failed: .
The command-line arguments was:
`compass compile my-app/styles/app.scss --relative-assets --sass-dir my-app/styles --output-style expanded --images-dir public/images --css-dir "../compass_compiler-tmp_dest_dir-Va0F4KhL.tmp/assets"
Any ideas? I'm using ember-cli and it seems this configuration is working for others, just not me.
I am using this with ember-cli v0.0.44 and it is very large project with thousands of files.
events.js:72
throw er; // Unhandled 'error' event
^
Error: EMFILE, open 'project_path/tmp/tree_merger-tmp_dest_dir-b2gQJVAN.tmp/bower_components/bootstrap-datepicker/tests/run-qunit.js'
This line copies all files from project to tmp
and it is the root of error. Is copying all files needed at all?
@g13013 I am using your library and I am unable to import images icons to generate sprites for css generation. Is there a step that I must do in order to make this work with compass?
Thanks,
Adam
I'm a bit confused why is it looking for compass-rails instead of just compass?
Either way I installed all
gem install compass
gem install compass-rails
gem install sass
app.styles = function() {
var vendorTree = this._processedVendorTree();
var stylesTree = pickFiles(this.trees.styles, {
srcDir: '/',
destDir: '/app/styleszzz'
});
var vendorPlusStyleTrees = mergeTrees([vendorTree, stylesTree, 'public']);
// rename app/styles/app.scss to <your app name>.scss
return compileCompass(vendorPlusStyleTrees, 'app/styles/*.scss', {
outputStyle: 'expanded',
require: 'sass-css-importer',
sassDir: 'app/styles',
imagesDir: 'images',
fontsDir: 'fonts',
cssDir: '/assets'
});
};
All passed and when I run ember build with this plugin I get this error
[broccoli-compass] stderr:
Unable to load extension: compass-rails
Unable to load extension: compass-rails
Unable to load extension: compass-rails
Unable to load extension: compass-rails
Unable to load extension: compass-rails
Unable to load extension: compass-rails
Unable to load extension: compass-rails
Unable to load extension: compass-rails
Unable to load extension: compass-rails
Unable to load extension: compass-rails
Unable to load extension: compass-rails
Unable to load extension: compass-rails
File not found: app/styles/*.scss
at ChildProcess.exithandler (child_process.js:648:15)
at ChildProcess.emit (events.js:98:17)
at maybeClose (child_process.js:756:16)
at Socket.<anonymous> (child_process.js:969:11)
at Socket.emit (events.js:95:17)
at Pipe.close (net.js:465:12)
I tried to go down this path with pretty crazy hacks in timmfin/broccoli-compass@f454d6c...reuse-sass-cache-dir, but it didn't pan out as I expected... I verified the .sass-cache
was re-used across builds via prints inside of Sass code, but it seemed to only improve performance by 10%-20% (I very well may have been missing something though).
Anyway, figured I'd bring it up in case anyone else wants to take a stab.
Not sure if this is the right place to ask this, but I'm having a hard time figuring it out.
My Brocfile was working great, until I recently upgraded Ember CLI to 0.39. Here's the code:
app.styles = function() {
return compileCompass(this.appAndDependencies(), 'app/styles/' + this.name + '.scss', {
compassCommand: 'bundle exec compass',
outputStyle: 'expanded',
sassDir: 'app/styles',
imagesDir: 'public/images',
cssDir: '/assets'
});
};
I get this error:
[broccoli-compass] Error: Command failed: Errno::ENOENT on line ["155"] of ~/.rvm/gems/ruby-2.1.1/gems/compass-0.12.6/lib/compass/compiler.rb: No such file or directory @ rb_sysopen - ~/campaign-designer/tmp/tree_merger-tmp_dest_dir-JljP7ZaY.tmp/app/styles/campaign-designer.scss
Run with --trace to see the full backtrace
arguments: `bundle exec compass compile app/styles/campaign-designer.scss --relative-assets --sass-dir app/styles --output-style expanded --images-dir public/images --css-dir "../compass_compiler-tmp_cache_dir-JPdd4ckH.tmp/assets"`
Interestingly, when I run the command given by arguments
, it works. Any ideas?
Next step
Can we opt into a whitelist only mode?
A quick solution would be:
Would it be possible to expose ['**/*\]
as a configuration, so a user can easily choose to whitelist instead of black listing?
https://github.com/g13013/broccoli-compass/blob/master/index.js#L57
This section in the README says:
var compileSass = require('broccoli-compass');
var compassTree = compileSass(tree, files, {
outputStyle: 'expanded' //include here compass options. Note: some options might be ignored as they are automatically filled
});
... however, it does not say where to put it. I'm new to ember-cli and broccoli, so I was not able to figure it out - where does it go?
I assume that the variables compileSass
and compassTree
should be add to something too, but not sure what to.
I am using broccoli-compass
in Brocfile.js
like this.
However, the CSS generated contains image paths like this:
background: url('../../tree_merger-tmp_dest_dir-uum1Ex0x.tmp/assets/images/icon-s0ece3a86d5.png') no-repeat;
(See question asked on Stackoverflow for more details)
How can this be avoided?
I'm trying to add vendor
to my import path, so I can use @include
in my SASS files.
Here's my config:
app.styles = function() {
return compileCompass(this.appAndDependencies(), this.name + '/styles/app.scss', {
outputStyle: 'expanded',
sassDir: this.name + '/styles',
imagesDir: 'public/images',
cssDir: '/assets',
additionalImportPaths: ['/vendor']
});
};
But, I get an error:
Error: Command failed: . The command-line arguments was:
compass compile campaign-designer/styles/app.scss --relative-assets --sass-dir campaign-designer/styles --output-style expanded --images-dir public/images --css-dir "../compass_compiler-tmp_dest_dir-UvKrRTsR.tmp/assets" --additional-importpaths /vendor
Any ideas?
Maintain the ember-cli addon
My build keeps failing because the path generated for .sass-cache has reached the OS limitation.
.........{my_path}........./tmp/tree_merger-tmp_dest_dir-6RqhWvoS.tmp/.sass-cache/07b080cf80e900d3237fcd17450769c4d2640ca1/_background-origin.scssc20141029-12616-ebwe9i
I am aware I could make use of symbolic links to shorten my path but I would like a different fix and make use of the compass/sass cache location options.
I've tried several ways but none seem to be reflected in the final compass compile
command I see in the console.
Brocfile
return compileCompass(mergedTrees, 'app/styles/app.scss', {
outputStyle: 'expanded',
require: 'sass-css-importer',
sassDir: 'app/styles',
imagesDir: 'assets/images',
fontsDir: 'assets/fonts',
cssDir: 'assets/apps/' + appName + '/css',
sassOptions: { cache_location: '/tmp'}
});
What I've tried
sassOptions: { cache_location: '/tmp'}
as per http://sass-lang.com/documentation/file.SASS_REFERENCE.html#options
sassOptions: { cacheLocation: '/tmp'}
cachePath: '/tmp'
as per http://rok3.me/programming/compass-set-cache-location/
'!**/*.js',
'!**/*.html',
'!**/*.md',
'!**/*.xml'
or maybe a more extensive but configurable whitelist?
I have next configuration
const rootDir = 'src';
const styles = pickFiles(rootDir, {
srcDir: 'styles'
});
const compassTree = compileSass(styles, {
outputStyle: 'expanded',
sassDir: '.',
cssDir: '.',
compassCommand: 'bundle exec compass',
imagesDir: path.join(__dirname, '/src/images'),
config: path.join(__dirname, '/compass.rb')
});
module.exports = compassTree;
after compilation broccoli build ./static/styles
I have next folder structure
Why does it happen? Why do all scss files are copied? If I try to compile only one specific file (adding files: ['application.scss'] to configuration) I have an error: Individual stylesheets must be in the sass directory.
I'm using:
compass v1.0.3
sass v3.4.18
ruby v2.2.2p95
broccoli v0.16.7
node v0.12.0
ps I've working also with middleman and using the same compass and sass versions and it works great, so I think it is not versions problems.
A simple project takes a good 2-3 seconds. The worst part is for any little change this delay is always there, it's not so much in the spirit of broccoli unfortunately. Any tips for improving performance?
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.