├── .github
└── workflows
│ └── test.yml
├── .gitignore
├── .npmignore
├── LICENSE
├── README.md
├── index.js
├── package-lock.json
├── package.json
└── test
├── fixtures
├── group
│ ├── app.js
│ ├── index.html
│ └── style.css
├── style.alt-append.css
├── style.alt-buster.css
├── style.alt-method-hash-strong.css
├── style.alt-method-hash-weak.css
├── style.alt-postfix.css
├── style.alt-prefix.css
├── style.alt-prepend.css
└── style.css
├── main.js
└── result
├── group
├── app.js
├── index.html
└── style.css
├── style.alt-append.css
├── style.alt-buster.css
├── style.alt-method-hash-strong.css
├── style.alt-method-hash-weak.css
├── style.alt-postfix.css
├── style.alt-prefix.css
├── style.alt-prepend.css
└── style.css
/.github/workflows/test.yml:
--------------------------------------------------------------------------------
1 | on: [push, pull_request]
2 |
3 | name: Test and Build
4 |
5 | jobs:
6 | test:
7 | strategy:
8 | matrix:
9 | os: [ubuntu-latest]
10 | node-version: [10.x]
11 | fail-fast: false
12 |
13 | runs-on: ${{ matrix.os }}
14 |
15 | steps:
16 | - name: Checkout code
17 | uses: actions/checkout@v2
18 |
19 | - name: Install NodeJS
20 | uses: actions/setup-node@v1
21 | with:
22 | node-version: ${{ matrix.node-version }}
23 |
24 | - name: Verify versions
25 | run: node --version && npm --version && node -p process.versions.v8
26 |
27 | - name: Cache build artifacts
28 | id: cache-node
29 | uses: actions/cache@v2
30 | with:
31 | path: |
32 | ~/.npm
33 | node_modules
34 | key: ${{ runner.os }}-node-${{ matrix.node-version }}
35 |
36 | - name: Install dependencies
37 | run: npm install
38 |
39 | - name: Run tests
40 | run: npm test
41 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .idea
2 | .DS_Store
3 | /node_modules
4 | npm-debug.log
5 | test/data/temp
6 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | .idea
2 | .DS_Store
3 | /node_modules
4 | npm-debug.log
5 | /.github
6 | /test
7 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2016 Valerian Saliou
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # gulp-minify-css-names
2 |
3 | [](https://github.com/valeriansaliou/gulp-minify-css-names/actions?query=workflow%3A%22Test+and+Build%22) [](https://www.npmjs.com/package/gulp-minify-css-names) [](https://www.npmjs.com/package/gulp-minify-css-names) [](https://www.buymeacoffee.com/valeriansaliou)
4 |
5 | **Gulp plugin to minify CSS classes and CSS IDs.**
6 |
7 | Forked from: [gulp-minify-cssnames](https://github.com/Connormiha/gulp-minify-cssnames) from [@Connormiha](https://github.com/Connormiha).
8 |
9 | ## Usage
10 |
11 | Minifying all names(class, id) with some postfix (default: '-post-').
12 |
13 | ### Example
14 |
15 | We have css file:
16 |
17 | ```css
18 | .-pre-menu-post- {color: red;}
19 | .-pre-menu_top-post- {color: black;}
20 | .-pre-menu_item-post- {color: green;}
21 | .-pre-menu_item_active-post- {color: blue;}
22 | .-pre-menu_item_active-post-::before {content: 'active'}
23 | ```
24 |
25 | ```javascript
26 | var gulp = require('gulp');
27 | var gulpMinifyCssNames = require('gulp-minify-css-names');
28 |
29 | gulp.task('minify-css-names', function() {
30 | return gulp.src(['src/*.css'])
31 | .pipe(gulpMinifyCssNames())
32 | .pipe(gulp.dest('build'))
33 | });
34 | ```
35 |
36 | #### Result
37 |
38 | ```css
39 | .a0 {color: red;}
40 | .a1 {color: black;}
41 | .a2 {color: green;}
42 | .a3 {color: blue;}
43 | .a3::before {content: 'active'}
44 | ```
45 |
46 | ### Example2
47 |
48 | Our project has 3 files:
49 |
50 | ##### style.css
51 |
52 | ```css
53 | .-pre-menu-post- {color: red;}
54 | .-pre-menu_top-post- {color: black;}
55 | .-pre-menu_item-post- {color: green;}
56 | .-pre-menu_item_active-post- {color: blue;}
57 | .-pre-menu_item_active-post-::before {content: 'active'}
58 | ```
59 |
60 | ##### index.html
61 |
62 | ```html
63 |
64 |
65 |
66 |
67 |
68 | ```
69 | ##### app.js
70 |
71 | ```javascript
72 | var $menuItems = document.querySelectorAll('.-pre-menu_item-post-');
73 | var $mainMenu = document.querySelector('#-pre-main-menu-post-');
74 | ```
75 |
76 | ##### Gulp task
77 |
78 | ```javascript
79 | var gulp = require('gulp');
80 | var gulpMinifyCssNames = require('gulp-minify-css-names');
81 |
82 | gulp.task('minify-css-names', function() {
83 | return gulp.src(['src/style.css', 'src/index.html', 'src/app.js'])
84 | .pipe(gulpMinifyCssNames())
85 | .pipe(gulp.dest('build'))
86 | });
87 | ```
88 |
89 | #### Result
90 |
91 | style.css
92 | ```css
93 | .a0 {color: red;}
94 | .a1 {color: black;}
95 | .a2 {color: green;}
96 | .a3 {color: blue;}
97 | .a3::before {content: 'active'}
98 | ```
99 | index.html
100 | ```html
101 |
102 |
1
103 |
2
104 |
3
105 |