Generate a list or map of css files - css

I'm starting to work on a new app at my company. I'm hoping to run a quick process that will generate an outline, tree, or other map-type thing of all of the CSS and SASS files in the app directory.
I know I can grep it, but I wanted to see if someone had something more targeted I could use.

If you're simply looking to generate a tree, the common tree command can filter by file type if provided a pattern. Maybe this will help:
tree -P "*.css" --prune
The -P option allows you to match a pattern, and the --prune option hides empty folders (or ones which don't contain match files).
It's a pretty nifty tool; here's some sample output from tree -P "*.js" --prune on a node project directory:
.
├── Authorize.js
├── collections.js
├── functions
│   ├── downloadImage.js
│   ├── generateThumbnails.js
│   ├── hashImage.js
│   ├── loadMedia.js
│   └── uploadFile.js
├── node_modules
│   ├── body-parser
│   │   ├── index.js
│   │   ├── lib
│   │   │   ├── read.js
│   │   │   └── types
│   │   │   ├── json.js
│   │   │   ├── raw.js
│   │   │   ├── text.js
│   │   │   └── urlencoded.js
│   │   └── node_modules
│   │   ├── bytes
│   │   │   └── index.js
│   │   ├── content-type
│   │   │   └── index.js
More documentation here: http://www.computerhope.com/unix/tree.htm

Related

Ignore dags in subfolders using .airflowignore

I have the following dir structure:
.
├── project
│   ├── dag_1
│   │   ├── dag
│   │   │   ├── current
│   │   │   └── dag_1_v2.py
│   │   │   └── deprecated
│   │   │   └── dag_1_v1.py
│   │   └── sparkjobs
│   │   ├── current
│   │   └── deprecated
│   └── dag_2
│      ├── dag
│      │   ├── current
│      │   └── dag_2_v2.py
│      │   └── deprecated
│      │   └── dag_2_v1.py
│   └── sparkjobs
│   ├── current
│   └── deprecated
I want to ignore all deprecated folders, so I used .airflowignore to do that. When I place .airflowignore with */deprecated inside dag_1 or dag_2 folder, Airflow ignores the deprecated dag, like:
├── project
│   ├── dag_1
│   │   ├── .airflowignore
│   │   ├── dag
│   │   │   ├── current
│   │   │   └── dag_1_v2.py
│   │   │   └── deprecated
│   │   │   └── dag_1_v1.py
Considering this, I'll have to place a .airflowignore inside each dag folder. When I try to put onlny one .airflowignore using **/**/deprecated in the project folder the deprecated dags returns to Airflow, like:
├── project
│   ├── .airflowignore
│   ├── dag_1
│   │   ├── dag
│   │   │   ├── current
│   │   │   └── dag_1_v2.py
│   │   │   └── deprecated
│   │   │   └── dag_1_v1.py
My question is: How can I have only one .airflowignore in the project dir level to ignore all deprecated folders inside each dag_n/dag folder? Is this possible?
.airflowignore has same logic as .gitignore so what ever solution applies to .gitignore will also work here.
I believe what you are after is just
deprecated/
on the top level.
See also ignoring any 'bin' directory on a git project

How do I change Bulma's default styling?

I've installed sass as instructed here http://versions.bulma.io/0.7.0/documentation/components/navbar/#variables. The guide says I need to include my change from $navbar-item-hover-background-color: $background to $navbar-item-hover-background-color: #28567d before bulma.sass gets imported.
I haven't seen a line with #import bulma.sass or #import bulma on it though.
the directory tree may be helpful:
.
├── bulma.sass
├── CHANGELOG.md
├── css
│   ├── bulma.css
│   └── bulma.css.map
├── LICENSE
├── package.json
├── README.md
└── sass
├── base
│   ├── _all.sass
│   ├── generic.sass
│   ├── helpers.sass
│   └── minireset.sass
├── components
│   ├── _all.sass
│   ├── breadcrumb.sass
│   ├── card.sass
│   ├── dropdown.sass
│   ├── level.sass
│   ├── media.sass
│   ├── menu.sass
│   ├── message.sass
│   ├── modal.sass
│   ├── navbar.sass
│   ├── pagination.sass
│   ├── panel.sass
│   └── tabs.sass
├── elements
│   ├── _all.sass
│   ├── box.sass
│   ├── button.sass
│   ├── container.sass
│   ├── content.sass
│   ├── form.sass
│   ├── icon.sass
│   ├── image.sass
│   ├── notification.sass
│   ├── other.sass
│   ├── progress.sass
│   ├── table.sass
│   ├── tag.sass
│   └── title.sass
├── grid
│   ├── _all.sass
│   ├── columns.sass
│   └── tiles.sass
├── layout
│   ├── _all.sass
│   ├── footer.sass
│   ├── hero.sass
│   └── section.sass
└── utilities
├── _all.sass
├── animations.sass
├── controls.sass
├── derived-variables.sass
├── functions.sass
├── initial-variables.sass
└── mixins.sass
I've tried to edit navbar.sass:
$navbar-item-hover-background-color: #28567d !default
and then rebuild the bulma.css file with sass bulma.sass bulma.css
It had no effect though.
Any assistance much appreciated.

tree terminal command: Avoid printing all sub folders/files and putting limit

I would like to print all the subdirectories and files from a certain directory. But some of the subfolders have humungous number of files and I would like to cap the number of subdirectories/files they print for each subfolder where it goes over that cap. How do I do it?
Currently I have this situation:
/data$ tree
.
├── filenames.json
├── tripletlists
│   ├── class_tripletlist_test.txt
│   ├── class_tripletlist_train.txt
│   ├── class_tripletlist_val.txt
│   ├── closure_tripletlist_test.txt
│   ├── closure_tripletlist_train.txt
│   ├── closure_tripletlist_val.txt
│   ├── gender_tripletlist_test.txt
│   ├── gender_tripletlist_train.txt
│   ├── gender_tripletlist_val.txt
│   ├── heel_tripletlist_test.txt
│   ├── heel_tripletlist_train.txt
│   └── heel_tripletlist_val.txt
└── ut-zap50k-images
├── Boots
│   ├── Ankle
│   │   ├── adidas
│   │   │   ├── 8030969.3.jpg
│   │   │   └── 8030970.107722.jpg
│   │   ├── adidas Kids
│   │   │   ├── 8070145.388249.jpg
│   │   │   └── 8070146.388250.jpg
│   │   ├── adidas Originals
│   │   │   ├── 8027274.372160.jpg
│   │   │   ├── 8027274.372161.jpg
│   │   │   ├── 8027310.115329.jpg
│   │   │   ├── 8027310.183092.jpg
│   │   │   ├── 8027320.372147.jpg
│   │   │   └── 8027320.372178.jpg
│   │   ├── adidas Originals Kids
│   │   │   ├── 8025627.371498.jpg
│   │   │   ├── 8025627.74095.jpg
│   │   │   ├── 8025719.11196.jpg
You can use the flag --filename N in tree --filenames N where N is the number of caps. For example, if I just want to print maximum of four subdirectories or files per subdirectory, you can youse tree --filename 4.
>> ls
filenames.json tripletlists ut-zap50k-images
>> tree --filelimit 4
.
├── filenames.json
├── tripletlists [12 entries exceeds filelimit, not opening dir]
└── ut-zap50k-images
├── Boots [5 entries exceeds filelimit, not opening dir]
├── Sandals
│   ├── Athletic [6 entries exceeds filelimit, not opening dir]
│   ├── Flat [314 entries exceeds filelimit, not opening dir]
│   └── Heel [25 entries exceeds filelimit, not opening dir]
├── Shoes [10 entries exceeds filelimit, not opening dir]
└── Slippers
├── Boot [6 entries exceeds filelimit, not opening dir]
├── Slipper Flats [77 entries exceeds filelimit, not opening dir]
└── Slipper Heels
├── Daniel Green [8 entries exceeds filelimit, not opening dir]
└── L.B. Evans
├── 7590239.255.jpg
└── 7590239.72.jpg

Custom grunt configuration

I'm porting an application from php to node(sailsjs) at the same time trying to replace ant with grunt. I like the current project build structure and I would like to preserve some of it.
It looks like below...
project root
├── build (git ignored)
│   ├── coverage
│   ├── dist(to be deployed to target env)
│   └── local(to be deployed to local env)
├── lib
│   └── some library files like selenium..etc.
├── src
│   ├── conf
│   │   └── target/local properties
│   ├── scripts(may not be needed with grunt??)
│   │   ├── db
│   │   │   └── create_scripts...
│   │   ├── se
│   │   │   └── run_selenium_scripts...
│   │   └── tests
│   │   └── run_unit_test_scripts...
│   ├── tests
│   │   └── test_code....
│   └── webapp(this is where I'd like to place node[sailsjs] code)
│      └── code....
└── wiki .etc...
It doesn't exactly have to be the same way as above but more or less I prefer to build something similar. Now, pretty much all the sailsjs examples I have seen look like below.
project root
├── .tmp
│   └── stuff...
├── package.json
├── tasks
│   ├── config
│   │   └── grunt task configs...
│   └── register
│      └── grunt task registrations...
├── tests
│   ├── unit
│   └── selenium
└── Gruntfile.js
Where should I place Gruntfile.js, app.js, package.json to achieve what I want? What other detail should I have to make grunt function and create artifacts as I want them?
Note: Obviously I'm not expecting to get all the details of grunt configuration. But I guess it helps to see where most important things go and how basic tasks could be configured.
Thanks for your answer.
It's hard to give a precise answer without a detail of your build steps, but I would suggest:
Gruntfile.js and package.json go to your root folder
you setup your individual build tasks (whatever they are) to output to build: see the doc of each task on how to do that, it's usually the dest option
Hope this helps a bit.

Compass and SASS on complex project structure

I'm developing an Angular application and I'm using the following folder structure:
.
├── app
│   ├── assets
│   │   ├── images
│   │   │   ├── brands
│   │   │   ├── coletaSeletiva
│   │   │   ├── quiz
│   │   │   └── vidaEmLem
│   │   │   └── avatars
│   │   ├── sass
│   │   └── stylesheets
│   ├── scripts
│   │   └── controllers
│   └── views
│   └── coleta
└── test
└── spec
└── controllers
This is the yeoman angular generated project.
The generated css that come from SASS is pointing to files with the following path '/app/assets/...', because config in at the project's root.
My server is starting from app folder, so I call my assets using just /assets/...
What should I do?
Should I place config.rb inside of app folder and change assets paths?
My config.rb looks like this:
http_path = "/"
css_dir = "app/assets/stylesheets"
sass_dir = "app/assets/sass"
images_dir = "app/assets/images"
javascripts_dir = "app/assets/javascripts"
relative_assets = true
You can minify your code with "grunt" or "grunt --force". Then i think there will be no issues.
If still you got the issue of images . Try to set the path like ../images/image.png [if image folder is in parent folder] or ./images/image.png [if image folder is in the same folder].

Resources