Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support for compass. #94

Open
joegaudet opened this issue Jul 3, 2013 · 34 comments
Open

Support for compass. #94

joegaudet opened this issue Jul 3, 2013 · 34 comments

Comments

@joegaudet
Copy link

Sass is great, but having the included compass tools would be greater...

specifically the tools for creating sprite sheets.

.joe

@searls
Copy link
Member

searls commented Jul 3, 2013

Can Compass not be added to a Lineman project? We've been waiting to hear if there's a blocker.

@joegaudet
Copy link
Author

I tried importing the following:

@include 'compass/css3';

which is really the only way I do it via normal setups, but it's done by
using compass watch as there are a number of compass specific tasks that
get run from the gem. And it didn't work :P

I suspect I'd have to try and use node compass ? I have no experience doing
this at all though. Any guidance would be great. And i can proceed

On Wed, Jul 3, 2013 at 1:43 PM, Justin Searls [email protected]:

Can Compass not be added to a Lineman project? We've been waiting to hear
if there's a blocker.


Reply to this email directly or view it on GitHubhttps://github.com//issues/94#issuecomment-20443763
.

.joe

+1.778.994.4846

@searls
Copy link
Member

searls commented Jul 3, 2013

OK. Apologies, as you're probably the first and only person interested in using Compass with Lineman.

I suggest we treat this as a grunt-contrib-sass issue until it's clear Lineman is breaking you.

For instance, your sass task config apparently needs an option compass: true, per the README in order to enable compass imports.

@joegaudet
Copy link
Author

Yeah I have that part working for sure. The thing about compass is it's a
whole external gem requirement, it has it's own extensions to the sass pre
processor.

If there is a better way of getting sprite sheets working I'm all ears.

On Wed, Jul 3, 2013 at 2:39 PM, Justin Searls [email protected]:

OK. Apologies, as you're probably the first and only person interested in
using Compass with Lineman.

I suggest we treat this as a grunt-contrib-sasshttps://github.com/gruntjs/grunt-contrib-sassissue until it's clear Lineman is breaking you.

For instance, your sass task config apparently needs an option compass:
true, per the READMEhttps://github.com/gruntjs/grunt-contrib-sass#compassin order to enable compass imports.


Reply to this email directly or view it on GitHubhttps://github.com//issues/94#issuecomment-20446607
.

.joe

+1.778.994.4846

@davemo
Copy link
Member

davemo commented Jul 4, 2013

I haven't tried it, but this looks promising for a pure grunt solution for solving the image spritesheets: https://github.com/asciidisco/grunt-imagine

@joegaudet
Copy link
Author

Interesting, so if I wanted to add this task to our lineman build I'd just
follow the adding lineman tasks instructions ?

On Thu, Jul 4, 2013 at 11:00 AM, David Mosher [email protected]:

I haven't tried it, but this looks promising for a pure grunt solution for
solving the image spritesheets:
https://github.com/asciidisco/grunt-imagine


Reply to this email directly or view it on GitHubhttps://github.com//issues/94#issuecomment-20488239
.

.joe

+1.778.994.4846

@joegaudet
Copy link
Author

Hrm, did:

npm install grunt-imagine, ran as expected.

// task override configuration
prependTasks: {
dist: ["ngmin"], // ngmin should run in dist only
common: ["ngtemplates", "grunt-imagine"] // ngtemplates runs in dist
and dev
},

and it claimed I don't have it installed:

Running "common" task
Warning: Task "grunt-imagine" not found. Used --force, continuing.

However from my command line I can in fact see it.

Is there a config step I'm missing ?

@joegaudet
Copy link
Author

Added the load npm directive as well.

On Thu, Jul 4, 2013 at 12:02 PM, Joe Gaudet [email protected] wrote:

Hrm, did:

npm install grunt-imagine, ran as expected.

// task override configuration
prependTasks: {
dist: ["ngmin"], // ngmin should run in dist only
common: ["ngtemplates", "grunt-imagine"] // ngtemplates runs in dist
and dev
},

and it claimed I don't have it installed:

Running "common" task
Warning: Task "grunt-imagine" not found. Used --force, continuing.

However from my command line I can in fact see it.

Is there a config step I'm missing ?

.joe

+1.778.994.4846

@davemo
Copy link
Member

davemo commented Jul 4, 2013

You'll need to add grunt-imagine to the list of installed tasks from npm, Lineman has a small wrapper around this:

loadNpmTasks: [
   "grunt-imagine"
]

@joegaudet
Copy link
Author

Hrm looks like there is an error in the plugin.

@davemo
Copy link
Member

davemo commented Jul 4, 2013

Looks like grunt-imagine provides a number of targets, for sprites you'll probably want this target config and task: https://github.com/asciidisco/grunt-imagine#sprites-multitask

@searls
Copy link
Member

searls commented Jul 4, 2013

Did you run npm install after adding it to your package?

On Jul 4, 2013, at 1:04 PM, David Mosher [email protected] wrote:

You'll need to add grunt-imagine to the list of installed tasks from npm, Lineman has a small wrapper around this:

loadNpmTasks: [
"grunt-imagine"
]

Reply to this email directly or view it on GitHub.

@joegaudet
Copy link
Author

Where do those targets go? Application JS or ?

On Thu, Jul 4, 2013 at 12:05 PM, David Mosher [email protected]:

Looks like grunt-imagine provides a number of targets, for sprites you'll
probably want this target config and task:
https://github.com/asciidisco/grunt-imagine#sprites-multitask


Reply to this email directly or view it on GitHubhttps://github.com//issues/94#issuecomment-20490251
.

.joe

+1.778.994.4846

@davemo
Copy link
Member

davemo commented Jul 4, 2013

Yep, config/application.js is for task configuration, config/files.js is for file paths.

@davemo
Copy link
Member

davemo commented Jul 4, 2013

If you don't need all of grunt-imagine you may have success just porting the sprites task : https://github.com/asciidisco/grunt-imagine/blob/master/tasks/sprites.js

@joegaudet
Copy link
Author

Hrm,

Loading "gifmin.js" tasks...ERROR

TypeError: Cannot read property '_' of undefined

is the error I keep getting which appears to be generated by:

var _ = grunt.utils._;

missing dependency... ?

On Thu, Jul 4, 2013 at 12:08 PM, David Mosher [email protected]:

If you don't need all of grunt-imagine you may have success just porting
the sprites task :
https://github.com/asciidisco/grunt-imagine/blob/master/tasks/sprites.js


Reply to this email directly or view it on GitHubhttps://github.com//issues/94#issuecomment-20490331
.

.joe

+1.778.994.4846

@joegaudet
Copy link
Author

hrm, it would appear they haven't pushed their latest fix... that's annoying

On Thu, Jul 4, 2013 at 12:19 PM, Joe Gaudet [email protected] wrote:

Hrm,

Loading "gifmin.js" tasks...ERROR

TypeError: Cannot read property '_' of undefined

is the error I keep getting which appears to be generated by:

var _ = grunt.utils._;

missing dependency... ?

On Thu, Jul 4, 2013 at 12:08 PM, David Mosher [email protected]:

If you don't need all of grunt-imagine you may have success just porting
the sprites task :
https://github.com/asciidisco/grunt-imagine/blob/master/tasks/sprites.js


Reply to this email directly or view it on GitHubhttps://github.com//issues/94#issuecomment-20490331
.

.joe

+1.778.994.4846

.joe

+1.778.994.4846

@joegaudet
Copy link
Author

Errors all resolved but still getting:

Warning: Task "grunt-imagine" not found. Used --force,

I don't see an explicit mention of that task in the source, I see the
sprites task in the sub folder but I don't seem to be able to include it by
name either, is there a syntax for accessing a sub task?

@joegaudet
Copy link
Author

Nevermind I think i've got it figured now

On Thu, Jul 4, 2013 at 12:47 PM, Joe Gaudet [email protected] wrote:

Errors all resolved but still getting:

Warning: Task "grunt-imagine" not found. Used --force,

I don't see an explicit mention of that task in the source, I see the
sprites task in the sub folder but I don't seem to be able to include it by
name either, is there a syntax for accessing a sub task?

.joe

+1.778.994.4846

@joegaudet
Copy link
Author

Well so now I've got it running, however it appears to stop the app from
watching in dev mode.... any ideas there ?

@davemo
Copy link
Member

davemo commented Jul 4, 2013

If it has its own built in file watcher perhaps there could be a conflict, or perhaps you just need to add an additional watch target for the sprites in config/application?

@joegaudet
Copy link
Author

Ahhh that got it, moved it to the watch block, and then dist.

I'm going to write up a blog post on all of this soon.

.joe

On Thu, Jul 4, 2013 at 1:30 PM, David Mosher [email protected]:

If it has its own built in file watcher perhaps there could be a conflict,
or perhaps you just need to add an additional watch target for the sprites
in config/application?


Reply to this email directly or view it on GitHubhttps://github.com//issues/94#issuecomment-20492665
.

.joe

+1.778.994.4846

@davemo
Copy link
Member

davemo commented Jul 4, 2013

Awesome! Glad to hear it worked out 👍

@joegaudet
Copy link
Author

Gah crap.... now my whole app is borked.

Getting this:

Error: ENOENT, stat 'generated/index.html'

On Thu, Jul 4, 2013 at 1:37 PM, David Mosher [email protected]:

Awesome! Glad to hear it worked out [image: 👍]


Reply to this email directly or view it on GitHubhttps://github.com//issues/94#issuecomment-20492863
.

.joe

+1.778.994.4846

@davemo
Copy link
Member

davemo commented Jul 4, 2013

A hunch, you may be running into this: https://github.com/testdouble/lineman#too-many-open-files

@joegaudet
Copy link
Author

nope..

On Thu, Jul 4, 2013 at 2:25 PM, David Mosher [email protected]:

A hunch, you may be running into this:
https://github.com/testdouble/lineman#too-many-open-files


Reply to this email directly or view it on GitHubhttps://github.com//issues/94#issuecomment-20493948
.

.joe

+1.778.994.4846

@joegaudet
Copy link
Author

grrr just did a clean checkout, no fixie.... very very odd.

On Thu, Jul 4, 2013 at 2:26 PM, Joe Gaudet [email protected] wrote:

nope..

On Thu, Jul 4, 2013 at 2:25 PM, David Mosher [email protected]:

A hunch, you may be running into this:
https://github.com/testdouble/lineman#too-many-open-files


Reply to this email directly or view it on GitHubhttps://github.com//issues/94#issuecomment-20493948
.

.joe

+1.778.994.4846

.joe

+1.778.994.4846

@joegaudet
Copy link
Author

was there a change to the homepage directive ?

On Thu, Jul 4, 2013 at 2:33 PM, Joe Gaudet [email protected] wrote:

grrr just did a clean checkout, no fixie.... very very odd.

On Thu, Jul 4, 2013 at 2:26 PM, Joe Gaudet [email protected] wrote:

nope..

On Thu, Jul 4, 2013 at 2:25 PM, David Mosher [email protected]:

A hunch, you may be running into this:
https://github.com/testdouble/lineman#too-many-open-files


Reply to this email directly or view it on GitHubhttps://github.com//issues/94#issuecomment-20493948
.

.joe

+1.778.994.4846

.joe

+1.778.994.4846

.joe

+1.778.994.4846

@davemo
Copy link
Member

davemo commented Jul 4, 2013

Yes, see #88

@mattupstate
Copy link

@joegaudet I was able to get grunt-contrib-compass working with the following in config/application.js:

module.exports = require(process.env['LINEMAN_MAIN']).config.extend('application', {

  removeTasks: {
    common: ["less", "handlebars"]
  },

  prependTasks: {
    common: ["compass:compile"]
  },

  loadNpmTasks: ["grunt-contrib-compass"],

  compass: {
    compile: {
      options: {
        basePath: 'app',
        sassDir: 'css',
        imagesDir: 'img',
        fontsDir: 'fonts',
        javascriptsDir: 'js',
        cssDir: '../generated/css',
        generatedImagesPath: 'generated/img',
        importPath: ['vendor/css'],
        httpPath: '../',
        relativeAssets: false
      }
    }
  }
});

The only issue I have is that I can't seem to configure the concat:css task and/or files to not create generated/css/app.css. Perhaps this helps...

@ravasthi
Copy link

@mattupstate @joegaudet I was able to get Compass (mostly) working, including getting concat_sourcemap:css not to overwrite the compiled file, by adding the following additional config (in coffeescript):

  # Make sure concat_sourcemap gets the generated file from Compass
  concat_sourcemap:
    css:
      src: "<%= files.css.generated %>"

Now I'm working on getting the watcher to actually rerun compass:compile on changes to files in app/css.

@searls
Copy link
Member

searls commented Jun 15, 2014

A lineman-compass plugin that encapsulated this config would rock

On Sun, Jun 15, 2014 at 12:36 PM, Richa Avasthi [email protected]
wrote:

@mattupstate @joegaudet I was able to get Compass (mostly) working, including getting concat_sourcemap:css not to overwrite the compiled file, by adding the following additional config (in coffeescript):

  # Make sure concat_sourcemap gets the generated file from Compass
  concat_sourcemap:
    css:
      src: "<%= files.css.generated %>"

Now I'm working on getting the watcher to actually rerun compass:compile on changes to files in app/css.

Reply to this email directly or view it on GitHub:
#94 (comment)

@ravasthi
Copy link

@searls Would love to do that as well, but I'm still pretty new to lineman (started yesterday), and haven't yet gotten a plugin I'm trying to build working. Okay if I post that to get advice later?

@ravasthi
Copy link

@mattupstate @joegaudet @searls And here's the watcher bit:

  watch:
    compassSource:
      files:       ["app/css/**/*.scss"],
      tasks:       ["compass:compile"]

I'll work on getting a plugin written ASAP.

@davemo davemo added the plugins label Feb 11, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants