Integration with Gulp

[heychazza]

Hey JPeer,

I know this may be the wrong repo to post, but how could I integrate Rename Selectors with this gulp file? As you don't seem to have any tie with PurgeCSS.

Thank you!

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')

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(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(dest('./static/built'))
    done()
}

function js (done) {
    src('./static/assets/**/*.js')
        .pipe(babel({
            presets: ['@babel/preset-env']
        }))
        .pipe(dest('./static/built'))
    done()
}

function jsProd (done) {
    src('./static/assets/**/*.js')
        .pipe(babel({
            presets: ['@babel/preset-env']
        }))
        .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)

[JPeer264]

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.

[heychazza]

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

[JPeer264]

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 ;)

[heychazza]

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 ;)

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!

[heychazza]

Hey @JPeer264 thank you lots! It did the css file, but sadly didn't replace the HTML classes?

[JPeer264]

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 😅

[heychazza]

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!

[JPeer264]

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 ;)

[heychazza]

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 :)

[JPeer264]

Thanks a lot :) Just drop by if you need any further assistance.

[heychazza]

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?

[JPeer264]

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.

[heychazza]

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.

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!

[JPeer264]

Welcome :)

[heychazza]

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..

[JPeer264]

Sure, I could take a look into that. Could you open an issue in gulp-rcs for that?