jh3y / gulp-boilerplate

a simple gulp boilerplate

Home Page:https://jh3y.github.io/gulp-boilerplate

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Separating stylus files

scoutrul opened this issue · comments

commented

Hello again!

I have a duplication of CSS becouse files with @import сombining. How can I compile only one index stylus file?

dublicate

Hey @scoutrul

This is an expected side effect of how I've set up the build task. The reason that styles are being duplicated is because all .styl files within the src/style directory are being concatenated before being processed with stylus.

This can be seen in this line; https://github.com/jh3y/gulp-boilerplate/blob/master/build-tasks/styles.js#L20

.pipe(plugins.concat(gConfig.pkg.name + '.stylus'))

The way to alter the behaviour to how you desire would be to remove that line from the task and then update the source path here; https://github.com/jh3y/gulp-boilerplate/blob/master/gulp-config.js#L56 to just look for the one root style file instead of all files under src/style.

styles   : 'src/style/style.styl', // NOT 'src/style/**/*.styl'

Hope that helps! 👍

commented

Yes, I got it!
Thank you!

Did you stop gulp and then restart it after making changes? It might also be best to clear out the public folder.

I am unable to replicate the issue. I created another .styl file and did a nested import with it and didn't get a duplicate rule in the .css file. Just the rule I expected.

Is it your intention to nest those styles under #app? That could lead to some long style rules.

Also, you may need to declare a new path such as watch_styles or compile_style because if you change to purely use src/style/style.styl as the source, it will only watch for changes in that one file and not watch your other files.

commented

It was just file names mistake, sorry for that

No worries, glad you got it sorted 😄 👍