CodeSleeve / asset-pipeline

This Laravel 4 package provides a very simple and easy to use asset pipeline. It was heavily inspired by the Rails asset pipeline. We make use of the wonderful Assetic package to help with pre-compliation!
http://www.codesleeve.com
MIT License
489 stars 53 forks source link

depend_on does not work #152

Open aheissenberger opened 10 years ago

aheissenberger commented 10 years ago

I use "depend_on" to check if files have been changed which are only imported by sass (@import) but after some debugging it looks like the asset-pipline checks if the files listed with depend_on are in the cache which is not the case. as a result it will recreate the resources again even when non of the depend_on files have changed.

application.css:

/**
 *= require main
 */

main.scss:

/*
 *= depend_on _project-settings
 *= depend_on _basis-layout
 *= depend_on _button
 *= depend_on _buehne
 *= depend_on _spiel_login_registrierung
 *= depend_on _teilnahmebedingungen
 * 
 * Foundation Framework
 *= depend_on _foundation

*/

// Comment out this import if you don't want to use normalize    
@charset "UTF-8";

@import "../../../vendor/zurb/foundation/scss/normalize";
@import "../../../vendor/zurb/foundation/scss/foundation/_functions";

// project setting
@import "project-settings";

// modify Global Foundation Settings
//@import 'foundation-settings';

@import "foundation";
....
kdocki commented 10 years ago

@aheissenberger make sure that when you use depend_on that it points to a real file...

so I know sass prefixes partials with _ but pipeline needs to know the real file, it won't be able to find

"_foundation" if the filename is actually foundation.scss

You should be able to do (without underscore _)

/**
 *= depend_on foundation
 */
kdocki commented 10 years ago

@aheissenberger ... wait, are you saying that the main.scss file being regenerated in the cache everytime even when none of the asset files changed?

aheissenberger commented 10 years ago

yes - the main.scss is regenerated every time with the same hash:

168829 24 Mär 10:56 adbdf7d0c15247eb3218053e4d19d84d
168829 24 Mär 10:57 adbdf7d0c15247eb3218053e4d19d84d

I have changed the manifesto in main.scss to include .scss :

//= depend_on _project-settings.scss
//= depend_on _basis-layout.scss
//= depend_on _button.scss
//= depend_on _buehne.scss
//= depend_on _spiel_login_registrierung.scss
//= depend_on _teilnahmebedingungen.scss

// Foundation Framework
//= depend_on _foundation.scss
@charset "UTF-8";
...

but it did not change anything. Testing without _ gave me an error.

I have been debugging the code and the depend_on was checking if e.g. _project-settings.scss exists in the asset cache - which is never true as the file is getting imported by a SASS @import

teeli commented 10 years ago

I have the same problem with depend_on. I have a main.scss file which is imported to application.css using

/*
 *= depend_on _variables.scss
 *= require main.scss
 */

Then in main.scss I import e.g. _variables.scss, like

@import 'variables';

I always have to make a change to main.scss itself, otherwise the styles won't update.

kdocki commented 10 years ago

@aheissenberger @teeli Ah, I see... that is a good point. crap nuggets.

Okay, I will look into this.

Another problem I'm seeing is that Assetic cannot clean up itself. Anytime a file is updated, a new hash key is created for it and the old cached file is left just hanging out in in the wild in app/storage/cache/asset-pipeline

Another issue is that I I want to do php artisan assets:clean which would be nice to just remove all the cached assets... but there is no remove all for the AssetCacheInterface, so I have no way of knowing how to remove all the files because I don't know their keys.

So all this to say... it think I am going to try and clean this up and refactor some of this.

For now as a work around you can simply do

//= require _variables.scss

in your manifest file. This will let create a cache in pipeline for that file.

depend_on is not creating caches it is just checking for existence.

aheissenberger commented 10 years ago

How should this work with //= require _variables.scss? Do you mean to replace each @import with a require statement?

teeli commented 10 years ago

I'm not sure if I understood correctly, but I don't think require is a very good alternative. Files that are included using require are scoped separately, so e.g. variables defined in _variables.scss wouldn't be usable in main.scss unless also using @import. Let's say all your components are defined in separate SCSS files (like for example _typography.scss, _grid.scss) and they all use the variables from _variables.scss and mixins from _mixins.scss. You will get a bunch of errors about missing variables if you only use require. You'd also have to @import all the other files separately in every file that depend on it. Wouldn't that cause quite a bit of unnecessary overhead and cause longer compilation times? Sometimes even now a page refresh after some changes might take up to a minute in my dev env.

I mean this example is pretty simple, but in larger projects I try to keep things organized, so I might have quite a lot of different components that depend on each other (from common stuff like variables, mixins, typography, layout etc. to specific components on specific sections on the site like videoplayers, image galleries, etc.)

gpyrbris commented 10 years ago

Any news on this bug yet guys? It's still occurring and using 'require' isn't a substitute for those of us using LESS or SASS that need variables carried through from individual css files like teeli pointed out above.

lazlo-bonin commented 10 years ago

Same here, as others mentioned, require is not a valid alternative (even in conjunction with @import, because it duplicates the code). depend_on doesn't work for me either (I'm using LESS).