Comments (16)
Alright, lets assume you gonna stick with that gulp config:
First you have to install rcs:
$ npm i gulp-rcs rcs-core -DThen there is following config (please be aware of the caveats when you want to use this library:
const { src, series, dest, watch, parallel } = require('gulp') const browserSync = require('browser-sync').create() const postcss = require('gulp-postcss') const purgecss = require('@fullhuman/postcss-purgecss') const sass = require('gulp-sass') const autoprefixer = require('autoprefixer') const tailwind = require('tailwindcss') const babel = require('gulp-babel') const cssnano = require('cssnano') const rcs = require('gulp-rcs') sass.compiler = require('node-sass') function css (done) { src('./static/assets/**/*.scss') .pipe(sass.sync({ outputStyle: 'compressed' }).on('error', sass.logError)) .pipe(postcss([ tailwind() ])) .pipe(rcs()) // <-- (optional) ADD HERE! To replace and fill css files .pipe(dest('./static/built')) done() } function cssProd (done) { src('./static/assets/**/*.scss') .pipe(sass.sync({ outputStyle: 'compressed' }).on('error', sass.logError)) .pipe(postcss([ tailwind(), autoprefixer({ browserList: ['last 2 versions'] }), purgecss({ content: ['./static/**/*.html'], defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [], // whitelistPatterns: [] }), cssnano() ])) .pipe(rcs()) // <-- ADD HERE! To replace and fill css files for prod .pipe(dest('./static/built')) done() } function js (done) { src('./static/assets/**/*.js') .pipe(babel({ presets: ['@babel/preset-env'] })) .pipe(rcs()) // <-- (optional) ADD HERE! To replace filled css variables .pipe(dest('./static/built')) done() } function jsProd (done) { src('./static/assets/**/*.js') .pipe(babel({ presets: ['@babel/preset-env'] })) .pipe(rcs()) // <-- ADD HERE! To replace css variables files for prod (be aware of the caveats) .pipe(dest('./static/built')) done() } function sync (done) { browserSync.init({ server: { baseDir: './static' }, notify: false, port: 3002, ui: { port: 3003 }, reloadDelay: 1000 }) watch(['./static/**/*.js', './static/**/*.html', './static/**/*.css', 'tailwind.config.js']).on("change", browserSync.reload) done() } const cssWatcher = () => watch('./static/assets/**/*.scss', css) const jsWatcher = () => watch('./static/assets/**/*.js', js) const watchers = parallel(cssWatcher, jsWatcher) exports.default = series(css, js, sync, watchers) exports.build = series (cssProd, jsProd)
There are two
optional
steps, these are just to add if you want to replace the variables for yourgulp default
task (which will be for development I guess). Hope I could help, if not just ask ;)
Honestly, thank you so much for helping! I will try this later once I'm home, I appreciate it a lot! Not used to gulp, was a base frame I used haha. Will report back later!
from node-rename-css-selectors.
I made a PR in your repo. The reason why it didn't work was the async completion. The pipes where not yet done (so the css part should always be first and completed) but the functions already got the callback, by returning the pipe it worked properly.
I did not set up the donation pages correctly (but I setup a buymeacoffee just now). But I love to help so you don't have to donate ;)
from node-rename-css-selectors.
I think that is because there are a lot of css classes. If you add purgecss (in the
css
function like incssProd
) it will go down. But usually it shouldn't take that long. I will make some performance measurements.
Yeah just looking, as RCS is on the dev gulp tasks, it seems to hit a brick wall, so I've removed it from there (as honestly, only really needed for production). Thanks so much for all your time and help still, and performance increase is always great!
from node-rename-css-selectors.
Hey @chazza, no worries about the wrong repo. As rcs-core
is the main logic behind everything there is a wrapper for some build tools. One of them is gulp-rcs.
If you got any errors in gulp-rcs
, just open an issue there.
from node-rename-css-selectors.
Hey @chazza, no worries about the wrong repo. As
rcs-core
is the main logic behind everything there is a wrapper for some build tools. One of them is gulp-rcs.If you got any errors in
gulp-rcs
, just open an issue there.
How would I integrate that into what I have? Not very experienced with Gulp, this was a premade Gulp I found
from node-rename-css-selectors.
Alright, lets assume you gonna stick with that gulp config:
First you have to install rcs:
$ npm i gulp-rcs rcs-core -D
Then there is following config (please be aware of the caveats when you want to use this library:
const { src, series, dest, watch, parallel } = require('gulp')
const browserSync = require('browser-sync').create()
const postcss = require('gulp-postcss')
const purgecss = require('@fullhuman/postcss-purgecss')
const sass = require('gulp-sass')
const autoprefixer = require('autoprefixer')
const tailwind = require('tailwindcss')
const babel = require('gulp-babel')
const cssnano = require('cssnano')
const rcs = require('gulp-rcs')
sass.compiler = require('node-sass')
function css (done) {
src('./static/assets/**/*.scss')
.pipe(sass.sync({ outputStyle: 'compressed' }).on('error', sass.logError))
.pipe(postcss([
tailwind()
]))
.pipe(rcs()) // <-- (optional) ADD HERE! To replace and fill css files
.pipe(dest('./static/built'))
done()
}
function cssProd (done) {
src('./static/assets/**/*.scss')
.pipe(sass.sync({ outputStyle: 'compressed' }).on('error', sass.logError))
.pipe(postcss([
tailwind(),
autoprefixer({ browserList: ['last 2 versions'] }),
purgecss({
content: ['./static/**/*.html'],
defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
// whitelistPatterns: []
}),
cssnano()
]))
.pipe(rcs()) // <-- ADD HERE! To replace and fill css files for prod
.pipe(dest('./static/built'))
done()
}
function js (done) {
src('./static/assets/**/*.js')
.pipe(babel({
presets: ['@babel/preset-env']
}))
.pipe(rcs()) // <-- (optional) ADD HERE! To replace filled css variables
.pipe(dest('./static/built'))
done()
}
function jsProd (done) {
src('./static/assets/**/*.js')
.pipe(babel({
presets: ['@babel/preset-env']
}))
.pipe(rcs()) // <-- ADD HERE! To replace css variables files for prod (be aware of the caveats)
.pipe(dest('./static/built'))
done()
}
function sync (done) {
browserSync.init({
server: {
baseDir: './static'
},
notify: false,
port: 3002,
ui: { port: 3003 },
reloadDelay: 1000
})
watch(['./static/**/*.js', './static/**/*.html', './static/**/*.css', 'tailwind.config.js']).on("change", browserSync.reload)
done()
}
const cssWatcher = () => watch('./static/assets/**/*.scss', css)
const jsWatcher = () => watch('./static/assets/**/*.js', js)
const watchers = parallel(cssWatcher, jsWatcher)
exports.default = series(css, js, sync, watchers)
exports.build = series (cssProd, jsProd)
There are two optional
steps, these are just to add if you want to replace the variables for your gulp default
task (which will be for development I guess). Hope I could help, if not just ask ;)
from node-rename-css-selectors.
Hey @JPeer264 thank you lots! It did the css file, but sadly didn't replace the HTML classes?
from node-rename-css-selectors.
Alright that was my bad. At least we know gulp is working correctly, as we didn't say anything what gulp should do with the .html
files ;)
So let's add HTML to your script:
const { src, series, dest, watch, parallel } = require('gulp')
const browserSync = require('browser-sync').create()
const postcss = require('gulp-postcss')
const purgecss = require('@fullhuman/postcss-purgecss')
const sass = require('gulp-sass')
const autoprefixer = require('autoprefixer')
const tailwind = require('tailwindcss')
const babel = require('gulp-babel')
const cssnano = require('cssnano')
const rcs = require('gulp-rcs')
sass.compiler = require('node-sass')
function css (done) {
src('./static/assets/**/*.scss')
.pipe(sass.sync({ outputStyle: 'compressed' }).on('error', sass.logError))
.pipe(postcss([
tailwind()
]))
.pipe(rcs()) // <-- (optional) ADD HERE! To replace and fill css files
.pipe(dest('./static/built'))
done()
}
function cssProd (done) {
src('./static/assets/**/*.scss')
.pipe(sass.sync({ outputStyle: 'compressed' }).on('error', sass.logError))
.pipe(postcss([
tailwind(),
autoprefixer({ browserList: ['last 2 versions'] }),
purgecss({
content: ['./static/**/*.html'],
defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
// whitelistPatterns: []
}),
cssnano()
]))
.pipe(rcs()) // <-- ADD HERE! To replace and fill css files for prod
.pipe(dest('./static/built'))
done()
}
function js (done) {
src('./static/assets/**/*.js')
.pipe(babel({
presets: ['@babel/preset-env']
}))
.pipe(rcs()) // <-- (optional) ADD HERE! To replace filled css variables
.pipe(dest('./static/built'))
done()
}
function jsProd (done) {
src('./static/assets/**/*.js')
.pipe(babel({
presets: ['@babel/preset-env']
}))
.pipe(rcs()) // <-- ADD HERE! To replace css variables files for prod (be aware of the caveats)
.pipe(dest('./static/built'))
done()
}
function html (done) {
src('./static/**/*.html') // <-- this path might change depending on your structure, but I took it from the watch task
.pipe(rcs()) // <-- ADD HERE! To replace css variables files for prod (be aware of the caveats)
.pipe(dest('./static/built')) // <-- also this changes depending where your destination HTML files should be stored
done()
}
function htmlProd (done) {
src('./static/**/*.html') // <-- this path might change depending on your structure, but I took it from the watch task
.pipe(rcs()) // <-- ADD HERE! To replace css variables files for prod (be aware of the caveats)
// here you could add some more pipes for your HTML, maybe a minifier? -> https://github.com/alferov/awesome-gulp
.pipe(dest('./static/built')) // <-- also this changes depending where your destination HTML files should be stored
done()
}
function sync (done) {
browserSync.init({
server: {
baseDir: './static'
},
notify: false,
port: 3002,
ui: { port: 3003 },
reloadDelay: 1000
})
// here you are already watching html files, good ;)
watch(['./static/**/*.js', './static/**/*.html', './static/**/*.css', 'tailwind.config.js']).on("change", browserSync.reload)
done()
}
const cssWatcher = () => watch('./static/assets/**/*.scss', css)
const jsWatcher = () => watch('./static/assets/**/*.js', js)
const watchers = parallel(cssWatcher, jsWatcher)
exports.default = series(css, js, html, sync, watchers) // <-- do not forget to add html() here (anywhere after css and before sync
exports.build = series (cssProd, jsProd, htmlProd) // <-- also here add htmlProd()
The function html
and htmlProd
could also be the same then you obviously do not need two separate functions for that and can just use one in your default
and build
gulp tasks. Sorry that I forgot about the HTML files 😅
from node-rename-css-selectors.
Hey @JPeer264 I appreciate it lots, still having issues replacing the HTML, https://github.com/track/analyse-testing-example any chance you could take a look please. Also, do you have any donation pages - I'd love to donate some change at the end of the month for your help!
from node-rename-css-selectors.
I made a PR in your repo. The reason why it didn't work was the async completion. The pipes where not yet done (so the css part should always be first and completed) but the functions already got the callback, by returning the pipe it worked properly.
I did not set up the donation pages correctly (but I setup a buymeacoffee just now). But I love to help so you don't have to donate ;)
Wow amazing! Thank you so much, once I get paid at end of month I'll throw $10 your way! Thanks for creating this resource, absolutely fantastic :)
from node-rename-css-selectors.
Thanks a lot :) Just drop by if you need any further assistance.
from node-rename-css-selectors.
Hey sorry haha, now coming across issue where in development mode the CSS took 2.5mins, so I can't test. Is there any reason why?
from node-rename-css-selectors.
I think that is because there are a lot of css classes. If you add purgecss (in the css
function like in cssProd
) it will go down. But usually it shouldn't take that long. I will make some performance measurements.
from node-rename-css-selectors.
Welcome :)
from node-rename-css-selectors.
Is there any chance you can add support for conditional classes? E.g. with AlpineJS this would be;
:class="{ 'pointer-events-auto opacity-100': open }"
This doesn't seem to get replaced when RCS runs..
from node-rename-css-selectors.
Sure, I could take a look into that. Could you open an issue in gulp-rcs
for that?
from node-rename-css-selectors.
Related Issues (20)
- 3.2.4 breaks calc with css variables HOT 2
- Messes up with the `~` character HOT 4
- Uncaught TypeError: (0 , r.default)(...).at is not a function HOT 4
- Ignore specific class HOT 1
- renaming html tags such as div HOT 3
- [BUG] It renames EJS HOT 7
- Add documentation for rcsCore usage in rename-css-selectors
- mismatched layout after running rcs HOT 3
- Ids and classes are treated as the same identity HOT 10
- Not completely renamed if there's a line break between class names HOT 6
- Exclude classes with special characters HOT 6
- [Q] Webpack Usage? HOT 6
- Does this plugin optimize the library so most frequent classes get one letter not two? HOT 2
- Minify as a function HOT 2
- Bug: Textarea and other common words replaced HOT 3
- Unused css selectors given a one letter selector - is sorting by frequency working correctly? HOT 4
- getElementById string being replaced by class selector name instead of id
- Unchanging custom class name HOT 1
- Is it possible to use rcs-core with vite/rollup)?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from node-rename-css-selectors.